Application Customers

L'application Customers est la plateforme principale de 2Krika qui connecte les clients avec les freelancers. Elle offre une expérience complète de marketplace de services.

Vue d'Ensemble

L'application permet à deux types d'utilisateurs d'interagir:

Clients (Buyers)

Parcourir les services disponibles
Rechercher par catégories
Acheter des services
Communiquer avec les vendeurs
Suivre les commandes
Gérer leur profil

Vendeurs (Sellers)

Créer et gérer des services
Compléter le processus KYC
Gérer les commandes
Communiquer avec les clients
Suivre les ventes et revenus
Gérer le wallet et les retraits

Technologies

Framework: Next.js 15 avec App Router
Styling: Tailwind CSS 4.1.4
UI Components: Mantine UI 7.x/8.x
State Management: Zustand
Data Fetching: TanStack React Query (v5)
Internationalization: next-intl (FR/EN)
Real-time: Socket.io Client
Forms: Mantine Forms
Rich Text: Quill.js
HTTP Client: Axios
Date Handling: date-fns

Structure du Projet

apps/customers/
├── src/
│   ├── app/[lang]/                    # Routes internationalisées
│   │   ├── (auth)/                    # Authentification
│   │   │   ├── login/
│   │   │   ├── register/
│   │   │   └── forgot-password/
│   │   ├── (client)/                  # Routes client
│   │   │   ├── profile/               # Profil utilisateur
│   │   │   ├── services/              # Parcourir services
│   │   │   ├── category/[slug]/       # Services par catégorie
│   │   │   ├── purchases/             # Mes achats
│   │   │   └── settings/              # Paramètres
│   │   ├── (seller)/                  # Routes vendeur
│   │   │   ├── sales/                 # Dashboard vendeur
│   │   │   │   ├── services/          # Gestion services
│   │   │   │   ├── orders/            # Gestion commandes
│   │   │   │   ├── invoices/          # Factures
│   │   │   │   ├── wallet/            # Portefeuille
│   │   │   │   └── settings/          # Paramètres vendeur
│   │   │   └── become-seller/         # Onboarding vendeur
│   │   │       ├── step-1/            # KYC étape 1
│   │   │       └── step-2/            # KYC étape 2
│   │   ├── (checkout)/                # Processus d'achat
│   │   │   └── checkout/[serviceId]/
│   │   └── _components/               # Composants partagés
│   ├── components/                     # Composants réutilisables
│   │   ├── ui/                        # Composants UI de base
│   │   ├── layout/                    # Layout components
│   │   └── features/                  # Feature components
│   ├── services/                       # Services API
│   │   ├── authService.ts
│   │   ├── serviceService.ts
│   │   ├── orderService.ts
│   │   └── ...
│   ├── hooks/                          # Custom React hooks
│   │   ├── useAuth.ts
│   │   ├── useSocket.ts
│   │   └── ...
│   ├── stores/                         # Zustand stores
│   │   ├── authStore.ts
│   │   └── ...
│   ├── models/                         # TypeScript interfaces
│   │   ├── user.ts
│   │   ├── service.ts
│   │   └── ...
│   ├── locales/                        # Traductions
│   │   ├── fr.json
│   │   └── en.json
│   ├── config/                         # Configuration
│   │   ├── api.ts
│   │   └── constants.ts
│   └── utils/                          # Utilitaires
│       ├── formatters.ts
│       └── validators.ts
├── public/                             # Assets statiques
├── .env.example                        # Variables d'environnement
├── next.config.mjs                     # Config Next.js
├── tailwind.config.ts                  # Config Tailwind
└── package.json

Route Groups

L'application utilise les Route Groups de Next.js pour organiser les routes:

`(auth)` - Authentification

Routes publiques pour l'authentification des utilisateurs.

`(client)` - Espace Client

Routes pour les fonctionnalités côté acheteur:

Parcourir et rechercher des services
Voir les détails des services
Gérer les achats
Profil et paramètres

`(seller)` - Espace Vendeur

Dashboard complet pour les vendeurs:

Créer et gérer les services
Gérer les commandes
Facturation et wallet
Statistiques de vente

`(checkout)` - Processus d'Achat

Flow d'achat isolé pour une meilleure expérience utilisateur.

Fonctionnalités Principales

1. Marketplace de Services

Listing de services avec pagination
Recherche et filtres
Navigation par catégories
Pages de détails enrichies

2. Authentification

Login/Register
Récupération de mot de passe
JWT avec refresh tokens
Persistance de session

3. Profils Utilisateurs

Profil public (visible par les autres)
Profil privé (paramètres)
Avatar et informations
Historique d'activité

4. Système de Commandes

Processus d'achat guidé
Suivi des commandes
Statuts multiples (pending, in_progress, completed, etc.)
Système de livraison de fichiers

5. Communication Real-time

Chat client-vendeur via Socket.io
Notifications en temps réel
Partage de fichiers
Historique des conversations

6. Système Vendeur

Wizard de création de service multi-étapes
Processus KYC à deux étapes
Dashboard de ventes
Gestion des commandes vendeur
Wallet et système de payout

7. Internationalisation

Support FR/EN
Routing basé sur la langue (/fr/..., /en/...)
Changement de langue dynamique
Traductions complètes

Configuration

Variables d'Environnement

# API Configuration
NEXT_PUBLIC_API_URL=https://api.2krikaservices.cloud

# Socket Configuration
NEXT_PUBLIC_SOCKET_URL=wss://api.2krikaservices.cloud