Chargement des projets...
Terminé
DASHBOARD
Wilook Backoffice - Gestion E-commerce Mode
Application de backoffice pour la gestion d'un e-commerce de mode, construite en React 19 + TypeScript strict avec Supabase (PostgreSQL, Auth, Storage). Elle couvre la gestion CRUD des produits avec filtres avancés et upload d'images, la composition visuelle de looks (tenues) en 5 emplacements par drag-and-drop, et la gestion des profils clients avec préférences de style. Architecture en couche service avec TanStack Query, Zustand et état d'URL pour les filtres. Un mode démo intégré fait fonctionner l'application hors-ligne via localStorage lorsque Supabase n'est pas configuré.
Fonctionnalités
Gestion CRUD des produits mode
Filtres avancés (catégorie, marque, couleurs, tailles, prix)
Upload d'images par drag-and-drop
Composition visuelle de looks en 5 emplacements
Gestion des profils et préférences clients
Mode démo hors-ligne (localStorage)
Pagination par infinite scroll
Authentification et verrouillage RLS (Supabase)
Le Défi
Construire un backoffice complet pour une marque de mode capable de gérer un catalogue de produits, de composer des tenues (looks) de manière visuelle et de suivre les clients, tout en restant utilisable sans backend configuré. L'enjeu était de garder une séparation nette entre l'interface et l'accès aux données, de gérer efficacement de grandes listes (pagination, recherche, tri) et d'offrir une expérience fluide sur poste de travail, avec une dégradation gracieuse en mode hors-ligne.
Couche service
Séparer proprement l'UI de l'accès aux données avec un fallback mock pour le mode démo
Composition de looks
Construire un éditeur visuel de tenues en 5 emplacements avec glisser-déposer
Listes volumineuses
Gérer pagination, recherche et tri côté serveur avec infinite scroll
Sécurité Supabase
Verrouiller l'accès via des policies RLS réservées aux utilisateurs authentifiés
La Solution
Architecture en couche service isolant l'accès aux données (Supabase + fallback mock), encapsulée dans des hooks personnalisés au-dessus de TanStack Query pour le cache, la pagination et le refetch. Zustand gère l'état UI minimal, l'état d'URL rend les filtres partageables et bookmarkables. Pagination serveur en infinite scroll, recherche et tri résolus côté Supabase via RPC, et verrouillage RLS limitant l'accès aux utilisateurs authentifiés. Un mode démo bascule automatiquement sur localStorage avec des données préchargées quand Supabase n'est pas configuré.
Stack technique
Frontend
React 19TypeScriptReact Router v7Tailwind CSS
Données & état
TanStack QueryZustandÉtat d'URL
Backend
SupabasePostgreSQLAuth & StorageRLS
Outils & qualité
ViteBunVitestPlaywright
Résultats
Démo
Mode hors-ligne
Fallback localStorage sans backend
5
Emplacements look
Composition visuelle de tenues
TanStack
État serveur
Cache, pagination, refetch
1
Développeur
Projet solo
Gestion du catalogue produits avec filtres et infinite scroll
Leçons apprises
Couche service et fallback
TechniqueIsoler l'accès aux données derrière une couche service permet d'ajouter un mode démo (mock localStorage) sans toucher à l'UI
État d'URL pour les filtres
DesignStocker les filtres dans l'URL les rend partageables et bookmarkables, tout en simplifiant la gestion d'état
Pagination côté serveur
TechniqueDéléguer recherche et tri à Supabase via RPC évite d'accumuler les données côté client et reste performant sur de grandes listes
Verrouillage RLS
TechniquePasser les policies de anon à authenticated seul ferme l'accès non authentifié sans casser le service des images publiques
Projets similaires
saas
Dorloter - Plateforme d'Adoption et de Retrouvailles d'Animaux
Plateforme française d'adoption, de signalement géolocalisé d'animaux perdus/trouvés et d'annuaire de pensions agréées, avec API .NET, matching PostGIS et applications web et mobile.
.NET 10C#ASP.NET CoreEntity Framework Core+7
saas
Physio Xpert - Plateforme Médicale pour Kinésithérapeutes
Solution complète de gestion de questionnaires médicaux et de rééducation avec API microservices, dashboard admin et application mobile patient.
Next.jsReactTypeScriptFastify+4
web app
Little Lemon - Application de Réservation
Application web de réservation de restaurant avec interface moderne développée en React et gestion d'état Redux.
ReactReduxJavaScriptCSS3+2