BestaSolar Pro
CRM solaire pour la gestion des pistes commerciales, de la boutique, des devis et des commissions de parrainage — Parakou, Bénin.
Application web et mobile (une seule base de code) :
- Grand écran : barre latérale fixe, contenu pleine page (kanban, grilles de produits, tableau de bord en colonnes).
- Mobile : barre d'onglets en bas, panneaux montants (bottom sheets), défilement tactile.
Démarrage
npm install
npm run dev # serveur de développement (port 3000)
npm run build # build de production dans dist/
npm run preview # prévisualisation du build
Comptes de démonstration
Architecture
src/
├── context/ # AuthContext (session) et DataContext (données + actions, persistées en localStorage)
├── components/ # AppLayout (sidebar/tab bar), PageHeader, Sheet (bottom sheet mobile / fenêtre desktop)
├── screens/ # Login, Dashboard, Pipeline, Boutique, Devis, Plus
├── data/seed.js # Données de démonstration
├── utils/format.js # Formatage F CFA, dates, initiales
└── index.css # Design system (variables CSS, mobile-first, breakpoints 640px / 1024px)
Backend partagé (Supabase)
Sans configuration, l'app fonctionne en mode local : les données restent sur l'appareil (localStorage). Pour partager les données entre tous les appareils en temps réel :
- Créez un projet sur supabase.com (gratuit)
- Dans SQL Editor, collez et exécutez le contenu de
supabase/schema.sql
- Dans Authentication → Users, créez les comptes de l'équipe (mêmes emails que les profils :
[email protected], [email protected], [email protected])
- Récupérez l'URL du projet et la clé
anon dans Settings → API, puis renseignez-les :
- Vercel : Settings → Environment Variables →
VITE_SUPABASE_URL et VITE_SUPABASE_ANON_KEY, puis redéployez
- APK Android : mêmes noms dans GitHub → Settings → Secrets and variables → Actions
- En local : copiez
.env.example en .env.local
Au premier démarrage connecté, l'app pousse automatiquement son catalogue et ses données vers la base ; ensuite tous les appareils lisent et écrivent les mêmes données, mises à jour en temps réel (pastille de statut à côté du nom de l'utilisateur).
Stack
