Choisir votre projet

Votre mission

Relisez les idées de projet présentées en cours. Choisissez-en une qui résout un vrai problème qui vous tient à cœur, ou proposez votre propre idée. L'essentiel est de choisir un projet que vous avez réellement envie de construire.

Étape 1 : rédigez votre pitch

Rédigez un pitch d'une phrase qui explique clairement ce que vous construisez :

« Je construis [nom], une application [type] qui aide [qui] à [quoi]. »

Exemples :

• « Je construis MealPlanner, une application web qui aide les étudiants débordés à planifier leurs repas de la semaine et à générer leurs listes de courses. »
• « Je construis PetSitter, une place de marché qui aide les propriétaires d'animaux à trouver des gardiens de confiance près de chez eux. »

Étape 2 : retour d'un camarade

Présentez votre pitch à votre voisin. Le comprend-il en 30 secondes ? Sinon, simplifiez. Demandez-lui :

• « Est-ce que tu l'utiliserais ? »
• « Est-ce qu'on comprend ce que fait l'application ? »
• « Le périmètre te semble-t-il raisonnable ? »

Rédiger les spécifications

Votre mission

1. Créez un nouveau dépôt GitHub avec un nom explicite
2. Rédigez un README complet à partir du modèle ci-dessous
3. Faites un commit du README dans votre dépôt

Modèle de README

Suivez cette structure pour le README de votre projet. Remplacez les textes entre crochets par votre propre contenu :

# [Nom du projet]
[Description en une phrase, reprise de votre pitch]

## Utilisateur cible
[Qui utilisera cette application ? Précisez ses besoins et ses difficultés.]

## Fonctionnalités

### Indispensable (Must Have)
- Fonctionnalité 1 : [description]
- Fonctionnalité 2 : [description]
- Fonctionnalité 3 : [description]

### Souhaitable (Should Have)
- Fonctionnalité 4 : [description]
- Fonctionnalité 5 : [description]

### Possible (Could Have)
- Fonctionnalité 6 : [description]

