Votre collection beauté, réinventée
Application PWA de gestion de produits cosmétiques avec scan de code-barres
Fonctionnalités • Captures • Stack • Déploiement • Développement
- 📷 Scan de code-barres — Identifiez vos produits en un clin d'œil grâce à l'intégration Quagga2
- 📖 Catalogue beauté — Parcourez, filtrez et explorez une large gamme de produits cosmétiques
- ❤️ Wishlist & Favoris — Créez votre collection idéale et retrouvez vos coups de cœur
- ⭐ Avis & Évaluations — Notez les produits avec le système d'étoiles intégré
- 🏷️ Scan de code-barres — Ajoutez rapidement des produits par scan
- 🛒 Collection personnelle — Gérez votre inventaire de produits beauté
- 📊 Dashboard Admin — Administration complète avec analytics et gestion des produits
- 🔐 Authentification — Compte utilisateur avec connexion email ou sociale (Supabase)
- 🎨 Animations fluides — Transitions et micro-interactions avec Framer Motion
- 📱 PWA — Installez l'application sur votre téléphone pour une expérience native
- 🌙 Thème sombre/clair — Interface adaptative selon vos préférences
| Page | Description |
|---|---|
| Accueil | Découverte des produits en vedette et des marques populaires |
| Collection | Catalogue complet avec filtres par catégorie, marque et type |
| Wishlist | Vos produits favoris synchronisés sur le cloud |
| Scanner | Scan de code-barres pour identifier et ajouter des produits |
| Produit | Fiche détaillée avec avis, notes et photos |
| Profil | Gestion de votre profil et de votre collection |
| Admin | Dashboard de gestion des produits et statistiques |
| Technologie | Usage |
|---|---|
| React 18 | UI — Architecture composants modernes |
| TypeScript | Typage statique pour un code robuste |
| Vite 5 | Bundler — Build ultra-rapide |
| Tailwind CSS 3 | Styles — Design system utilitaire |
| shadcn/ui | Composants — Bibliothèque d'interface premium |
| Supabase | Backend — Auth, base de données, stockage |
| Framer Motion | Animations — Transitions fluides |
| Quagga2 | Scan — Lecteur de code-barres embarqué |
| Chart.js | Analytics — Graphiques et statistiques |
| React Router | Navigation — Routage SPA |
| Vaul | Drawer — Tiroir mobile interactif |
| Sonner | Notifications — Toasts élégants |
L'application est déployée sur Cloudflare Pages — une SPA statique rapide et scalable.
# Build de production
npm run build
# Aperçu local
npm run preview| Variable | Description |
|---|---|
VITE_SUPABASE_URL |
URL du projet Supabase |
VITE_SUPABASE_PUBLISHABLE_KEY |
Clé publique Supabase (anon) |
# Cloner le projet
git clone https://github.com/idhem85/ladyb.git
cd ladyb
# Installer les dépendances
npm install
# Lancer le serveur de développement
npm run dev
# Build de production
npm run buildsrc/
├── components/ # Composants UI réutilisables
│ ├── ui/ # Composants shadcn/ui
│ ├── auth/ # Composants d'authentification
│ ├── admin/ # Composants d'administration
│ └── scanner/ # Composants de scan
├── pages/ # Pages de l'application
├── contexts/ # Contextes React (auth, theme)
├── hooks/ # Hooks personnalisés
├── lib/ # Utilitaires et helpers
├── utils/ # Fonctions utilitaires
└── data/ # Données statiques et configurations
Projet privé — Tous droits réservés.
idhem85 • Lady B — Votre collection beauté, réinventée