Skip to main content

​
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
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)
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
Logique métier réutilisable :
  • useAppData : charge toutes les données
  • useToolFilters : search + filtres + catégories
  • useFavorites : gestion localStorage
  • useSmoothScroll : navigation single-page
Configuration des services tiers :
  • Auth context (Nhost Auth)
  • Storage helpers (Nhost Storage)
  • Error tracking (Sentry)
1

Comprendre l'approche feature-based

Architecture feature-based
2

Explorer le backend Nhost

Nhost & GraphQL
3

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.