## Modèle de données
[Quelles données l'application enregistre-t-elle ? Listez les entités principales et leurs champs clés.]

Exemple :
- **Recette** : titre, ingrédients (liste), étapes (liste), temps de préparation, catégorie
- **Utilisateur** : nom, e-mail, recettes enregistrées (liste)

## Stack technique
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Déployé sur Vercel

## Design
[Le lien Figma viendra ici]

## Démo en ligne
[L'URL Vercel viendra ici]

Créer les issues GitHub

Votre mission

1. Créez une issue (fiche de tâche GitHub) par fonctionnalité de votre README
2. Chaque issue comporte : un titre, une description et des critères d'acceptation
3. Ajoutez les labels « must-have » (indispensable) et « nice-to-have » (bonus)
4. Classez les issues par priorité (la plus importante en premier)

Exemple d'issue

Voici à quoi ressemble une issue GitHub bien rédigée :

Titre : Ajouter le formulaire de création de recette

**Description :**
En tant qu'utilisateur, je veux ajouter une nouvelle recette pour enregistrer mes plats préférés.

**Critères d'acceptation :**
- [ ] Le formulaire comporte les champs : titre, ingrédients, étapes, temps de préparation
- [ ] Un clic sur « Enregistrer » sauvegarde la recette et redirige vers la liste des recettes
- [ ] Le formulaire vérifie que le titre n'est pas vide
- [ ] On peut ajouter et retirer des ingrédients à la volée
- [ ] Un message de confirmation s'affiche après l'enregistrement

**Labels :** must-have

Conseils pour de bonnes issues

• Écrivez du point de vue de l'utilisateur : « En tant qu'utilisateur, je veux... »
• Gardez des critères d'acceptation précis et vérifiables
• Chaque issue doit correspondre à une seule fonctionnalité ou tâche
• Mentionnez les issues liées si des fonctionnalités dépendent les unes des autres

Concevoir dans Figma

Votre mission

1. Créez un nouveau fichier Figma nommé « [Votre application] - Design »
2. Utilisez le plugin Stitch AI pour générer une première mise en page
3. Concevez au moins 3 écrans clés
4. Commencez par les fonctionnalités indispensables

Écrans obligatoires

Votre maquette doit comporter au moins ces trois vues :

• Écran 1 : accueil / liste : affiche tous les éléments de votre application (par exemple une liste de recettes, de tâches ou d'annonces)
• Écran 2 : création / modification : formulaire pour ajouter ou modifier un élément (par exemple le formulaire d'une nouvelle recette ou d'une nouvelle tâche)
• Écran 3 : détail : affiche un élément en entier (par exemple une recette avec tous ses ingrédients et ses étapes)

Utiliser Stitch AI

1. Ouvrez Figma et créez un nouveau fichier de design
2. Allez dans Plugins > Stitch AI
3. Décrivez l'écran souhaité : « Une page de liste de recettes avec des cartes affichant le nom de la recette, une image et le temps de préparation »
4. Adaptez la mise en page générée à ce que vous imaginez
5. Recommencez pour chaque écran

Partager votre maquette

1. Cliquez sur le bouton « Share » (partager) de Figma, en haut à droite
2. Réglez le partage sur « Anyone with the link can view » (toute personne disposant du lien peut consulter)
3. Copiez le lien
4. Collez-le dans votre README GitHub, sous la section Design

Faire valider par l'enseignant

Présentez votre travail

Avant de passer au développement, présentez à votre enseignant les éléments suivants pour validation :

• Le README avec les spécifications complètes (fonctionnalités Indispensable / Souhaitable / Possible)
• Les issues GitHub avec description, critères d'acceptation et labels
• Les maquettes Figma couvrant le parcours utilisateur principal (3 écrans ou plus)

Ce que vérifie l'enseignant

L'enseignant valide le périmètre de votre projet, pour s'assurer qu'il n'est ni trop ambitieux ni trop simple :

• Le projet est-il réaliste pour environ 2 jours de développement ?
• Les fonctionnalités indispensables sont-elles clairement définies et vérifiables ?
• La maquette couvre-t-elle le parcours utilisateur principal ?
• Les issues sont-elles assez précises pour guider un développement assisté par l'IA ?

Créer le projet et le déployer

Votre mission

1. Créez un projet Next.js avec TypeScript et Tailwind CSS
2. Faites un push du code initial vers votre dépôt GitHub
3. Connectez le dépôt à Vercel et déployez
4. Ajoutez l'URL Vercel à votre README

Étape 1 : créez le projet

Lancez la commande suivante dans votre terminal :

npx create-next-app@latest my-project --typescript --tailwind --app --src-dir
cd my-project
npm run dev

Remplacez my-project par le vrai nom de votre projet (en minuscules, avec des traits d'union, par exemple meal-planner).

Étape 2 : poussez sur GitHub

git init
git add .
git commit -m "Initial project setup with Next.js, TypeScript, and Tailwind"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

Étape 3 : déployez sur Vercel

1. Rendez-vous sur vercel.com et connectez-vous avec GitHub
2. Cliquez sur « Add New Project » (ajouter un projet)
3. Importez votre dépôt
4. Cliquez sur « Deploy » (déployer) : Vercel détecte automatiquement les réglages Next.js
5. Copiez l'URL de déploiement et ajoutez-la à votre README

Commencer à construire

Votre mission

1. Choisissez votre première fonctionnalité indispensable et ouvrez l'issue GitHub correspondante
2. Guidez Antigravity avec des prompts appuyés sur vos spécifications
3. Testez dans le navigateur après chaque modification
4. Faites un commit après chaque fonctionnalité qui marche et fermez les issues GitHub terminées

Modèle de prompt

Utilisez ce modèle pour demander à Antigravity d'implémenter une fonctionnalité :

Je construis [nom du projet] avec Next.js, TypeScript et Tailwind CSS.

Fonctionnalité : [collez la description de l'issue GitHub]

Crée la page src/app/[path]/page.tsx qui [description].

Utilise Tailwind CSS pour le style.

Voici ma maquette Figma pour référence : [décrivez l'apparence de l'écran]

Critères d'acceptation :
- [collez-les depuis l'issue GitHub]

Conseils pour vos prompts

• Mentionnez toujours la stack technique : Next.js, TypeScript, Tailwind
• Indiquez précisément les chemins de fichiers : src/app/recipes/page.tsx
• Décrivez le rendu attendu d'après votre maquette Figma
• Fournissez des données d'exemple pour qu'Antigravity crée des exemples réalistes
• Reprenez directement la description de votre issue GitHub dans le prompt

En cas de difficulté

Situation	Que faire
Bloqué sur une erreur	Copiez le message d'erreur complet depuis le terminal ou le navigateur. Collez-le dans Antigravity et demandez : « Corrige cette erreur. »
Bloqué sur le design	Ouvrez la maquette Figma de l'écran. Décrivez exactement ce que vous voyez (mise en page, couleurs, éléments) et demandez à Antigravity de l'implémenter.
Bloqué depuis plus de 15 minutes	Demandez de l'aide à un voisin ou à votre enseignant. Un regard neuf résout souvent le problème immédiatement.
Fonctionnalité trop complexe	Découpez-la en étapes plus petites. Implémentez d'abord la version la plus simple, puis améliorez-la.

Récapitulatif

Livrables

À la fin de cette séance, vous devez avoir terminé les points suivants :

Critères d'évaluation

Critère	Poids	Description
Choix du projet	10 %	Pitch clair, périmètre réaliste, résout un vrai problème
Spécifications	25 %	README complet avec fonctionnalités Indispensable / Souhaitable / Possible
Issues GitHub	15 %	Issues bien structurées, avec critères d'acceptation et labels
Maquette Figma	25 %	Au moins 3 écrans, parcours utilisateur principal couvert, design cohérent
Développement	15 %	Projet créé, déployé, première fonctionnalité commencée
Organisation	10 %	Structure claire, issues étiquetées, présentation professionnelle

Défis bonus