Tout ce qu'il faut pour demarrer avec le design system Speedcube Master : stack technique, structure du projet, installation et conventions.
Next.js 16
App Router + Turbopack
React 19
Server & Client Components
Tailwind CSS 4
Utility-first CSS framework
shadcn/ui
Composants Radix UI pre-styles
Framer Motion
Animations declaratives
Lucide React
Icones SVG coherentes
Arborescence simplifiee du dossier src/ de l'application principale.
src/
├── components/
│ └── ui/ # Composants shadcn/ui (Button, Card, Dialog...)
├── lib/ # Logique metier, services, utilitaires
├── hooks/ # Custom React hooks (60+)
├── styles/ # Fichiers CSS globaux et tokens
├── types/ # Definitions TypeScript
└── app/
├── (pages)/ # Route groups (timer, algos, learning...)
└── api/ # Routes API RESTClonez le depot et installez les dependances avec pnpm.
# Installer les dependances
pnpm install
# Lancer le serveur de developpement
pnpm devLe serveur de developpement demarre sur http://localhost:3000 avec Turbopack pour un rechargement ultra-rapide.
Utilisez la CLI shadcn/ui pour ajouter un nouveau composant. Il sera automatiquement place dans src/components/ui/.
# Ajouter un composant shadcn/ui
npx shadcn@latest add [nom]
# Exemples
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menuLe composant est copie dans votre projet et peut etre entierement personnalise. Aucune dependance externe au runtime.
Tous les imports depuis src/ utilisent l'alias @/ configure dans tsconfig.json.
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useTimer } from "@/hooks/use-timer";Le theme sombre est la reference. Les couleurs, contrastes et ombres sont d'abord definis pour le mode sombre, puis adaptes pour le mode clair.
{/* Le fond par defaut est #0B0F1A, les cartes #0F1524 */}
<div className="bg-background">
<div className="bg-card border border-border rounded-xl p-6">
Contenu
</div>
</div>Les styles de base ciblent le mobile. Les breakpoints Tailwind (sm, md, lg) ajoutent progressivement les styles desktop.
{/* 1 colonne mobile, 2 tablette, 3 desktop */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
...
</div>Composant, types et tests vivent dans le meme dossier pour faciliter la navigation et la maintenance.
components/timer/
├── timer.tsx # Composant principal
├── timer.types.ts # Types TypeScript
├── timer.test.ts # Tests Vitest
└── use-timer.ts # Hook associeLe design system repose sur des tokens CSS (variables CSS) pour garantir la coherence des couleurs, espacements, ombres et typographies a travers toute l'application.
/* Exemples de tokens */
--background: #0B0F1A;
--card: #0F1524;
--border: #1F2937;
--primary: #2563EB;
--accent: #22C55E;Consultez la page dediee pour la liste complete des tokens disponibles.
Voir tous les tokens