Architecture Technique

🏗️ Vue d'ensemble

Africa Bridge Pay est une application full-stack construite avec Next.js 16 (App Router) et TypeScript.

📚 Stack Technologique

Frontend

• Framework : Next.js 16 (App Router)
• UI Library : React 19
• Language : TypeScript
• Styling : Tailwind CSS
• Icons : Lucide React
• State Management : React Context API
• Forms : React Hook Form (à venir)

Backend

• API : Next.js API Routes
• ORM : Prisma (prêt, pas encore en production)
• Database : PostgreSQL (via Supabase, à migrer)
• Storage actuel : localStorage (MVP uniquement)
• Authentication : À implémenter (JWT + refresh tokens)

Intégrations Externes

• Taux de change : Wise API + fallback statique
• Email : SendGrid (à implémenter)
• SMS : Twilio (à implémenter)
• Paiements : Orange Money / Wave (à implémenter)

Déploiement

• Hébergement : Vercel
• CI/CD : Vercel Git Integration
• Domaine : Namecheap (à configurer)
• SSL : Vercel SSL automatique

📁 Structure des Dossiers

africa-bridge-pay/
├── app/                          # Next.js 16 App Router
│   ├── (auth)/                  # Routes d'authentification groupées
│   │   ├── login/               # Page de connexion
│   │   └── onboarding/          # Inscription + KYB
│   ├── admin/                   # Interface admin
│   │   ├── accounts/            # Gestion des comptes
│   │   └── transactions/[id]/   # Détails d'une transaction
│   ├── api/                     # API Routes côté serveur
│   │   ├── wise-quote/          # Endpoint pour obtenir les devis Wise
│   │   └── send-account-email/  # Envoi d'email (à implémenter)
│   ├── calculator/              # Calculateur de frais public
│   ├── dashboard/               # Dashboard client
│   ├── new-transaction/         # Création de transaction
│   ├── suppliers/               # Gestion des fournisseurs
│   ├── home/                    # Page d'accueil publique
│   ├── pricing/                 # Page tarification publique
│   ├── layout.tsx               # Layout racine
│   └── page.tsx                 # Page racine (redirection)
│
├── components/                   # Composants React réutilisables
│   ├── ui/                      # Composants UI de base
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   └── Select.tsx
│   ├── Navigation.tsx           # Barre de navigation principale
│   ├── WiseCalculator.tsx       # Calculateur avec API Wise
│   ├── ABPvsBankComparer.tsx    # Comparateur ABP vs Banque
│   └── ExchangeRateIndicator.tsx # Indicateur de taux temps réel
│
├── lib/                         # Logique métier et utilitaires
│   ├── pricing-constants.ts     # ⭐ Source de vérité pour la tarification
│   ├── financial-calculations.ts # Calculs financiers
│   ├── exchange-rates.ts        # Gestion des taux de change
│   ├── demoData.ts             # Données de démonstration
│   └── utils.ts                # Utilitaires divers
│
├── context/                     # Context API React
│   └── AuthContext.tsx         # Contexte d'authentification
│
├── hooks/                       # Custom React Hooks
│   ├── useWiseQuote.ts         # Hook pour l'API Wise
│   └── useLocalStorage.ts      # Hook pour localStorage
│
├── types/                       # Types TypeScript
│   ├── index.ts                # Types généraux (Supplier, Transaction)
│   └── wise.ts                 # Types pour l'API Wise
│
├── prisma/                      # Prisma ORM
│   ├── schema.prisma           # Schéma de base de données
│   └── migrations/             # Migrations (à générer)
│
├── public/                      # Assets statiques
│   ├── logo2-128.png           # Logo principal
│   └── favicon.ico
│
├── docs/                        # Documentation publique
├── docs-private/                # Documentation interne
├── wiki/                        # Wiki VitePress (vous êtes ici)
│
└── Configuration
    ├── next.config.ts           # Configuration Next.js
    ├── tailwind.config.ts       # Configuration Tailwind
    ├── tsconfig.json            # Configuration TypeScript
    └── package.json             # Dépendances npm

🔄 Flux de Données

1. Authentification (MVP - localStorage)

User Input → AuthContext → localStorage → App State

2. Transactions

Client → Form → API Route (/api/wise-quote) → Wise API → Response
                                           ↓
                                       Fallback si échec
                                           ↓
                                     Local Calculation

3. Calcul des Frais

Montant + Devise → useWiseQuote Hook → /api/wise-quote
                                     ↓
                     Wise Quote + ABP Calculations
                                     ↓
                     Display: Total, Fees, Rate

🔐 Sécurité

Actuel (MVP)

• ✅ Validation côté client (TypeScript)
• ✅ API Routes côté serveur (protégées par Next.js)
• ✅ Clés API Wise en variables d'environnement
• ⚠️ Authentification localStorage (temporaire)

À Implémenter (v1.1+)

• 🔴 JWT avec refresh tokens
• 🔴 Rate limiting
• 🔴 Validation côté serveur (Zod)
• 🔴 HTTPS obligatoire
• 🔴 CSP headers
• 🔴 CORS configuration
• 🔴 2FA

📊 Modèle de Données (Prisma)

Entités Principales

• User : Utilisateurs (clients)
• Company : Entreprises (KYB)
• Supplier : Fournisseurs
• Transaction : Transactions
• ExchangeRate : Historique des taux (à implémenter)

Voir Database Architecture pour les détails.

🔌 Intégrations API

Wise API

• Endpoint : /v3/profiles/{profileId}/quotes
• Usage : Obtenir taux de change en temps réel
• Fallback : Taux statiques mis à jour manuellement
• Cache : 5 minutes
• Voir : Wise Integration

Future Integrations

• SendGrid : Notifications email
• Twilio : Notifications SMS
• Orange Money API : Paiements locaux
• Wave API : Paiements locaux alternatifs

🚀 Performance

Optimisations Actuelles

• ✅ Server Components (Next.js 16)
• ✅ Code Splitting automatique
• ✅ Image Optimization (next/image)
• ✅ Static Generation pour pages publiques

À Améliorer

• 🔴 API Response Caching (Redis)
• 🔴 Database Query Optimization
• 🔴 CDN pour assets statiques
• 🔴 Lazy loading composants

📱 Responsive Design

• Mobile-First : Interface optimisée pour mobile
• Breakpoints Tailwind :
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px

🧪 Tests

Actuel

• ⚠️ Pas encore de tests automatisés

À Implémenter

• 🔴 Unit Tests (Vitest)
• 🔴 Integration Tests (Playwright)
• 🔴 E2E Tests (Playwright)
• 🔴 API Tests (Supertest)

📈 Monitoring

À Implémenter

• 🔴 Vercel Analytics
• 🔴 Sentry (Error tracking)
• 🔴 LogRocket (Session replay)
• 🔴 Custom metrics dashboard

---

Prochaine étape : Consultez la Database Architecture pour comprendre le modèle de données.