🚀 FocusFlow - De la maquette Figma à l'application full-stack

Tutoriel complet : Cursor AI

FocusFlow est une application de gestion de tâches inspirée de la méthode GTD (Getting Things Done), développée avec une stack moderne et l'assistance de l'IA. Ce codelab vous guide dans la création d'une application complète, de la maquette Figma au déploiement.

🎯 Qu'allez-vous apprendre ?

• ✅ Configuration avancée de Cursor AI avec les outils MCP
• ✅ Import automatique de designs Figma vers du code React
• ✅ Développement assisté par IA avec TypeScript et Tailwind CSS
• ✅ Tests E2E automatisés avec Playwright via langage naturel
• ✅ Architecture full-stack avec Express.js et persistance serveur

🛠️ Stack technique

Technologie	Usage	Version
React	Framework frontend	18+
TypeScript	Typage statique	5+
Tailwind CSS	Styling	3+
Zustand	État global	4+
Vite	Build tool	4+
Express.js	Backend API	4+
Playwright	Tests E2E	1+
Cursor AI	Assistant IA	Latest

📚 Guides du tutoriel

🔗 Navigation modulaire : Suivez les guides dans l'ordre ou consultez une section spécifique

🚀 Guide 1 : Setup et Configuration

Durée estimée : 30 minutes

• Installation et configuration de l'environnement
• Setup de Cursor AI avec les outils MCP (Figma, Context7, Playwright)
• Initialisation du projet React + TypeScript + Tailwind
• Création des règles de projet pour l'IA

📱 Guide 2 : Développement Frontend

Durée estimée : 45 minutes

• Import automatique de maquettes Figma
• Génération de composants React avec l'IA
• Implémentation de la logique métier avec Zustand
• Tests E2E automatisés avec Playwright

🔧 Guide 3 : Backend Express (Optionnel)

Durée estimée : 60 minutes

• Création d'une API REST avec Express et TypeScript
• Persistance serveur et gestion d'erreurs
• Intégration frontend-backend
• Tests d'intégration complets

🚀 Démarrage rapide

# 1. Cloner le boilerplate
git clone https://github.com/joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate focusflow
cd focusflow

# 2. Installer les dépendances
npm install
npm install zustand react-router-dom

# 3. Lancer le serveur de développement
npm run dev

📖 Suite : Consultez le Guide 1 - Setup pour la configuration complète.

🎨 Aperçu de l'application

Maquette Figma de référence

Interface utilisateur

• Design minimaliste inspiré de la méthode GTD
• Responsive : adapté mobile et desktop
• Thème moderne avec Tailwind CSS
• Interactions fluides avec animations

Fonctionnalités

• ➕ Ajout de tâches rapide avec validation
• ✅ Marquage terminé avec case à cocher
• 🗑️ Suppression de tâches
• 💾 Persistance locale (localStorage) ou serveur
• 🔄 Synchronisation temps réel (version backend)

🤖 Assistance IA intégrée

Outils MCP utilisés

• 🎨 Figma MCP : Import de designs → code React automatique
• 📚 Context7 MCP : Documentation instantanée des dépendances
• 🧪 Playwright MCP : Tests E2E en langage naturel

Workflow assisté par IA

Maquette Figma → Cursor AI → Composants React → Tests automatiques

📋 Prérequis

• Node.js 16+ et npm
• Cursor AI (télécharger)
• Compte Figma (pour l'import de designs)
• Connaissances de base : React, TypeScript

🎯 Résultat final

À la fin de ce codelab, vous aurez :

• ✅ Une application de gestion de tâches complète et fonctionnelle
• ✅ Maîtrise des outils d'IA pour le développement (Cursor + MCP)
• ✅ Architecture moderne et scalable (React + TypeScript + Express)
• ✅ Pipeline de tests automatisés avec Playwright
• ✅ Compétences en développement assisté par IA

🔗 Liens utiles

• 📖 Documentation Cursor AI
• 🎨 Maquette Figma de référence
• 🧪 Documentation Playwright
• ⚡ Documentation Vite

🤝 Contribution

Ce codelab est open source ! N'hésitez pas à :

• 🐛 Signaler des bugs
• 💡 Proposer des améliorations
• 📝 Améliorer la documentation
• ⭐ Partager le projet

---

💡 Prêt à commencer ? Rendez-vous sur le Guide 1 - Setup et Configuration !

---

Bon code, et bon focus ! 🚀