Briefing Technique : Développement Web App React - Projet Enstock

Briefing Technique : Web App React

Projet Enstock - Stack Supabase & Vibe Coding

🎯 Contexte & Objectif

Le projet Enstock est une marketplace locale (La Réunion) permettant aux commerçants de vendre leurs invendus et promotions en "Click & Collect".

Nous souhaitons développer une Web App moderne, rapide et évolutive (Mobile First). L'objectif est de préparer le terrain pour une future application mobile (via Capacitor ou React Native) tout en offrant une expérience fluide dès le lancement web.

Ce document détaille les fonctionnalités attendues et une première estimation des charges basée sur une stack technique accélérée par l'IA (Vibe Coding).

⚛️ React / Next.js / Vite
⚡ Supabase (Postgres, Auth, Storage)
🎨 Tailwind + Shadcn/UI
AI Assisted Cursor / Claude Code

Phase 0 : Conception & Design (IA Assisté)

Objectif : Valider les parcours utilisateurs avant le code.
Fonctionnalité Méthodologie & Outils Estimation
Maquettage UI/UX Rapide Utilisation de Google Stitch pour générer les premières interfaces, puis affinement sur Figma. Itérations de feedbacks client incluses. 16 h
Total Phase 0 16 h

Phase 1 : Socle "Acquisition Commerçants" (B2B)

Objectif : Permettre l'inscription et la gestion du catalogue par les boutiques.
Fonctionnalité Implémentation Technique (React/Supabase) Estimation
Setup & Architecture Initialisation Repo, configuration Tailwind/Shadcn, Setup Projet Supabase (Tables, Policies RLS de base). Mise en place du CI/CD. 6 h
UX/UI & Landing Pages Intégration React des maquettes : Home, Présentation, Landing B2B/B2C. Création des composants réutilisables (Cards, Buttons, Inputs). 20 h
Auth & Profils Commerçants Supabase Auth (Magic Link/Email). Table merchants liée à auth.users. Formulaire d'onboarding complexe (Nom, logo, adresse, horaires). 14 h
Gestion Catalogue (CRUD) Table products. Formulaire React (React Hook Form + Zod) pour ajout/édition. Upload images optimisé via Supabase Storage. Champs spécifiques : Promo, Anti-gaspi, Stock. 20 h
Back-office Admin (V1) Dashboard administrateur essentiel (Table React) pour lister/valider les nouveaux inscrits et modération basique (toggle status). 6 h
Total Phase 1 66 h

Phase 2 : Lancement Public (Client)

Objectif : Recherche géolocalisée et Réservation (Click & Collect).
Fonctionnalité Implémentation Technique (React/Supabase) Estimation
Géolocalisation & Map Intégration Mapbox ou Leaflet. Utilisation de l'extension PostGIS de Supabase pour les requêtes spatiales ("points within radius"). Clustering des marqueurs. 16 h
Recherche & Filtres Requêtes Supabase filtrées (par catégorie, prix, tags). UI de filtres instantanés réactifs (pas de rechargement de page). 10 h
Compte Client & Favoris Auth Social (Google). Table favorites (relation Many-to-Many). Interface "Mes favoris" et alertes. 8 h
Tunnel Réservation (Panier) Context React pour la gestion du Panier (State global). Création entrée table orders. Génération ID unique. Pas de paiement à cette étape. 12 h
Notifications (Emails) Supabase Edge Functions déclenchées par un webhook db (INSERT order) -> Envoi via API Resend ou SendGrid (Templates transactionnels). 6 h
Total Phase 2 52 h

Phase 3 : Fiabilisation, Revenus & Admin Avancée

Objectif : Paiement, Boosts Premium et Gestion complète des Abonnements.
Fonctionnalité Implémentation Technique (React/Supabase) Estimation
Abonnements B2B (Complet) Gestion Stripe Subscriptions (Webhooks `invoice.payment_failed` etc.). Job CRON pour notifications d'expiration et désactivation auto de la boutique/produits si expiré. 24 h
Boosts & Visibilité (Premium) Système d'achat de crédits (Stripe PaymentIntent). Algorithme de tri prioritaire (Carrousel, Offres du jour). Interface Admin pour gérer les slots premium. 14 h
QR Code & Scan Génération QR (librairie React). Interface commerçant pour scanner (accès caméra web mobile) ou saisir le code -> Update status order. 10 h
Paiement Stripe (Checkout) Intégration Stripe Checkout pour les produits. Webhook -> Update Order. Gestion des remboursements/litiges basiques. 12 h
Avis & Modération Table reviews liée aux orders (RLS: écriture si order completed). UI Admin pour modération et réponse commerçant. 8 h
Dashboard Analytics Composants graphiques (Recharts). Vues SQL pour stats commerçants + Stats globales Admin (CA plateforme, commissions). 12 h
Total Phase 3 80 h

Phase 4 : Suggestions ("Quick Wins")

Fonctionnalité Implémentation Technique Estimation
Duplication Rapide Fonction "Relist" : Dupliquer une entrée product avec reset du stock pour mise en ligne rapide des invendus quotidiens. 4 h
Connecteurs (Shopify/Woo) Edge Functions pour recevoir des webhooks externes ou API route pour import CSV. (Complexité variable selon API cible). 20 h
Total Phase 4 24 h

Coûts Récurrents & Maintenance

Estimations mensuelles post-lancement
Poste de dépense Détails Est./Mois
TMA (Tierce Maintenance Applicative) Résolution des bugs, mises à jour de sécurité (dépendances NPM), ajustements mineurs, et support technique. Assure la pérennité de l'application. 5 h / mois
Hébergement & Infrastructure
  • Vercel (Front-end) : ~20$ / mois (si dépassement plan gratuit).
  • Supabase (Back-end) : Plan Pro à 25$ / mois (recommandé pour la production et backups).
  • Stripe : Commission par transaction (pas de frais fixes).
~ 45 $