Mondébène est une plateforme communautaire dédiée à la culture afro-caribéenne en France : restaurants, soins et beauté, artisans et événements, trouvés, vérifiés et recommandés par la communauté. À partir de la maquette de la page d’accueil et de la charte fournies par le porteur de projet, j’ai conçu l’ensemble du parcours et livré une maquette navigable de 38 écrans : le guide public, l’espace membre et l’espace commerçant.
Le parti pris de conception
Mondébène n’est pas un annuaire, c’est un guide éditorial. La charte d’origine — ébène, terre cuite et or sur fond crème, titres en serif — a été déclinée en système de design complet pour que chaque écran garde l’esprit d’un magazine haut de gamme, y compris dans le back-office commerçant.
Deuxième parti pris : les contraintes réelles d’une plateforme sont traitées dès la maquette. Les fiches changent selon l’activité (carte et réservation pour un restaurant, prestations et rendez-vous pour un institut, créations et ateliers pour un artisan). Les avis affichent la date de visite, les modalités de contrôle et le motif de refus, comme l’exige l’article L.111-7-2 du Code de la consommation. Et un commerce qui cesse son abonnement garde une fiche réduite à la même adresse, sans casser le référencement.
Livré
- Guide public : accueil éditorial, recherche avec carte interactive, page catégorie, page ville, résultats vides avec suggestions
- Trois modèles de fiche commerçant (restaurant, soins & beauté, artisanat) et une fiche réduite pour les commerces sans abonnement
- Avis : rédaction d’un avis avec notes détaillées, charte des avis et de la modération conforme à l’article L.111-7-2
- Agenda des événements, page détail d’un événement et formulaire de soumission
- Contributions de la communauté : ajouter un lieu, revendiquer une fiche
- Espace membre : connexion et création de compte, mot de passe oublié, favoris et listes, mes avis avec motif de refus, profil et confidentialité (RGPD)
- Espace commerçant : tableau de bord, modification de la fiche, gestion des avis et des événements, statistiques détaillées, abonnement et factures, paramètres et équipe
- Offre commerciale : page des formules d’abonnement, inscription commerçant et paiement
- Pages institutionnelles et légales : qui sommes-nous, aide et FAQ, contact, presse, CGU, bandeau cookies conforme CNIL, page 404
Technologies utilisées
- Vue 3 en application monopage, Vue Router, 38 écrans avec des adresses propres à chaque page
- Tailwind CSS avec le système de design Mondébène (palette, typographies Playfair Display et DM Sans, composants)
- Conception assistée par IA des écrans complémentaires, puis conversion automatisée en composants Vue
- Build Vite, écrans chargés à la demande, images optimisées et servies localement
- Architecture cible en production : carte MapLibre sur fond OpenStreetMap, géocodage par la Base Adresse Nationale, paiement des abonnements par Stripe
- Hébergement Apache / Virtualmin, HTTPS
