# Story 1.1: Initialiser le projet Next.js avec starter template Status: review ## Story As a développeur, I want initialiser le projet Next.js 16 avec create-next-app et shadcn/ui, So that j'ai une base solide et moderne pour développer l'application. ## Acceptance Criteria **Given** un environnement de développement avec Node.js 20.9+ installé **When** j'exécute `npx create-next-app@latest chartbastan --typescript --eslint --tailwind --app --src-dir --turbopack` **Then** le projet Next.js 16 est créé avec TypeScript, ESLint, Tailwind CSS, App Router, structure `src/` et Turbopack activé **And** le projet compile sans erreurs **And** la commande `npm run dev` démarre le serveur de développement **Given** le projet Next.js est initialisé **When** j'exécute `npx shadcn@canary init` dans le répertoire du projet **Then** shadcn/ui est configuré avec Tailwind v4 **And** le fichier `components.json` est créé avec la configuration **And** le style "new-york" est configuré par défaut **And** les CSS variables pour theming sont configurées ## Tasks / Subtasks - [x] Vérifier les prérequis d'environnement (AC: #1, #2) - [x] Vérifier Node.js version (20.9+ requis) - [x] Vérifier npm/npx est installé et fonctionnel - [x] Créer le répertoire de travail si nécessaire - [x] Initialiser le projet Next.js 16 avec create-next-app (AC: #1) - [x] Exécuter la commande create-next-app avec tous les flags requis - [x] Vérifier que la structure du projet est créée correctement - [x] Confirmer la structure `src/` directory est présente - [x] Vérifier que TypeScript, ESLint, Tailwind sont configurés - [x] Tester que le projet compile sans erreurs - [x] Vérifier que `npm run dev` fonctionne - [x] Configurer shadcn/ui avec Tailwind v4 (AC: #2) - [x] Exécuter `npx shadcn@canary init` dans le répertoire du projet - [x] Sélectionner le style "new-york" - [x] Vérifier que `components.json` est créé - [x] Confirmer que les CSS variables pour theming sont configurées - [x] Vérifier la configuration Tailwind v4 - [x] Valider l'installation complète - [x] Vérifier tous les fichiers de configuration sont présents - [x] Tester le build avec `npm run build` - [x] Confirmer que le serveur de développement démarre sans erreurs ## Dev Notes ### Architecture Patterns et Contraintes **Stack Technique Imposé:** - Next.js 16 avec App Router (déjà décidé par starter) - TypeScript avec strict mode activé - Tailwind CSS v4.0.0 + shadcn/ui (style "new-york") - Turbopack activé pour bundling rapide - Node.js 20.9+ requis (minimum pour Next.js 16) **Design System:** - Palette de couleurs: Cool Slate (primary #0A84FF, background #FFFFFF) - Typography: Inter (principal) + JetBrains Mono (secondaire) - Mobile-first avec breakpoints: 320px-768px (mobile), 768px-1023px (tablet), 1024px+ (desktop) - Accessibility: WCAG 2.1 AA compliance (contraste minimum 4.5:1) **Structure du Projet Attendue:** ``` chartbastan/ ├── src/ │ ├── app/ # App Router avec routes │ ├── components/ │ │ └── ui/ # shadcn/ui components (copiés localement) │ ├── lib/ # Utilities, hooks │ └── ... ├── public/ # Static assets ├── components.json # shadcn/ui configuration ├── tailwind.config.ts # Tailwind v4 configuration ├── tsconfig.json # TypeScript configuration ├── next.config.mjs # Next.js configuration ├── package.json # Dependencies └── ... ``` **Conventions de Nommage (TypeScript/JavaScript):** - Fichiers composants: `PascalCase.tsx` ou `kebab-case.tsx` (ex: `UserCard.tsx`, `user-card.tsx`) - Composants UI: `PascalCase` (ex: `Button`, `Card`) - Fonctions: `camelCase` (ex: `getUserById()`, `calculateEnergyScore()`) - Variables: `camelCase` (ex: `userId`, `energyScore`, `isPremium`) - Hooks: `camelCase` avec préfixe `use` (ex: `useUser()`, `usePredictions()`) - Constants: `UPPER_SNAKE_CASE` (ex: `MAX_PREDICTIONS_FREE`, `API_RATE_LIMIT`) ### Source Tree Components à Toucher **Fichiers à créer/modifier:** 1. `chartbastan/` - Répertoire racine du projet (créé par create-next-app) 2. `chartbastan/src/` - Structure App Router (créé par create-next-app) 3. `chartbastan/components.json` - Configuration shadcn/ui (créé par shadcn init) 4. `chartbastan/tailwind.config.ts` - Configuration Tailwind v4 (créé par create-next-app + shadcn) 5. `chartbastan/tsconfig.json` - Configuration TypeScript strict (créé par create-next-app) 6. `chartbastan/next.config.mjs` - Configuration Next.js avec Turbopack (créé par create-next-app) **Fichiers générés automatiquement:** - `package.json` avec les dépendances Next.js 16 - `.eslintrc.json` avec règles ESLint Next.js - `.gitignore` avec patterns standards Next.js - `README.md` avec instructions de base ### Project Structure Notes **Alignment with unified project structure:** - ✅ Structure `src/` directory comme spécifié dans architecture - ✅ App Router avec `/app` directory - ✅ Server Components par défaut (Next.js 16 standard) - ✅ Turbopack activé pour bundling rapide - ✅ shadcn/ui avec composants copiés localement dans `components/ui/` - ✅ TypeScript strict mode activé **Conventions de code à respecter:** - TypeScript strict mode activé (déjà configuré par create-next-app) - ESlint avec règles Next.js (déjà configuré) - Pas de mutations directes d'état (utiliser setters immutables) - Utiliser Server Components par défaut, `use client` uniquement si nécessaire **Conflits ou variances détectés:** Aucun conflit. Cette story établit la fondation technique en suivant exactement les spécifications de l'architecture. ### Références **Sources des informations:** - [Source: _bmad-output/planning-artifacts/epics.md#Epic-1-Story-1.1] - Story originale et critères d'acceptation - [Source: _bmad-output/planning-artifacts/architecture.md#Starter-Template-Evaluation] - Décision du starter template - [Source: _bmad-output/planning-artifacts/architecture.md#Selected-Starter] - Commandes d'initialisation exactes - [Source: _bmad-output/planning-artifacts/architecture.md#Architectural-Decisions-Provided-by-Starter] - Décisions architecturales du starter - [Source: _bmad-output/planning-artifacts/ux-design-specification.md#Color-System] - Palette de couleurs Cool Slate - [Source: _bmad-output/planning-artifacts/ux-design-specification.md#Typography-System] - Typographie Inter + JetBrains Mono - [Source: _bmad-output/planning-artifacts/ux-design-specification.md#Design-System-Coverage-Analysis] - Design system shadcn/ui + Tailwind v4 - [Source: _bmad-output/project-context.md#Stack-Technologique] - Stack technique imposé - [Source: _bmad-output/project-context.md#Conventions-de-Code-Nommage] - Conventions de nommage TypeScript ## Dev Agent Record ### Agent Model Used GLM-4.7 ### Debug Log References Aucune référence de debug pour le moment. ### Completion Notes List - Prérequis validés : Node.js v22.20.0, npm v11.6.1 - Projet Next.js 16.1.3 initialisé avec TypeScript, ESLint, Tailwind CSS v4 - Structure src/ directory créée avec App Router - shadcn/ui initialisé avec style "new-york" et CSS variables configurées - components.json créé avec configuration Tailwind v4 - Build réussi sans erreurs (npm run build) - Tous les critères d'acceptation satisfaits ### File List Fichiers à créer/modifier lors de cette story: - `chartbastan/` (répertoire racine) - `chartbastan/src/app/` (structure App Router) - `chartbastan/components.json` (configuration shadcn/ui) - `chartbastan/tailwind.config.ts` (configuration Tailwind v4) - `chartbastan/tsconfig.json` (configuration TypeScript) - `chartbastan/next.config.mjs` (configuration Next.js) - `chartbastan/package.json` (dépendances) - `chartbastan/.eslintrc.json` (configuration ESLint)