Lovable.dev — E-commerce con AI

PROMPT FONDATIVO — usa questo come primo messaggio: Crea un'applicazione e-commerce React con TypeScript e Tailwind CSS. Stack: React 18, Supabase, Shadcn/UI. Struttura pagine: - / → Homepage con hero section e prodotti in evidenza - /products → Catalogo prodotti con filtri categoria e ricerca - /products/:id → Scheda prodotto con galleria immagini, varianti, aggiungi al carrello - /cart → Carrello con modifica quantità e riepilogo - /checkout → Form checkout + integrazione Stripe - /orders → Storico ordini utente (solo loggati) - /admin → Dashboard admin: gestione prodotti e ordini Funzionalità richieste: - Autenticazione Supabase (email + password + Google OAuth) - Carrello persistente su Supabase per utenti loggati, localStorage per anonimi - Wishlist prodotti - Design: palette neutro con accent viola, mobile-first, responsive // Non aggiungere ancora i pagamenti — gestiremo Stripe in un secondo step

PROMPT DATABASE — da inviare dopo la struttura base: Crea lo schema SQL Supabase per il negozio. Esegui questo SQL nell'editor Supabase: Tabelle richieste: CREATE TABLE products ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, name TEXT NOT NULL, description TEXT, price DECIMAL(10,2) NOT NULL, stock INTEGER DEFAULT 0, category TEXT, image_url TEXT, images TEXT[], -- array URL immagini active BOOLEAN DEFAULT true, created_at TIMESTAMPTZ DEFAULT NOW() ); CREATE TABLE orders ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES auth.users(id), status TEXT DEFAULT 'pending', -- pending|paid|shipped|delivered|cancelled total DECIMAL(10,2) NOT NULL, stripe_payment_id TEXT, shipping_address JSONB, created_at TIMESTAMPTZ DEFAULT NOW() ); CREATE TABLE order_items ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, order_id UUID REFERENCES orders(id), product_id UUID REFERENCES products(id), quantity INTEGER NOT NULL, price_at_purchase DECIMAL(10,2) NOT NULL ); -- Abilita Row Level Security per sicurezza ALTER TABLE orders ENABLE ROW LEVEL SECURITY; -- Policy: utenti vedono solo i propri ordini CREATE POLICY "Users see own orders" ON orders FOR SELECT USING (auth.uid() = user_id);

PROMPT UI PRODOTTI: Nella pagina /products implementa: 1. Griglia prodotti con card responsive (4 col desktop, 2 tablet, 1 mobile) - Immagine prodotto con lazy loading - Badge "Esaurito" se stock = 0 - Prezzo formattato in EUR con Intl.NumberFormat - Pulsante "Aggiungi al carrello" disabilitato se esaurito 2. Filtri sidebar: - Selezione categoria (dropdown o chip) - Range prezzo (slider min/max) - Solo disponibili (checkbox) - Ordinamento: prezzo asc/desc, novità 3. Ricerca full-text in tempo reale con debounce 300ms 4. Paginazione con 12 prodotti per pagina Query Supabase di riferimento: supabase.from('products') .select('*') .eq('active', true) .ilike('name', '%' + searchTerm + '%') .gte('price', minPrice) .lte('price', maxPrice) .order('created_at', { ascending: false }) .range(from, to)

