Votre propre projet
App Programming - Jour 3
Le défi commence
Du projet guidé à votre propre création
2026 Way-Up
Récapitulatif : ce que nous avons construit ensemble
Jour 1 : planification
- Rédaction des spécifications de notre application
- Conception de l’interface dans Figma avec Stitch AI
- Création d’un dépôt GitHub avec des issues
Jour 2 : construction
- Découverte des bases du Web (HTML, CSS, JavaScript)
- Construction d’une application Next.js
- Utilisation d’Antigravity pour écrire les fonctionnalités
- Déploiement sur Vercel
Le défi
Construisez votre propre application web en 2 jours
Résoudre un vrai problème
Votre application doit répondre à un besoin réel ou à une difficulté concrète
Au moins 3 fonctionnalités
Réalisez au minimum trois fonctionnalités distinctes et opérationnelles
Déployée sur Vercel
Votre application doit être en ligne et accessible par une URL publique
Démo le jour 5
Préparez une démonstration de 5 minutes pour la classe
2 JOURS
pour construire votre propre application
Bien choisir son projet
Pensez à VOTRE quotidien
Résoudre un problème que vous comprenez
Partez de votre propre expérience. Si vous comprenez le problème en profondeur, vous construirez une meilleure solution.
Un périmètre réaliste pour 2 jours
Vous disposez d’environ 12 heures de développement. Restez ciblé et réaliste.
Démontrable en 5 minutes
Pouvez-vous montrer ce qu’elle fait en une courte démo ? Si oui, le périmètre est le bon.
Des idées de projets pour vous inspirer
Suivi de budget
Suivez vos revenus et vos dépenses, voyez où part votre argent
Carnet de recettes
Enregistrez, classez et recherchez vos recettes préférées
Fiches de révision
Créez et révisez des fiches pour n’importe quelle matière
Organisateur d’événements
Organisez des événements avec dates, lieux et listes d’invités
Suivi d’habitudes
Suivez vos habitudes quotidiennes et visualisez vos séries
Journal de lecture
Consignez les livres que vous avez lus, avec commentaires et notes
Carnet d’entraînement
Enregistrez exercices, séries et répétitions, et suivez vos progrès
Organiseur d’emploi du temps
Gérez votre emploi du temps de la semaine et vos devoirs
Qu’est-ce qui est trop gros ?
Trop ambitieux
- « Je veux construire quelque chose comme Instagram »
- « Il faut un chat en temps réel »
- « Je veux ajouter le paiement en ligne »
- « Les utilisateurs doivent créer un compte et se connecter »
- « Elle doit fonctionner différemment sur mobile et sur ordinateur »
Juste ce qu’il faut
- Des opérations CRUD simples (Create, Read, Update, Delete : créer, lire, modifier, supprimer)
- Un objectif clair
- 3 à 5 écrans au maximum
- Un seul type de données à gérer
- Fonctionne bien sur une seule plateforme
Analyse des besoins
Répondez à ces quatre questions avant de commencer à construire
Qui utilise cette application ?
Définissez votre utilisateur cible. Vous-même ? Des étudiants ? Un groupe précis ? Plus c’est clair, mieux c’est.
Quel problème résout-elle ?
En une phrase : « Cette application aide [qui] à [faire quoi] parce que [pourquoi c’est important]. »
Quelles sont les 3 fonctionnalités les plus importantes ?
Listez exactement trois fonctionnalités. Si vous n’arrivez pas à en choisir trois, votre idée est peut-être trop vague ou trop large.
Quelles données faut-il stocker ?
Quelles informations l’application doit-elle retenir ? Titres, dates, nombres, textes, images ?
Rédiger vos spécifications
Votre README.md est le plan de votre projet
Modèle de spécification
- Titre du projet - Un nom clair et explicite pour votre application
- Description en une phrase - Ce qu’elle fait et à qui elle s’adresse
- Utilisateur cible - Qui l’utilisera et pourquoi il en a besoin
- Fonctionnalités avec priorité MoSCoW :
- Indispensable (Must have) - Les fonctionnalités essentielles (votre MVP, produit minimum viable : 3 au minimum)
- Souhaitable (Should have) - Important mais pas critique
- Possible (Could have) - Des bonus appréciables
- Modèle de données - Quelles informations l’application stocke-t-elle ? (par exemple nom, date, catégorie, montant)
Planifier avec GitHub
Le centre de pilotage de votre projet
Liste de contrôle GitHub
- Créez un nouveau dépôt avec un nom explicite
- Rédigez votre README.md avec les spécifications complètes
- Créez une issue par fonctionnalité (titre + description + critères d’acceptation)
- Ajoutez les labels : must-have, nice-to-have, bug
Exemple de bonne issue
Titre : Ajouter le formulaire de dépense
Description : l’utilisateur peut saisir un montant, une catégorie et une date
Terminé quand : le formulaire enregistre les données et affiche une confirmation
Pourquoi les issues comptent
Les issues vous donnent une liste de tâches claire à traiter. Fermez-les au fur et à mesure : c’est gratifiant et cela vous garde organisé.
Concevez votre interface
Ouvrez Figma et utilisez Stitch AI pour accélérer la conception
Ouvrez Figma
Créez un nouveau fichier au nom de votre projet. Prévoyez un cadre (« frame ») par écran.
Utilisez Stitch AI
Décrivez vos écrans à Stitch AI et laissez-le générer les mises en page. Personnalisez ensuite.
Concevez au moins 3 écrans
Page d’accueil, écran de la fonctionnalité principale et un écran de détail ou de modification. Couvrez le parcours utilisateur principal.
Concentrez-vous sur l’indispensable
Ne concevez pas d’écrans pour des fonctionnalités que vous ne construirez peut-être pas. Concevez d’abord ce qui compte.
Mettez en place votre projet
Lancez votre projet Next.js
# Create your Next.js project
npx create-next-app@latest my-project \
--typescript --tailwind --app --src-dir
# Your project structure
my-project/
src/
app/
page.tsx # Home page
layout.tsx # Shared layout
globals.css # Global styles
public/ # Images, icons
package.json # DependenciesTravailler avec Antigravity
Les bonnes pratiques du développement piloté par l’IA
1 Commencez par la fonctionnalité la plus importante
Construisez d’abord votre fonctionnalité indispensable n° 1. Si vous manquez de temps, vous aurez au moins l’essentiel.
2 Une fonctionnalité à la fois
Ne demandez pas à l’IA de tout construire d’un coup. Concentrez-vous sur une fonctionnalité, faites-la fonctionner, puis passez à la suivante.
3 Testez avant de continuer
Ouvrez votre navigateur et vérifiez que chaque fonctionnalité marche avant d’attaquer la suivante.
4 Un commit après chaque fonctionnalité
Enregistrez votre progression par un commit git. Si quelque chose casse plus tard, vous pourrez toujours revenir en arrière.
Obtenir la validation de l’enseignant
Avant de coder, montrez à votre enseignant :
Liste de validation
- Un dépôt GitHub dont le README contient vos spécifications
- Une issue par fonctionnalité, avec ses labels
- Une maquette Figma d’au moins 3 écrans couvrant le parcours utilisateur principal
- Une liste de priorités claire (Indispensable / Souhaitable / Possible)
Point d’étape de fin de journée
D’ici la fin de la journée, vous devez avoir :
1
Choisi votre projet et obtenu la validation de l’enseignant
2
Préparé votre dépôt GitHub, avec les specs dans le README et les issues créées
3
Terminé votre maquette Figma, avec au moins 3 écrans
4
Déployé sur Vercel votre projet Next.js, en ligne
5
Commencé au moins 1 fonctionnalité avec Antigravity
Conseils pour réussir
Commencez simple
Faites d’abord fonctionner la version de base. Vous pourrez toujours ajouter de la complexité ensuite. Une application simple qui marche vaut mieux qu’une application sophistiquée qui ne marche pas.
Déployez tôt, déployez souvent
Poussez régulièrement sur GitHub. Vercel déploie automatiquement. Ayez toujours en ligne une version qui fonctionne.
Demandez de l’aide
Si vous êtes bloqué plus de 15 minutes, demandez à l’enseignant ou à un camarade. Ne perdez pas de temps à vous énerver.
Tenez vos issues à jour
Fermez les issues GitHub à mesure que vous terminez les fonctionnalités. Cela vous garde organisé et montre votre progression.
Pièges courants
La dérive du périmètre
Piège : « Juste une fonctionnalité de plus... »
Solution : tenez-vous-en à votre liste d’indispensables. Terminez-les d’abord. Alors seulement, pensez aux bonus.
Le perfectionnisme
Piège : passer des heures sur un design au pixel près
Solution : « terminé » vaut mieux que « parfait ». Livrez, puis peaufinez s’il reste du temps.
Ne pas tester
Piège : écrire du code sans regarder le navigateur
Solution : vérifiez votre application après chaque modification. Repérez les bugs tôt, pas la veille de la journée de démo.
Ne pas faire de commit
Piège : perdre du travail faute de l’avoir enregistré dans Git
Solution : faites des commits tôt et souvent. Chaque fonctionnalité qui marche = un commit.
Demain : journée de développement piloté par l’IA
Une journée entière à construire avec l’aide de l’IA
Votre rôle : le bâtisseur
- Vous décidez quoi construire et quand
- Vous relisez et testez tout
- Vous gérez votre temps et vos priorités
- Vous êtes le responsable du projet
Le rôle de l’enseignant : le coach
- Disponible pour vos questions et pour vous orienter
- Vous aide à vous débloquer
- Fait le point sur votre avancement et vous fait des retours
- Veille à ce que vous gardiez le cap
À vous de jouer !
Construisez votre propre projet de A à Z
7 exercices
Choisir, spécifier, concevoir, construire
5 à 6 heures
Travail de projet en autonomie
Intermédiaire
Mettez en pratique les jours 1 et 2
À vous de construire !
La meilleure façon d’apprendre, c’est de faire. Votre projet commence MAINTENANT.
Bonne chance, nous avons hâte de voir ce que vous allez créer !
2026 Way-Up