Préparez vos outils de développement

Avant de créer votre application web, préparez les outils suivants :

• Antigravity : votre environnement de développement assisté par IA (il s'exécute dans le navigateur)
• Un compte GitHub : créé au Jour 1

Étape 1 : ouvrez Antigravity

Ouvrez votre navigateur (Chrome recommandé) et rendez-vous à l'adresse d'Antigravity fournie par votre enseignant. Connectez-vous à votre compte.

Étape 2 : ouvrez le terminal

Dans Antigravity, ouvrez le terminal intégré. Vous vous en servirez à l'exercice suivant pour créer le projet study-planner.

Étape 3 : vérifiez votre environnement

Vous devez voir l'éditeur à gauche, l'aperçu en direct à droite, le chat IA, et le terminal prêt à recevoir des commandes.

Créez le projet Next.js

Next.js est un framework fondé sur React qui facilite la création d'applications web. Vous l'utiliserez pour créer l'application StudyPlanner.

Étape 1 : créez le projet

Dans le terminal d'Antigravity, lancez la commande suivante pour générer le squelette d'un nouveau projet Next.js avec toutes les options recommandées :

npx create-next-app@latest study-planner \
  --typescript --tailwind --app --src-dir \
  --import-alias "@/*"

Cette commande crée un dossier study-planner entièrement configuré : TypeScript pour la sûreté du typage, Tailwind CSS pour le style, et l'App Router pour un routage moderne.

Étape 2 : démarrez le serveur de développement

Entrez dans le dossier du projet et démarrez le serveur :

cd study-planner
npm run dev

Ouvrez votre navigateur à l'adresse http://localhost:3000 pour voir la page d'accueil par défaut de Next.js.

Poussez votre code sur GitHub

Faites un push de votre projet sur GitHub : votre code sera sauvegardé et prêt pour le déploiement.

Étape 1 : initialisez et poussez

Si vous avez déjà créé un dépôt study-planner au Jour 1, utilisez-le. Sinon, créez-en un nouveau sur github.com/new.

Lancez ensuite les commandes suivantes dans le dossier de votre projet :

git init
git remote add origin https://github.com/YOUR-USERNAME/study-planner.git
git add .
git commit -m "Initial Next.js setup"
git branch -M main
git push -u origin main

Étape 2 : vérifiez sur GitHub

Ouvrez la page de votre dépôt sur GitHub. Le fichier package.json et le dossier src/ doivent apparaître dans l'arborescence.

Créez les pages avec Antigravity

Utilisez Antigravity pour générer deux pages de votre application StudyPlanner : une page d'accueil et une page de liste des tâches.

Étape 4a : créez la page d'accueil

Dans la barre de chat IA d'Antigravity, saisissez le prompt suivant :

Il s'agit d'une application de planification de tâches
pour étudiants. Crée une page d'accueil dans
src/app/page.tsx avec un message de bienvenue, une
courte description et un lien de navigation vers /tasks.
Utilise Tailwind CSS pour un style moderne.

Relisez le code généré, puis regardez votre navigateur. La page se met à jour automatiquement !

Étape 4b : créez la page de liste des tâches

Toujours dans Antigravity, utilisez le prompt suivant :

Crée une page de liste des tâches dans src/app/tasks/page.tsx
qui affiche des tâches d'exemple avec leur titre, leur
échéance et leur statut d'achèvement. Utilise une mise en
page à base de cartes avec Tailwind CSS.

Ce qu'il faut vérifier

• Les deux pages se chargent dans votre navigateur (/ et /tasks)
• Le lien de navigation de la page d'accueil mène à la liste des tâches
• Les cartes des tâches s'affichent correctement, avec titre, échéance et statut

Créez une base de données JSON

Au lieu d'écrire les tâches en dur dans la page, vous allez les stocker dans un fichier JSON et créer des routes d'API pour lire et écrire les données. Vos données sont ainsi séparées de votre interface.

Étape 1 : créez le fichier de données

Créez un dossier data à la racine de votre projet, puis un fichier data/tasks.json contenant des tâches d'exemple :

{
  "tasks": [
    {
      "id": 1,
      "title": "Study for math exam",
      "dueDate": "2026-03-20",
      "subject": "Mathematics",
      "priority": "high",
      "completed": false
    },
    {
      "id": 2,
      "title": "Read chapter 5",
      "dueDate": "2026-03-18",
      "subject": "Literature",
      "priority": "medium",
      "completed": true
    },
    {
      "id": 3,
      "title": "Prepare presentation slides",
      "dueDate": "2026-03-22",
      "subject": "History",
      "priority": "low",
      "completed": false
    }
  ]
}

Étape 2 : créez la route d'API

Utilisez Antigravity pour générer la route d'API qui lit et écrit dans ce fichier JSON :

Crée une route d'API dans src/app/api/tasks/route.ts qui :
- GET : lit data/tasks.json et renvoie toutes les tâches
- POST : ajoute une nouvelle tâche au fichier JSON
Utilise le module fs pour lire et écrire le fichier.

Le code généré devrait ressembler à ceci :

import { readFileSync, writeFileSync } from 'fs';
import { NextResponse } from 'next/server';
import path from 'path';

const filePath = path.join(process.cwd(), 'data', 'tasks.json');

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

export async function POST(request: Request) {
  const data = JSON.parse(readFileSync(filePath, 'utf-8'));
  const newTask = await request.json();
  newTask.id = data.tasks.length + 1;
  data.tasks.push(newTask);
  writeFileSync(filePath, JSON.stringify(data, null, 2));
  return NextResponse.json(newTask, { status: 201 });
}

Étape 3 : connectez le front-end

Demandez à Antigravity de modifier la page de liste des tâches pour qu'elle récupère les données depuis l'API au lieu d'utiliser des valeurs en dur :

Modifie src/app/tasks/page.tsx pour récupérer les tâches
depuis /api/tasks au lieu d'utiliser des données en dur.
Affiche un état de chargement pendant la récupération.

Testez votre API

Vérifiez que la connexion fonctionne :

1. Ouvrez http://localhost:3000/tasks : vous devez voir les tâches de votre fichier JSON
2. Modifiez data/tasks.json à la main (changez le titre d'une tâche)
3. Rechargez la page : le titre modifié doit apparaître

Formulaire de création de tâche

Créez un formulaire qui permet aux utilisateurs d'ajouter des tâches depuis le navigateur. Le formulaire enverra ses données à la route d'API créée à l'exercice 5.

Étape 1 : créez la page du formulaire

Utilisez Antigravity pour générer le formulaire :

Crée un formulaire dans src/app/tasks/new/page.tsx avec :
- Titre (champ texte obligatoire)
- Échéance (sélecteur de date)
- Matière (champ texte)
- Priorité (liste : low/medium/high)
À l'envoi : POST vers /api/tasks, puis redirection vers /tasks.
Utilise Tailwind CSS pour le style.

Étape 2 : ajoutez la navigation

Demandez à Antigravity d'ajouter des liens de navigation pour passer facilement d'une page à l'autre :

Ajoute une barre de navigation commune dans src/app/layout.tsx
avec des liens vers Accueil (/), Tâches (/tasks) et Nouvelle
tâche (/tasks/new). Ajoute aussi un bouton « Nouvelle tâche »
sur la page de liste des tâches, qui mène au formulaire.

Testez le parcours complet

Votre application doit maintenant avoir cette structure :

• / : page d'accueil avec message de bienvenue
• /tasks : liste des tâches chargée depuis le JSON
• /tasks/new : formulaire de création de tâche
• Une barre de navigation sur chaque page

Testez le parcours complet :

1. Allez sur /tasks/new
2. Remplissez le formulaire et envoyez-le
3. Vous devez être redirigé vers /tasks
4. Votre nouvelle tâche doit apparaître dans la liste

Déployez sur Vercel

Vercel est l'entreprise qui développe Next.js, et sa plateforme est le moyen le plus simple de déployer une application Next.js. Votre application sera en ligne en quelques minutes.

Étape 1 : inscrivez-vous et importez

1. Rendez-vous sur vercel.com et inscrivez-vous avec votre compte GitHub
2. Cliquez sur « Import Project » (importer un projet)
3. Sélectionnez votre dépôt study-planner
4. Cliquez sur « Deploy » (déployer) : les réglages par défaut conviennent parfaitement à Next.js
5. Attendez la fin du build (1 à 2 minutes environ)

Étape 2 : vérifiez le déploiement

Une fois le build terminé, Vercel vous fournit une URL publique de ce type :

https://study-planner-abc123.vercel.app

Ouvrez cette URL dans votre navigateur et vérifiez que votre application fonctionne.

Étape 3 : déploiement automatique

Désormais, chaque git push déclenche automatiquement un nouveau déploiement. Essayez :

git add .
git commit -m "Update homepage styling"
git push

Regardez le tableau de bord de Vercel : un nouveau déploiement démarre en quelques secondes !

Finitions et fonctionnalités supplémentaires

Choisissez une fonctionnalité supplémentaire dans la liste ci-dessous et implémentez-la avec Antigravity. Fermez ensuite les issues GitHub correspondantes.

Choisissez une fonctionnalité

Choisissez l'une des fonctionnalités suivantes à implémenter :

• Marquer comme terminée : cliquer sur une case pour basculer le statut d'achèvement d'une tâche (nécessite une route d'API PATCH ou PUT)
• Supprimer une tâche : ajouter un bouton de suppression sur chaque carte, avec une fenêtre de confirmation (nécessite une route d'API DELETE)
• Filtrer par matière : ajouter une liste déroulante au-dessus de la liste pour n'afficher que les tâches de la matière choisie
• Trier par date : ajouter un bouton pour trier les tâches par échéance, la plus proche en premier

Décrivez clairement à Antigravity la fonctionnalité choisie. Par exemple :

Ajoute une case « Terminée » sur chaque carte de la page
de liste des tâches. Au clic, elle doit envoyer une requête
PATCH pour mettre à jour le statut completed de la tâche
dans le fichier JSON. Affiche les tâches terminées en
texte barré.

Fermez les issues GitHub

Pour chaque fonctionnalité terminée :

1. Allez sur votre dépôt GitHub
2. Ouvrez l'issue correspondante, créée au Jour 1
3. Ajoutez un commentaire qui explique ce qui a été implémenté
4. Cliquez sur « Close issue » (fermer l'issue)

Push final

Faites un commit et un push de toutes vos modifications :

git add .
git commit -m "Add task completion toggle and polish UI"
git push

Vercel déploiera automatiquement votre dernière version.

Synthèse et livrables

Livrables

Remettez les éléments suivants à votre enseignant :

Critères d'évaluation

Critère	Pondération	Description
Environnement de développement	10 %	Antigravity prêt, projet qui tourne
Pages de l'application	25 %	Au moins 3 pages fonctionnelles, avec navigation
Gestion des données	25 %	Base de données JSON avec routes d'API, lecture et écriture fonctionnelles
Déploiement	20 %	Déployée avec succès sur Vercel, URL en ligne
Workflow GitHub	10 %	Code poussé, issues fermées avec commentaires
Qualité du code	10 %	Code propre, bonne structure, aucune erreur dans la console

Défis bonus

Ressources

• Documentation de Next.js
• Documentation de Tailwind CSS
• Documentation de déploiement Vercel
• Guide des issues GitHub