Architecture du Projet

Le projet 2Krika est organisé en monorepo utilisant Turborepo pour gérer plusieurs applications et packages partagés.

Structure du Monorepo

krika-ui/
├── apps/
│   ├── customers/          # Application client (Next.js 15)
│   ├── staffs/            # Application staff (Next.js)
│   └── docs/              # Documentation (Fumadocs)
├── packages/
│   └── utilities/         # Modèles et utilitaires partagés
├── turbo.json            # Configuration Turborepo
├── pnpm-workspace.yaml   # Configuration pnpm workspaces
└── package.json          # Scripts et dépendances racine

Applications

App Customers (apps/customers)

Application principale pour les clients et vendeurs de la plateforme.

Technologies:

• Next.js 15 avec App Router
• Tailwind CSS 4.1.4
• Mantine UI 7.x/8.x
• Zustand (state management)
• React Query (data fetching)
• Socket.io (real-time)
• next-intl (i18n)

Fonctionnalités principales:

• Marketplace de services
• Profils utilisateurs (client/vendeur)
• Processus KYC pour devenir vendeur
• Gestion des commandes et achats
• Chat en temps réel
• Wallet et facturation
• Multi-langues (FR/EN)

Structure:

apps/customers/src/
├── app/[lang]/             # Routes internationalisées
│   ├── (auth)/             # Pages d'authentification
│   ├── (client)/           # Pages client
│   ├── (seller)/           # Dashboard vendeur
│   └── (checkout)/         # Processus d'achat
├── components/             # Composants réutilisables
├── services/               # Services API
├── hooks/                  # Hooks personnalisés
├── models/                 # Interfaces TypeScript
├── locales/                # Traductions
└── utils/                  # Fonctions utilitaires

App Staffs (apps/staffs)

Application de gestion pour l'équipe administrative.

Technologies:

• Next.js avec App Router
• Tailwind CSS
• Mantine UI
• React Query

Fonctionnalités:

• Gestion des utilisateurs
• Modération des services
• Analytics et statistiques
• Configuration de la plateforme
• Gestion des commissions

App Docs (apps/docs)

Documentation technique du projet (ce site).

Technologies:

• Next.js 16
• Fumadocs
• MDX

Packages Partagés

utilities

Package contenant les modèles et types TypeScript partagés entre les applications.

Contenu:

• Interfaces de données (User, Service, Order, etc.)
• Types communs
• Utilitaires partagés

Architecture Technique

Routing Strategy

Les applications utilisent Next.js App Router avec:

• Route Groups pour organiser les fonctionnalités
• Layouts partagés pour réduire la duplication
• Internationalization routing (app customers)

State Management

Zustand pour l'état client:

• État de l'authentification
• Préférences utilisateur
• État UI temporaire

React Query pour l'état serveur:

• Cache des données API
• Mutations
• Optimistic updates

API Integration

Communication avec le backend via:

• Axios pour les requêtes HTTP
• Socket.io pour le real-time
• Endpoints: https://api.2krikaservices.cloud

Real-time Communication

Socket.io pour:

• Chat en direct client-vendeur
• Notifications en temps réel
• Mises à jour des commandes

Internationalization

next-intl dans l'app customers:

• Routing basé sur la langue (/fr, /en)
• Traductions centralisées dans src/locales/
• Support dynamique du changement de langue

Patterns et Conventions

Code Organization

feature/
├── components/          # Composants UI du feature
├── hooks/              # Hooks spécifiques
├── services/           # Appels API
├── utils/              # Utilitaires
└── types.ts            # Types TypeScript

Naming Conventions

• Composants: PascalCase (UserProfile.tsx)
• Hooks: camelCase avec préfixe use (useAuth.ts)
• Services: camelCase (authService.ts)
• Utilitaires: camelCase (formatDate.ts)
• Types: PascalCase (UserProfile)

Component Patterns

Utilisation de:

• Server Components par défaut (Next.js 15)
• Client Components quand nécessaire ('use client')
• Composition over inheritance
• Props drilling minimal (Context/Zustand)

Build et Déploiement

Build System

Turborepo gère:

• Parallel builds
• Caching intelligent
• Task dependencies

Build Production

# Build toutes les apps
pnpm build

# Build une app spécifique
cd apps/customers && pnpm build

Déploiement

Les applications peuvent être déployées sur:

• Vercel (recommandé pour Next.js)
• Docker (avec Dockerfile fourni)
• Tout hébergeur supportant Node.js

Sécurité

• Authentification JWT
• Validation des entrées utilisateur
• Protection CSRF
• Rate limiting côté API
• Sanitization des données
• HTTPS en production

Performance

• Code splitting automatique (Next.js)
• Image optimization (next/image)
• Static generation où possible
• ISR (Incremental Static Regeneration)
• React Query caching
• CDN pour les assets statiques

Prochaines Étapes