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 : FichierContenudocs/DEVELOPMENT_PRINCIPLES.mdCycle de travail, règles, conventions — obligatoiredocs/ARCHITECTURE.mdStack, structure, flux de donnéesdocs/PLANS_TARIFAIRES.mdPlans Free / Standard / Premium et permissionsdocs/PARCOURS_UTILISATEURS.mdParcours exact de chaque type d'utilisateurdocs/GOLDEN_DATASET.mdTests 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 bash# 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 bashnpm run build npx wrangler pages deploy dist --project-name=expria Domaine : expria.app Dépôt lié Backend : codeberg.org/germannoff/expria-backend