Building a Full Stack Web Application

Lab objective: build a complete web application step by step, from the user interface to the database and deployment.

Prerequisites: basics of HTML, CSS and JavaScript; Node.js and Git installed.

TP1: Getting Started, Environment and Front-End

Material: TP-Part1-Angular-NextJs

Estimated duration: 2 h

Objectives

  • Set up the development environment
  • Build the application’s user interface

Steps

  1. Install and configure the tools (Node.js, Git, code editor)
  2. Initialize the project and the folder structure
  3. Create the main pages in HTML/CSS
  4. Add interactivity with JavaScript (or a front-end framework)
  5. Version the code with Git

Deliverable: a working interface with static data.

TP2: Building the REST API (Back-End)

Material: TP-Part2-Express-PostgreSQL

Estimated duration: 2 h

Objectives

  • Develop a server and expose an API
  • Connect the front-end to the back-end

Steps

  1. Create a server (Node.js/Express)
  2. Define the REST routes (GET, POST, PUT, DELETE)
  3. Handle errors and validate data
  4. Test the API (Postman or Thunder Client)
  5. Connect the front-end to the API with fetch

Deliverable: an application whose front-end consumes a working API.

TP3: Database, Security and Deployment

Material: TP-Part3-Angular-Express-MongoDB

Estimated duration: 2 h

Objectives

  • Make the data persistent
  • Secure the application and put it online

Steps

  1. Choose and connect a database (MongoDB or SQL)
  2. Create the models and replace the static data
  3. Implement authentication (JWT)
  4. Protect sensitive routes
  5. Deploy the application online

Deliverable: a complete, secure and deployed application.

Overall Progression

TP1 Interface → TP2 API → TP3 Data and deployment