Créer une Marketplace Premium avec l'IA : Guide Lovable
Créer une app avec l'IA : Lancez votre marketplace de céramique avec Lovable. Guide complet pour intégrer Stripe Connect et Supabase sans coder votre MVP.
Aperçu du projet
Le cas — une marketplace de céramiques haut de gamme
Créer une app avec l'IA est désormais la voie royale pour les entrepreneurs souhaitant lancer des places de marché spécialisées. Notre étude de cas porte sur "L'Art des Mains", une marketplace C2C (Consumer to Consumer) de niche dédiée à la poterie et à la céramique artisanale de luxe.
Le problème est simple : les plateformes généralistes comme Etsy sont saturées, tandis que les galeries physiques prennent des commissions exorbitantes. Les artisans céramistes ont besoin d'un espace dédié qui valorise la texture et le travail manuel sans le bruit des produits industriels. En utilisant le vibe coding et Lovable, nous allons bâtir une plateforme gérant des galeries haute résolution, des paiements Stripe sécurisés et un tableau de bord sur mesure pour que les artisans gèrent leur stock et leurs cuissons.
Ce guide s'adresse aux "makers" qui veulent passer de l'idée à la production en un week-end. Nous levons la barrière technique de la gestion de base de données et du routage des paiements en déléguant le travail complexe à Lovable et Supabase, vous permettant de vous concentrer sur l'expérience utilisateur et des fonctionnalités de niche comme les "Drops" de collections éphémères.
Fonctionnalités clés
- Galeries Immersives : Support des images haute résolution avec zoom pour admirer le grain de la terre.
- Profils Artisans : Espaces de storytelling pour partager le processus de création et la localisation de l'atelier.
- Paiements Multi-Vendeurs Sécurisés : Intégration Stripe Connect pour reverser automatiquement les fonds aux artistes.
- Gestion de Stock en Temps Réel : Suivi automatisé des pièces uniques avec alertes "Stock Faible".
- Suivi de Commande Visuel : Chronologie pour l'acheteur, de "En cours de cuisson" à "Expédié".
- Filtres Avancés : Recherche par type de terre (grès, porcelaine), technique (tournage, modelage) et couleur d'émail.
- Favoris & Collections : Possibilité pour les clients d'enregistrer des pièces et de suivre leurs artistes préférés.
- Emails Transactionnels Automatisés : Confirmations d'achat et notifications d'expédition via Resend.
Stack & intégrations
Pour ce projet, nous utilisons une stack robuste et scalable qui s'intègre nativement avec Lovable :
- Lovable Cloud : Le moteur central pour la génération d'UI, la logique métier et l'hébergement.
- Supabase (PostgreSQL) : Pour stocker nos données relationnelles complexes (Artisans, Produits, Commandes) avec Auth intégré.
- Stripe Connect : Indispensable pour les marketplaces afin de diviser les paiements entre le vendeur et la plateforme.
- Resend : Pour une automatisation propre des emails (bienvenue, reçus de commande).
- Lucide React : Pour une iconographie minimaliste et élégante parfaitement adaptée au luxe artisanal.
Prompts Lovable concrets
1. Design system & identité visuelle
Crée un design system sophistiqué pour une marketplace de céramique artisanale nommée "L'Art des Mains".
Cible une esthétique minimaliste, organique et premium.
Dans index.css, définis une palette de tokens HSL :
- --background: 30 20% 98% (un blanc cassé coquille d'œuf)
- --foreground: 20 10% 15% (anthracite profond)
- --primary: 25 30% 45% (terre cuite / terracotta)
- --primary-foreground: 0 0% 100%
- --muted: 30 10% 90% (sable)
- --border: 30 10% 85%
- --radius: 0.75rem (arrondis doux)
Typographie : Utilise 'Playfair Display' pour les titres avec empattement et 'Inter' pour le corps de texte.
Composants : Personnalise les boutons shadcn pour avoir une texture légèrement granuleuse et une ombre portée subtile au survol.
Implémente un effet 'Glassmorphism' pour la barre de navigation.
Supporte le mode sombre avec des tons terreux profonds.
2. Schéma de base de données & RLS
Configure le schéma de base de données Supabase pour la marketplace de céramique.
Crée les tables suivantes avec clés étrangères et politiques RLS :
1. 'profiles' : id (uuid, pk), full_name, bio, avatar_url, role (enum: 'artist', 'buyer'), shop_name.
2. 'products' : id, artist_id (fk profiles), title, description, price (decimal), clay_type (text), technique (text), stock_quantity (int), images (text array).
3. 'orders' : id, buyer_id (fk profiles), total_amount, status (enum: 'pending', 'paid', 'shipped', 'delivered').
4. 'order_items' : id, order_id (fk orders), product_id (fk products), price_at_purchase.
Politiques RLS :
- Profiles : Lecture publique ; modification uniquement par le propriétaire.
- Products : Lecture publique ; insertion/modification uniquement par les profils ayant le rôle 'artist' pour leurs propres produits.
- Orders : Lecture restreinte à l'acheteur et à l'artiste concerné.
Active le temps réel sur la table 'orders'.
3. Authentification & onboarding
Crée un flux complet d'authentification et d'onboarding pour "L'Art des Mains".
- Page Login/Signup avec Email et Google via Supabase Auth.
- Étape d'onboarding : Après l'inscription, demande à l'utilisateur s'il souhaite "Acheter des pièces uniques" ou "Vendre ses créations".
- Si 'Vendre', redirige vers un formulaire de configuration de boutique (Nom, Bio) et demande de lier un compte Stripe.
- Si 'Acheter', redirige vers le flux principal de la marketplace.
- Protège les routes '/dashboard' et '/mes-commandes' pour les utilisateurs non connectés.
- Design une carte d'authentification élégante centrée avec le logo terracotta et un message de bienvenue chaleureux.
4. Écran principal : La Galerie Marketplace
Construis la page principale d'exploration pour 'L'Art des Mains'.
- Section Hero : Une bannière épurée avec le slogan "Découvrez la beauté de la terre".
- Barre de recherche : Filtrage en temps réel par titre de produit.
- Barre latérale de filtres : Checkboxes pour 'Technique' (Tournage, Modelage, Moulage) et 'Matière' (Grès, Porcelaine, Faïence).
- Grille de produits : Cartes responsives affichant l'image principale, le titre, le nom de l'artiste et le prix en €.
- État vide : Message "Aucune pièce trouvée" avec un bouton pour réinitialiser les filtres.
- Chargement : Utilise des skeletons loaders pour les images afin d'assurer une expérience fluide typique du vibe coding.
5. Intégration Stripe & Gestion des Commandes
Implémente la logique de paiement et de gestion des commandes.
- Page Produit : Ajoute un bouton 'Ajouter au panier' et un bouton 'Achat immédiat'.
- Panier (Drawer) : Affiche les articles, le sous-total et un bouton 'Procéder au paiement'.
- Intégration : Au clic sur paiement, appelle une Edge Function Supabase pour créer une session Stripe Checkout.
- Page Succès : Affiche un message "Merci pour votre commande !" avec le récapitulatif.
- Dashboard Artiste : Un tableau listant les commandes reçues avec les colonnes : ID, Client, Date, Montant et Statut.
- Mise à jour : Permet à l'artiste de changer le statut en 'Expédié', déclenchant un toast de confirmation.
6. Polish, SEO & Performance
Finalise l'application avec des finitions professionnelles et l'optimisation SEO.
- Design Responsive : Assure-toi que le menu mobile est propre (burger menu).
- Balises Meta : Ajoute des titres et descriptions dynamiques pour les pages produits (ex: "[Nom du produit] par [Artiste] | L'Art des Mains").
- OpenGraph : Configure les images de partage pour les réseaux sociaux.
- Notifications : Utilise Sonner pour les alertes 'Article ajouté', 'Profil mis à jour' et 'Paiement réussi'.
- Performance : Optimise le chargement des images Supabase Storage.
- Sitemap : Génère une route basique /sitemap.xml pour le référencement Google.
Pièges courants & solutions
Comment gérer les commissions de la plateforme automatiquement ?
La solution est d'utiliser Stripe Connect. Lors de la création de la session de paiement, vous spécifiez un application_fee_amount. L'IA peut générer le code de l'Edge Function pour calculer ce montant (ex: 10%) avant de transférer le reste à l'artisan.
Les images lourdes ralentissent le site, que faire ? Demandez à Lovable d'utiliser le redimensionnement d'image côté client avant l'upload ou d'utiliser les paramètres de transformation d'URL de Supabase Storage pour ne charger que des miniatures dans la grille principale.
Comment gérer les pièces uniques (stock de 1) ? Utilisez une transaction PostgreSQL. Quand une commande est payée via le webhook Stripe, réduisez le stock à zéro. Si le stock est à zéro, désactivez le bouton "Acheter" avec un badge "Vendu".
FAQ
Faut-il être développeur pour utiliser Lovable ?
Non, c'est tout l'intérêt du vibe coding. En décrivant vos besoins précisément, Lovable génère le code React et la structure de données. Une compréhension basique des concepts web suffit.
Stripe Connect est-il gratuit ?
Stripe ne facture pas d'abonnement, mais prend une commission sur chaque vente. C'est idéal pour démarrer un MVP sans frais fixes.
Puis-je exporter mon code plus tard ?
Oui, tout le code généré par Lovable est standard (React, Tailwind, Vite). Vous restez propriétaire de votre propriété intellectuelle et de vos données sur Supabase.
Conclusion
Bâtir une marketplace comme L'Art des Mains prouve la puissance de créer une app avec l'IA. En combinant l'interface générée par Lovable, la base de données Supabase et les paiements Stripe, vous lancez une plateforme pro en un temps record. Ne cherchez plus de développeur, devenez-le grâce au vibe coding !
Prêt à lancer votre boutique ? Ouvrez Lovable et commencez avec le Prompt #1 !
Maquette interactive
Aperçu statique d'un écran clé du projet.
La poésie du geste
Découvrez une sélection exclusive de céramiques façonnées à la main par les meilleurs artisans.
Nouveautés
Pièces uniques sorties du four cette semaine.
Bol à thé Ochre
Atelier Sacha
Vase Minimaliste
Studio Terre
Assiette Plage
Maison Argile
Schéma de base de données
À coller dans Lovable Cloud (Supabase). RLS incluses.
-- Extension pour les UUID
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-- 1. Table des profils (utilisateurs, artistes et acheteurs)
CREATE TABLE profiles (
id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
full_name TEXT,
avatar_url TEXT,
role TEXT CHECK (role IN ('artist', 'buyer')) DEFAULT 'buyer',
shop_name TEXT,
bio TEXT,
location TEXT,
stripe_account_id TEXT,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
);
-- 2. Table des produits (céramiques)
CREATE TABLE products (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
artist_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
title TEXT NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
clay_type TEXT, -- Grès, Porcelaine, etc.
technique TEXT, -- Tournage, Modelage, etc.
stock_quantity INTEGER DEFAULT 1,
images TEXT[] DEFAULT '{}',
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
);
-- 3. Table des commandes
CREATE TABLE orders (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
buyer_id UUID REFERENCES profiles(id) NOT NULL,
total_amount DECIMAL(10,2) NOT NULL,
status TEXT CHECK (status IN ('pending', 'paid', 'shipped', 'delivered')) DEFAULT 'pending',
stripe_session_id TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
);
-- 4. Table des articles de commande
CREATE TABLE order_items (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
order_id UUID REFERENCES orders(id) ON DELETE CASCADE NOT NULL,
product_id UUID REFERENCES products(id) NOT NULL,
price_at_purchase DECIMAL(10,2) NOT NULL
);
-- RLS (Row Level Security)
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
ALTER TABLE orders ENABLE ROW LEVEL SECURITY;
-- Policies pour PROFILES
CREATE POLICY "Profils visibles par tous" ON profiles FOR SELECT USING (true);
CREATE POLICY "Utilisateurs modifient leur propre profil" ON profiles FOR UPDATE USING (auth.uid() = id);
-- Policies pour PRODUCTS
CREATE POLICY "Produits visibles par tous" ON products FOR SELECT USING (true);
CREATE POLICY "Artistes gèrent leurs produits" ON products FOR ALL USING (
EXISTS (
SELECT 1 FROM profiles
WHERE profiles.id = auth.uid() AND profiles.role = 'artist'
)
);
-- Policies pour ORDERS
CREATE POLICY "Acheteurs voient leurs commandes" ON orders FOR SELECT USING (auth.uid() = buyer_id);
CREATE POLICY "Artistes voient les commandes de leurs produits" ON orders FOR SELECT USING (
EXISTS (
SELECT 1 FROM order_items
JOIN products ON order_items.product_id = products.id
WHERE order_items.order_id = orders.id AND products.artist_id = auth.uid()
)
);Roadmap & estimation
MVP : Marketplace Essentielle
- →Configuration de la base Supabase (Artisans, Produits).
- →Mise en place de l'auth Email/Google.
- →Création de la galerie marketplace avec filtres techniques.
- →Intégration de Stripe Checkout pour les paiements simples.
V2 : Outils Vendeurs Avancés Tuning
- →Implémentation de Stripe Connect pour les paiements vendeurs.
- →Création du tableau de bord artisan (stock et ventes).
- →Ajout du suivi de commande interactif.
- →Intégration de Resend pour les notifications clients.
V3 : Communauté et Croissance
- →Système de messagerie acheteur/artiste.
- →Mise en place de 'Drops' de collections avec compte à rebours.
- →SEO avancé et images OpenGraph dynamiques.
- →Version application mobile PWA.
Envie d'aller plus loin ?
Téléchargez le guide PDF complet pour maîtriser Lovable de A à Z.
Voir les guides