Récap : ce que nous avons fait hier

Comment fonctionne le Web

Chaque fois que vous ouvrez un site web, voici ce qui se passe en coulisses

HTTP en 60 secondes

HTTP = la langue que parlent navigateurs et serveurs

Qu'est-ce que HTML ?

<h1>Welcome to my site</h1>
<p>This is a paragraph of text.</p>
<img src="photo.jpg" alt="A nice photo">
<a href="https://example.com">Click here</a>

Une page HTML complète

C'est une vraie page web qui fonctionne : essayez vous-même !

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is my first webpage.</p>
  <a href="/about">Learn more</a>
</body>
</html>

Qu'est-ce que CSS ?

Exemple CSS

CSS utilise des sélecteurs pour cibler des éléments HTML et leur appliquer des styles

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

h1 {
  color: #333;
  text-align: center;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Qu'est-ce que JavaScript ?

// When the button is clicked, show a message
document.querySelector('button')
  .addEventListener('click', () => {
    alert('You clicked the button!');
  });

La pile web moderne

Des bases aux frameworks puissants

Qu'est-ce que Next.js ?

Le framework que nous allons utiliser pour construire notre application

Qu'est-ce que Node.js ?

JavaScript en dehors du navigateur

# Check if Node.js is installed
node --version    # Should show v20.x or higher

# Check npm (comes with Node.js)
npm --version     # Should show 10.x or higher

Qu'est-ce qu'un agent de code ?

Une IA qui écrit du code à partir de vos instructions en langage naturel

Découvrir Antigravity

Votre environnement de développement assisté par IA, dans le navigateur

Configurer Antigravity

Vous l'avez découvert hier : aujourd'hui, on exploite toute sa puissance

Démo : créer le squelette du projet avec Antigravity

« Crée un projet Next.js nommé study-planner
avec une page d'accueil qui affiche un message de bienvenue
et une barre de navigation avec des liens vers Accueil et Tâches. »

Comprendre la structure du projet

Un projet Next.js a une organisation claire et prévisible

study-planner/
├── src/app/
│   ├── layout.tsx       # Shared layout (nav, footer)
│   ├── page.tsx         # Homepage (/)
│   └── globals.css      # Global styles
├── public/              # Static files (images, icons)
├── package.json         # Dependencies & scripts
└── next.config.js       # Configuration

Lancer votre application

Du code au navigateur en deux commandes

Localhost ou cloud ?

Pourquoi il faut déployer votre application

Qu'est-ce que Vercel ?

Le moyen le plus simple de déployer votre application dans le cloud

Déployer sur Vercel

Du code sur votre ordinateur à un site en ligne en 4 étapes

Qu'est-ce qu'une base de données ?

Là où votre application conserve ses données de façon permanente

JSON comme base de données simple

JSON = JavaScript Object Notation : un fichier texte qui stocke des données structurées

{
  "tasks": [
    {
      "id": 1,
      "title": "Study for exam",
      "dueDate": "2026-03-20",
      "completed": false
    },
    {
      "id": 2,
      "title": "Submit project",
      "dueDate": "2026-03-22",
      "completed": true
    }
  ]
}

Lire du JSON dans Next.js

Routes d'API = code côté serveur dans Next.js

// src/app/api/tasks/route.ts
import { readFileSync } from 'fs';

export async function GET() {
  const data = readFileSync('data/tasks.json', 'utf-8');
  return Response.json(JSON.parse(data));
}

Construire des fonctionnalités avec Antigravity

Une méthode simple en 4 étapes pour chaque fonctionnalité

« Je travaille sur l'issue GitHub #3 : page de liste des tâches.
D'après ma maquette Figma, construis une page /tasks qui affiche
toutes les tâches de data/tasks.json sous forme de cartes avec titre,
échéance, badge de priorité et case à cocher de réalisation. »

Démo : ajouter la création de tâches

DÉMO EN DIRECT : l'enseignant montre

Crée un formulaire dans src/app/tasks/new/page.tsx avec les champs
titre, échéance et priorité (low/medium/high).
À la validation, fais un POST vers /api/tasks, qui ajoute la tâche à tasks.json.
Redirige vers /tasks une fois la création réussie.

Démo : ajouter la liste des tâches

Fermer les issues GitHub

Suivez votre avancement en fermant le travail terminé

Complément : qu'est-ce que l'authentification ?

Savoir qui utilise votre application

Firebase : votre back-end en quelques minutes

La plateforme de Google pour créer des applications sans gérer de serveurs

Comment fonctionne Firebase Auth

Le parcours de connexion en 4 étapes

Firestore : des données en temps réel

Une base de données qui se synchronise instantanément entre tous les utilisateurs

Multi-utilisateur : comment tout s'assemble

Auth + Firestore = partagé mais personnel

Les livrables du jour

À la fin de la journée, vous devez avoir terminé les 6

À vous de pratiquer !

Construisez votre première application web

Bonus : planning multi-utilisateur

Pour ceux qui ont fini en avance ou qui veulent un défi supplémentaire