sepehr/chartbastan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
chartbastan/_bmad-output/implementation-artifacts/1-1-initialiser-le-projet-nextjs-avec-starter-template.md
sepehr e02db93960 Initial commit
2026-02-01 09:31:38 +01:00

7.9 KiB
Raw Permalink Blame History

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

  • Vérifier les prérequis d'environnement (AC: #1, #2)

    • Vérifier Node.js version (20.9+ requis)
    • Vérifier npm/npx est installé et fonctionnel
    • Créer le répertoire de travail si nécessaire

  • Initialiser le projet Next.js 16 avec create-next-app (AC: #1)

    • Exécuter la commande create-next-app avec tous les flags requis
    • Vérifier que la structure du projet est créée correctement
    • Confirmer la structure src/ directory est présente
    • Vérifier que TypeScript, ESLint, Tailwind sont configurés
    • Tester que le projet compile sans erreurs
    • Vérifier que npm run dev fonctionne

  • Configurer shadcn/ui avec Tailwind v4 (AC: #2)

    • Exécuter npx shadcn@canary init dans le répertoire du projet
    • Sélectionner le style "new-york"
    • Vérifier que components.json est créé
    • Confirmer que les CSS variables pour theming sont configurées
    • Vérifier la configuration Tailwind v4

  • Valider l'installation complète

    • Vérifier tous les fichiers de configuration sont présents
    • Tester le build avec npm run build
    • 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)