Payment by bank transfer · Moroccoتعلَّم · مارِس · أتقِن

Catalogue / Development

Fullstack Project: Souk Atlas, a Marketplace from A to Z

The project that brings it all together: design, code, test and ship Souk Atlas, a marketplace for Moroccan artisans — React, a Node.js/Express API, PostgreSQL, Docker, GitHub Actions and a VPS.

  • Intermediate to advanced
  • 12 lessons
  • 16 h 30 min

A MasterLinux course · Original text

What you will learn

  • Turn a client’s needs into user stories, mockups, an architecture and a clean Git repository
  • Model a complete PostgreSQL database (relations, constraints, amounts in cents, indexes) and evolve it with migrations
  • Design and implement a consistent REST API with Node.js and Express (JSON contracts, error codes, validation, pagination)
  • Secure buyer and seller accounts (hashed passwords, database-backed sessions, HttpOnly cookies, roles and ownership)
  • Calculate a cart in dirhams with VAT and shipping, and create orders in transactions that protect stock
  • Build the React front end (routes, catalogue, cart with reducer and context, seller area) connected to the API
  • Test the application end to end and maintain quality with GitHub Actions continuous integration
  • Ship to production on a VPS with Docker Compose, nginx, HTTPS, tested backups, monitoring and a launch checklist

Course content

12 lessons · 16 h 30 min
Section 1 — Design3 lessons · 3 h 25 min
  1. The Souk Atlas project: requirements, wireframes, architecture and Git repository Preview1 h
  2. Modéliser les données : schéma SQL, relations et migrations 1 h 15 min
  3. Concevoir l'API : routes REST, contrats JSON et codes d'erreur 1 h 10 min
Section 2 — Back-end4 lessons · 5 h 45 min
  1. Squelette de l'API : structure, configuration et serveur 1 h 20 min
  2. Produits et catalogue : CRUD, pagination et recherche 1 h 20 min
  3. Comptes et authentification : inscription, connexion, sessions et rôles 1 h 30 min
  4. Panier et commandes : transactions, statuts et référence de virement 1 h 35 min
Section 3 — Front-end2 lessons · 2 h 55 min
  1. Front React : routes, mise en page et catalogue 1 h 25 min
  2. Front React : panier, commande et espace vendeur 1 h 30 min
Section 4 — Going to production3 lessons · 4 h 25 min
  1. Tests de bout en bout et qualité 1 h 20 min
  2. Conteneuriser (Dockerfile, Compose avec PostgreSQL) et CI GitHub Actions 1 h 25 min
  3. Déployer en production : VPS, nginx, HTTPS, sauvegardes, supervision et checklist de lancement 1 h 40 min

Requirements

  • The “Web Development: HTML, CSS and JavaScript” course or an equivalent level
  • The “Node.js” course (HTTP server, Express, modules) or equivalent experience
  • The “React” course (components, state, effects) or equivalent experience
  • The “SQL” course (SELECT, joins, creating tables) or equivalent experience
  • Useful for level 4: the “Docker” and “CI/CD” courses

Who is this course for?

  • Developers who know each building block separately and finally want to ship a complete application
  • Students (BTS, DUT, bachelor’s degree, engineering schools) preparing a final-year project or a strong portfolio
  • Freelancers who want to offer custom online stores and marketplaces to Moroccan merchants
  • Career changers preparing for a fullstack developer interview