C3 · Composants Frontend¶

Le diagramme de composants frontend (niveau 3 C4) détaille l'organisation interne de la SPA React.

Diagramme¶

C4Component
    title Composants — SPA React

    Container_Boundary(frontend, "SPA React") {
        Component(pages, "Pages", "React Components", "Composants de haut niveau\nun par route")

        Component_Boundary(components, "Components") {
            Component(ui, "UI Primitives", "React + Tailwind", "Button, Input, Modal...\nComposants réutilisables génériques")
            Component(features, "Feature Components", "React", "Composants fonctionnels\nspécifiques à un domaine")
            Component(layout, "Layout", "React", "Header, Sidebar, Footer")
        }

        Component(hooks, "Custom Hooks", "React Query Hooks", "useGames, useAuth\nEncapsulent le fetching et mutations")
        Component(services, "API Services", "Axios", "apiClient.ts\nIntercepteurs JWT + refresh")
        Component(store, "State local", "React useState/Context", "State UI uniquement\n(modales, thème, formulaires)")

        Component(i18n, "i18n", "i18next", "Traductions FR / EN")
        Component(router, "Router", "React Router", "Routing SPA\nprotected routes")
    }

    Rel(pages, features, "Compose")
    Rel(pages, layout, "Utilise")
    Rel(features, ui, "Utilise")
    Rel(features, hooks, "Appelle")
    Rel(hooks, services, "HTTP via")
    Rel(pages, store, "Lit/écrit")
    Rel(pages, i18n, "Traduit avec")
    Rel(router, pages, "Rend")

Structure de dossiers¶

frontend/src/
├── pages/                  # Une page par route
│   ├── auth/               # Login, Register, ForgotPassword
│   ├── dashboard/          # Dashboard utilisateur
│   └── games/              # Liste, Détail, Création
├── components/
│   ├── ui/                 # Button, Input, Card, Modal, Badge...
│   ├── features/           # GameCard, ScoreForm...
│   └── layout/             # Header, Sidebar, Footer, PageWrapper
├── hooks/                  # useGames, useCreateGame, useAuth...
├── services/               # apiClient.ts, authService.ts
├── types/                  # TypeScript interfaces partagées
├── utils/                  # Fonctions utilitaires pures
└── i18n/locales/           # fr/, en/

Règles de conventions¶