Architecture globale

Principes de conception

Kit’Asso repose sur 3 piliers architecturaux :

1. Feature-Based Structure

Organisation par domaine métier plutôt que par type technique.

src/features/
├── tools/
│   └── modals/ToolModal/
│       ├── index.tsx        # Container
│       ├── ToolForm.tsx     # Formulaire
│       ├── ToolPreview.tsx  # Preview
│       ├── types.ts         # Types
│       └── useToolModal.ts  # Hook métier
├── workflows/
├── tool-packs/
└── quiz/

Avantages :

Isolation des fonctionnalités
Facilite le travail en équipe
Suppression/ajout de features sans impact

En savoir plus

Guide détaillé de l’approche feature-based

2. API Layer découplée via GraphQL

Séparation stricte entre les composants UI et l’accès aux données :

Composants → utilisent des Custom Hooks (useAppData, useToolFilters…)
Hooks → appellent l’API Layer (src/api/)
API Layer → communique avec Nhost/Hasura via GraphQL
Hasura → traduit en SQL vers PostgreSQL

// ✅ Pattern correct
import { useAppData } from '@/hooks/useAppData';

function HomePage() {
  const { tools, isLoading, error } = useAppData();
  // ...
}

La logique métier est dans les hooks, pas dans les composants ni dans l’API layer.

3. Patterns standardisés

Modals

Container / Form / Preview / Hook

Forms

React Hook Form + Zod

Icons

getIcon() via src/utils/icons.ts

Voir tous les patterns

Documentation complète des patterns

Schéma visuel

Structure de dossiers

assopedia-v2/
├── src/
│   ├── api/              # API Layer (GraphQL via Nhost)
│   │   ├── client.ts     # Client Nhost singleton
│   │   ├── base.ts       # apiCall / apiCallVoid wrappers
│   │   ├── tools.ts      # Tools CRUD
│   │   ├── workflows.ts  # Workflows CRUD
│   │   ├── packs.ts      # Packs CRUD
│   │   ├── quiz/         # Quiz operations
│   │   └── index.ts      # Barrel exports
│   │
│   ├── components/       # Composants partagés
│   │   ├── Home/         # HomeHeader, Benefits, HowItWorks
│   │   ├── sections/     # ToolPacks, Workflows, Tools, Hero
│   │   ├── App/          # AppModals, AppFooter
│   │   └── ui/           # Composants UI génériques
│   │
│   ├── features/         # Features métier
│   │   ├── tools/        # modals/ToolModal (Container/Form/Preview)
│   │   ├── workflows/
│   │   ├── tool-packs/
│   │   └── quiz/
│   │
│   ├── hooks/            # Custom hooks
│   │   ├── useAppData.ts
│   │   ├── useToolFilters.ts
│   │   ├── useFavorites.ts
│   │   ├── useToolComparison.ts
│   │   ├── useAppModals.ts
│   │   └── useSmoothScroll.ts
│   │
│   ├── lib/              # Services
│   │   ├── auth.tsx      # Auth context (Nhost)
│   │   ├── storage.ts    # Nhost Storage helpers
│   │   └── sentry.ts     # Error tracking
│   │
│   ├── pages/            # Routes
│   │   ├── Home.tsx      # Page unique (quiz + catalogue)
│   │   ├── Admin.tsx
│   │   ├── Compare.tsx
│   │   └── Login.tsx
│   │
│   ├── types/            # Définitions TypeScript
│   └── utils/            # Helpers (icons, logger, sanitization)
│
├── public/               # Assets statiques
├── .env                  # Variables Nhost
├── vite.config.ts
└── tailwind.config.js

src/api/ - API Layer GraphQL

Centralise toutes les interactions avec Nhost/Hasura :

client.ts : singleton Nhost
base.ts : wrappers apiCall/apiCallVoid + ApiError
Un fichier par domaine (tools, workflows, packs, quiz)

src/features/ - Domaines métier

Chaque feature contient ses modals avec le pattern Container/Form/Preview/Hook :

index.tsx : orchestration
FeatureForm.tsx : formulaire d’édition
FeaturePreview.tsx : aperçu détaillé
useFeatureModal.ts : logique métier

src/hooks/ - Custom Hooks

Logique métier réutilisable :

useAppData : charge toutes les données
useToolFilters : search + filtres + catégories
useFavorites : gestion localStorage
useSmoothScroll : navigation single-page

src/lib/ - Services

Configuration des services tiers :

Auth context (Nhost Auth)
Storage helpers (Nhost Storage)
Error tracking (Sentry)

Comprendre l'approche feature-based

Architecture feature-based

Explorer le backend Nhost

Nhost & GraphQL

Découvrir l'API Layer

API Layer

Principes directeurs

Modularité

Chaque feature peut être activée/désactivée indépendamment

Testabilité

La logique métier est découplée du framework

Type Safety

TypeScript strict + validation Zod partout

Performance

Code splitting, lazy loading, virtualisation

Ne contournez pas l’architecture feature-based en créant des dossiers par type technique à la racine. Passez toujours par l’API layer — jamais de nhost.graphql.request() directement dans les composants.

Introduction

Architecture

Déploiement

Principes de conception

1. Feature-Based Structure

En savoir plus

2. API Layer découplée via GraphQL

3. Patterns standardisés

Modals

Forms

Icons

Voir tous les patterns

Schéma visuel

Structure de dossiers

Navigation recommandée

Principes directeurs

Modularité

Testabilité

Type Safety

Performance

​Principes de conception

​1. Feature-Based Structure

En savoir plus

​2. API Layer découplée via GraphQL

​3. Patterns standardisés

Modals

Forms

Icons

Voir tous les patterns

​Schéma visuel

​Structure de dossiers

​Navigation recommandée

​Principes directeurs

Modularité

Testabilité

Type Safety

Performance

Principes de conception

1. Feature-Based Structure

2. API Layer découplée via GraphQL

3. Patterns standardisés

Schéma visuel

Structure de dossiers

Navigation recommandée

Principes directeurs