PROMPT ADMIN PANEL: Nella pagina /admin (accessibile solo agli utenti con ruolo 'admin') crea: 1. Lista prodotti con tabella: nome, prezzo, stock, categoria, attivo/disattivo - Toggle attivo/disattivo inline - Bottone modifica e cancella per ogni riga 2. Form aggiungi/modifica prodotto: - Input: nome, descrizione (richtext), prezzo, stock, categoria - Upload immagine principale → carica su Supabase Storage - Upload immagini aggiuntive (max 5) - Preview immagini prima del salvataggio 3. Dashboard ordini: - Tabella ordini con stato, totale, data, cliente - Filtro per stato (pending/paid/shipped/delivered) - Bottone modifica stato ordine Per il controllo ruolo admin, aggiungi a Supabase: -- In auth.users metadata o tabella profiles separata CREATE TABLE profiles ( id UUID REFERENCES auth.users PRIMARY KEY, role TEXT DEFAULT 'customer' ); -- Policy admin: solo ruolo 'admin' vede tutti gli ordini CREATE POLICY "Admin sees all orders" ON orders FOR ALL USING ( EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin') );

PROMPT STRIPE — integrazione pagamenti: Integra Stripe Checkout nel negozio. Usa Supabase Edge Functions per sicurezza. Edge Function 1: /functions/v1/create-checkout - Riceve: { items: [{product_id, quantity}], user_id, success_url, cancel_url } - Verifica stock disponibile per ogni prodotto - Calcola totale con IVA 22% (importo × 1.22) - Crea Stripe Checkout Session con: - line_items dai prodotti (nome, prezzo, quantità, immagine) - metadata: { user_id, order_items: JSON.stringify(items) } - success_url: '/order-success?session_id={CHECKOUT_SESSION_ID}' - cancel_url: '/cart' - payment_method_types: ['card'] - billing_address_collection: 'required' - shipping_address_collection con allowed_countries: ['IT', 'EU'] - Crea ordine in Supabase con status 'pending' e stripe_session_id - Ritorna: { url: checkoutUrl } Edge Function 2: /functions/v1/stripe-webhook - Verifica firma webhook con STRIPE_WEBHOOK_SECRET - Gestisce evento checkout.session.completed: - Recupera session.metadata.user_id e order_items - Aggiorna ordine su Supabase: status → 'paid' - Scala lo stock di ogni prodotto - (Opzionale) Invia email conferma tramite Resend/SendGrid Nel frontend React, in /checkout: const handlePayment = async () => { const { data } = await supabase.functions.invoke('create-checkout', { body: { items: cartItems, user_id: user.id, success_url: window.location.origin + '/order-success', cancel_url: window.location.origin + '/cart' } }); window.location.href = data.url; // redirect a Stripe };

PROMPT PAYPAL — alternativa a Stripe: Aggiungi PayPal come secondo metodo di pagamento nel checkout. Usa @paypal/react-paypal-js per il frontend. Setup nel componente Checkout: import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js'; Flusso PayPal Orders API v2: 1. Al click PayPal → Edge Function /create-paypal-order - Crea ordine PayPal con amount.value = totale_con_iva - currency_code: 'EUR' - Ritorna: orderId 2. PayPal gestisce il pagamento lato suo 3. onApprove callback → Edge Function /capture-paypal-order - Cattura il pagamento con orderId - Verifica capture.status === 'COMPLETED' - Aggiorna ordine Supabase: status → 'paid', paypal_order_id Nel component: <PayPalScriptProvider options={{ 'client-id': import.meta.env.VITE_PAYPAL_CLIENT_ID, currency: 'EUR' }}> <PayPalButtons createOrder={async () => (await supabase.functions.invoke('create-paypal-order', { body: { amount: total } })).data.orderId} onApprove={async (data) => await supabase.functions.invoke('capture-paypal-order', { body: { orderId: data.orderID } })} /> </PayPalScriptProvider> // IMPORTANTE: PayPal client-id va in .env.local come VITE_PAYPAL_CLIENT_ID // PayPal secret va solo nelle Edge Functions (variabile ambiente Supabase)

PROMPT COOKIE BANNER GDPR/GARANTE IT: Aggiungi un cookie banner conforme al Garante Privacy italiano (provvedimento 2021). Requisiti obbligatori: - Appare al primo accesso in basso (posizione sticky) - NON pre-selezionare i cookie non essenziali (violazione GDPR) - 3 categorie distinte con toggle on/off: 1. Tecnici/necessari → sempre attivi, non modificabili (toggle disabilitato) 2. Analytics (es. Google Analytics) → disattivati di default 3. Marketing → disattivati di default - Pulsante "Accetta tutti" e "Personalizza" e "Rifiuta tutti" - Link a Privacy Policy e Cookie Policy - Scelta salvata in localStorage ('cookie_consent') - Se l'utente rifiuta: non caricare GA né script marketing Implementazione React: - Componente CookieBanner globale in App.tsx - Hook useCookieConsent() che legge localStorage - Carica Google Analytics solo se consent.analytics === true - Rende disponibile bottone "Gestisci preferenze cookie" nel footer

PROMPT IVA 22%: Nel riepilogo carrello e checkout, mostra la scomposizione IVA italiana: Calcolo corretto per prezzi IVA-inclusi (consumer italiano): const ivaRate = 0.22; const totalConIva = cartTotal; // prezzo finale const imponibile = totalConIva / (1 + ivaRate); // base imponibile const ivaAmount = totalConIva - imponibile; // IVA Nel riepilogo ordine mostra: - Subtotale (imponibile): €XX,XX - IVA 22%: €XX,XX - Spedizione: €X,XX (o GRATIS sopra soglia) - Totale: €XX,XX A Stripe passa sempre l'importo in centesimi con IVA inclusa: const amountInCents = Math.round(totalConIva * 100); // Stripe gestisce automaticamente la valuta EUR Nel Stripe Dashboard IT: // Imposta Tax Rates in Stripe per applicare IVA automatica // oppure gestisci tu la scomposizione come sopra