Aperçu du projet

Dans cette première leçon, on va poser les bases : ce qu’on va construire, et comment les outils d’IA vont nous aider tout au long du parcours.

Ce qu’on va construire

Une application web de suivi d’habitudes. Un outil simple pour se fixer des objectifs dans lequel les utilisateurs peuvent :

créer un compte,
ajouter des habitudes quotidiennes,
suivre leur progression,
et (facultativement) passer à un plan premium pour débloquer des fonctionnalités supplémentaires.

Ce projet est parfait car il est simple et pertinent, inclut des fonctionnalités courantes telles que la création, la lecture, la mise à jour et la suppression (CRUD), l’authentification utilisateur, ainsi que l’intégration d’un système de paiement. Il est suffisamment complet pour apprendre le full-stack, tout en restant assez léger pour être réalisé en une semaine.

Stack technique utilisée

Voici la stack moderne (et gratuite) qu’on va utiliser :

Next.js : Framework React pour construire le frontend et les API backend dans le même projet. Supporte le rendu côté serveur et client. Très adapté aux projets structurés.
Supabase : Backend-as-a-Service basé sur PostgreSQL. Gère base de données, authentification, stockage, etc. Offre un excellent plan gratuit.
Stripe : Pour les paiements. On utilisera Stripe Checkout, une page de paiement hébergée prête à l’emploi et rapide à mettre en place.
Vercel : Plateforme de déploiement, idéale pour Next.js (c’est l’équipe derrière ce framework). Offre généreuse en plan gratuit.

Outils IA : copilotes de code

On va utiliser 2 assistants IA pour coder plus vite :

Cursor : Éditeur de code avec IA intégrée (construit sur VS Code mais avec des super-pouvoirs). Il complète du code, en génère à partir de prompts en langage naturel, et peut corriger/refactoriser automatiquement.
Claude Code : IA en ligne de commande, par Anthropic. Elle comprend tout le projet, peut modifier plusieurs fichiers à la fois, lancer des tests ou corriger du code en direct.

Comment l’IA va nous faire gagner du temps

Dans ce cours, on va apprendre à bien utiliser l’IA à chaque étape :

Planification : brainstorming de features, modèles de données.
Développement : génération de composants ou de code boilerplate.
Tests : écriture de tests, TDD avec IA.
Déploiement : résolution de bugs de config, optimisation.

Attention : l’IA ne pense pas à notre place. Elle nous assiste, mais on reste aux commandes. On va apprendre à écrire des prompts efficaces, et à identifier les limites (ne jamais faire confiance aveuglément à ce que l’IA génère).

Exemple concret – IA en action

Supposons qu’on doit coder un formulaire pour créer une habitude.

Avec Cursor, au lieu de l’écrire à la main, on pourrait simplement taper :

Crée un composant React Next.js pour ajouter une habitude, avec les champs nom et objectif, et un bouton de soumission qui appelle une API pour sauvegarder l’habitude dans Supabase depuis notre backend.

Cursor générera alors un composant fonctionnel, avec le formulaire HTML et la fonction de soumission. On n’aura plus qu’à ajuster. Résultat : on économise du temps et on part d’une base saine.

On verra de nombreux exemples de ce type dans la suite du parcours.

À la fin de ce module, on saura précisément ce qu’on va construire et on aura tous les outils installés et prêts à l’emploi. Dans la prochaine leçon, on configurera ensemble l'environnement de développement.