Working Methodology & Tools

• Project-based work Agile/Scrum approach : Do a Backlog and decides the sprints duration 1 week

  

• Tools and platforms:
  • developer computer OS,
  • GitHub, gitea ⇒ https://docs.gitea.com/installation/comparison
  • IDE
  • Internet browser,
  • Figma, Sketch
  • Gantt MS

A Web app project in real life

In real-life web development, a project is not just code or a pretty website. It’s a collaborative, iterative, often chaotic process, and it relies heavily on clear goals, communication, and methodological discipline.

Why Do We Need to Constantly Remind the Team of the Project Goals ?

• Team members change.

• Business priorities evolve.

• Deadlines get tighter.

• People forget.

• Design may override logic.

• Or developers start “hacking things together” without thinking about the user experience.

A good project manager (or senior developer) is someone who repeats the business objectives at every stage.

Why Do We Need to Create Diagrams and Algorithms Before Coding ?

Because code is just the translation of logic. If the logic is unclear, the code will be:

• Confusing

• Poorly structured

• Hard to maintain

• Hard to test

• Difficult to upgrade without bugs

Essential diagrams before coding:

• Use Case Diagram – to clarify who does what

• Wireframes or Mockups – to visualize the interface

• User Flows – to test user journeys

• Database Diagrams – to model the data

• Algorithms or Pseudocode – to outline business logic

Why Do We Need to Validate the Design Before Starting to Code ?

Because:

• Coding a poorly designed interface = wasted time

• Rebuilding a React component or a page is more expensive than editing a Figma file

• If you skip validation, the client or marketing team will change their mind later → the dev team will have to do it all again

Checklist before writing any code:

• ✅ Is the design aligned with the brand identity?

• ✅ Have the mockups been approved by stakeholders?

• ✅ Is the design responsive and mobile-ready?

• ✅ Are the UI interactions clearly described (hover, focus, errors, etc.)?

• ✅ Does the dev team have access to design tokens and components (colors, typography, spacing)?

In a real project, coding too early is risky and expensive

Building a web application means translating a complex business need into an efficient technical solution

You must communicate, document, sketch, validate then code and test cleanly

What are some common constraints or challenges that developers face in real-world web projects?

• Changing client requirements mid-project

• Tight deadlines and limited budgets

• Lack of clear documentation

• Cross-team communication issues

• Browser/device compatibility problems

• Security concerns and data privacy laws

• Technical debt and maintaining legacy code

• Integration with third-party services or APIs

How do client requirements influence design and technology choices?

• If a client needs a fast MVP, teams may choose lightweight tools or frameworks.

• If scalability is important, they might opt for microservices or cloud-native architectures.

• Security-sensitive projects (e.g., e-commerce, banking) will require robust frameworks and strict testing.

• Design choices (UI/UX) are influenced by the target audience, branding, and user expectations.

• Sometimes clients insist on specific technologies they already use internally.

What roles exist in a professional web dev team, and how do they collaborate?

Typical roles include:

• Product Owner – defines the vision and priorities

• Project Manager / Scrum Master – facilitates planning and tracks progress

• UX/UI Designer – creates interfaces and user flows

• Front-end Developer – builds the interface

• Back-end Developer – handles business logic and data

• QA Tester – tests for bugs and usability issues

• DevOps / SysAdmin – manages deployment and infrastructure

They collaborate using tools like Jira, Trello, Figma, Git, and often have daily stand-up meetings and shared repositories.

Case Study

Have you ever participated in a real-life web or mobile app project? What methodology was used?

Answer:
I worked on a university project with a startup that needed a web app. We used a hybrid Agile approach, with weekly meetings, GitHub for version control, and Google Docs for documentation. We didn’t use a formal Scrum framework, but we tried to work in iterations and deliver usable features each week.

How things are done in real companies compared to academic projects?

• Real-life projects have less clearly defined requirements, and things change all the time.

• Testing and deployment are important and complex.

• Time constraints and external pressure are very real.

• Documentation is often missing or outdated, and sometimes developers have to figure things out by reading the code itself.

Client-server

The web is sometimes referred to as a client-server model of communications. In the client-server model, there are two types of actors: clients and servers. The server is a computer agent that is normally active 24/7, listening for requests from clients. A client is a computer agent that makes requests and receives responses from the server, in the form of response codes

Client

Client machines are the desktops, laptops, smart phones, and tablets you see everywhere in daily life.

Server

The server in this model is the central repository, the command center, and the central hub of the client-server model. It hosts web applications, stores user and program data, and performs security authorization tasks. Since one server may serve many thousands, or millions of client requests, the demands on servers can be high. A site that stores image or video data, for example, will require many terabytes of storage to accommodate the demands of users. A site with many scripts calculating values on the fly, for instance, will require more CPU and RAM to process those requests in a reasonable amount of time.

The essential characteristic of a server is that it is listening for requests, and upon getting one, responds with a message. The exchange of information between the client and server is summarized by the request-response loop.

Frontend / Backend / Database

Web languages Front-End

• HTML

• CSS

• JS

Web languages Back-End

• php

• python

• java

• js avec Node

• C++

• Swift

• Kotlin

• SQL

HTTP

It is the communication protocol used to transfer data on the Web. It defines how a client (such as a web browser) and a web server exchange information.

• HTTP allows you to request and receive web pages, images, videos, etc.

• It follows a client-server model: the client sends an HTTP request, and the server responds with an HTTP response.

Web servers. A web server is a computer servicing HTTP requests. This typically refers to a computer running web server software, such as Apache or Microsoft IIS (Internet Information Services).

Common HTTP request methods:

• GET → retrieve a resource (e.g., display a page)

• POST → send data (e.g., submit a form)

• PUT → update a resource

• DELETE → remove a resource

HTTPS

• HTTPS = HTTP + SSL/TLS (security)

• It encrypts the communication to ensure confidentiality and security (very important for logins, payments, etc.)

Communication Protocols

• HTTP. The HyperText Transfer Protocol is used for web communication.

• SSH. The Secure Shell Protocol allows remote command-line connections to servers.

• FTP. The File Transfer Protocol is used for transferring files between computers.

• POP/IMAP/SMTP. Email-related protocols for transferring and storing email.

• DNS. The Domain Name System protocol used for resolving domain names to IP address

API

An API, or Application Programming Interface, is a set of rules and functions that allows different software systems to communicate with each other.

• An API acts as a bridge between two programs.

• It allows one application to use the features of another without needing to know all its internal details.

Examples :

Imagine a weather app:

• Your app (the client) wants to know the weather in Paris.

• It sends a request to a weather API (for example: GET /weather?city=Paris)

• The API responds with weather data in JSON or XML format.

• Your app then displays the information on the screen.

Common uses of APIs:

• Retrieve data (e.g., Twitter API, Weather API, YouTube API…)

• Perform remote actions (e.g., payments via Stripe, publishing a blog post, etc.)

Types of APIs:

• Web APIs: accessible via the internet, usually through HTTP/HTTPS
  • REST APIs: very common, based on HTTP requests (REpresentational State Transfer), each type of information has his endpoint
  • GraphQL (Created by Facebook) : A unique endpoint and a unique request to get exactly the information you need