expria-frontend

Interface utilisateur d'Expria — Coach IA de préparation au TCF Canada. Plateforme SaaS francophone ciblant les candidats à l'immigration Express Entry (Algérie, Maroc, Cameroun).

Stack technique

• React 18 + Vite — frontend pur, pas de logique serveur
• TypeScript — typage strict
• Tailwind CSS — styles utilitaires
• Supabase JS — authentification côté client uniquement

Documents de référence

Lire ces fichiers avant toute modification :

Fichier	Contenu
docs/DEVELOPMENT_PRINCIPLES.md	Cycle de travail, règles, conventions — obligatoire
docs/ARCHITECTURE.md	Stack, structure, flux de données
docs/PLANS_TARIFAIRES.md	Plans Free / Standard / Premium et permissions
docs/PARCOURS_UTILISATEURS.md	Parcours exact de chaque type d'utilisateur
docs/GOLDEN_DATASET.md	Tests manuels anti-régression

Structure des dossiers

src/
├── api/              # Fonctions d'appel API (une par domaine)
├── components/       # Composants React réutilisables
│   ├── ui/           # Composants génériques (Button, Modal, Badge)
│   ├── simulation/   # Composants spécifiques aux simulations
│   ├── rapport/      # Composants d'affichage des rapports
│   ├── dashboard/    # Composants du dashboard utilisateur
│   └── paywall/      # Composants de blocage / upgrade
├── pages/            # Pages de l'application (une par route)
├── hooks/            # Hooks React personnalisés
├── lib/
│   ├── access.ts     # Source de vérité des permissions par plan ⚠️
│   ├── supabase.ts   # Client Supabase (auth uniquement)
│   └── constants.ts  # Constantes globales
└── types/            # Types TypeScript partagés

⚠️ src/lib/access.ts est la source de vérité unique des permissions par plan. Ce fichier doit rester identique à src/lib/access.ts dans expria-backend. Toute modification des plans tarifaires met ce fichier à jour en premier.

Variables d'environnement

Créer un fichier .env à la racine (ne jamais committer) :

VITE_API_URL=http://localhost:3000          # URL backend en développement
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=xxx                  # Clé publique uniquement

❌ Aucune clé privée ne doit apparaître dans ce fichier ou dans le code frontend.

Commandes

# Installer les dépendances
npm install

# Démarrer en développement
npm run dev

# Builder pour la production
npm run build

# Prévisualiser le build
npm run preview

Déploiement

Plateforme : Cloudflare Pages Déploiement : manuel via CLI

npm run build
npx wrangler pages deploy dist --project-name=expria

Domaine : expria.app

Dépôt lié

Backend : https://codeberg.org/Hermann_Kitio/expria-backend