chartbastan/_bmad-output/implementation-artifacts/1-1-initialiser-le-projet-nextjs-avec-starter-template.md

# Story 1.1: Initialiser le projet Next.js avec starter template

Status: review

<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->

## 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)