Carnival Bambini
Un magazin online modern și elegant pentru modă infantilă de lux, dotat cu un coș de cumpărături complet funcțional, plăți Stripe, integrare Sanity CMS și mod dark/light.
Integrare Sanity CMS
Gestionarea dinamică a produselor folosind Sanity Headless CMS, permițând adăugarea, editarea și categorisirea ușoară a produselor cu imagini, descrieri și ID-uri de preț Stripe.
Experiență Completă a Coșului
Coș de cumpărături interactiv cu posibilitatea de adăugare/eliminare a produselor, ajustarea cantității, calcularea subtotalului și o interfață modală fluidă susținută de use-shopping-cart.
Integrare Plăți Stripe
Flux de plată securizat prin Stripe, incluzând plata pentru un singur produs sau pentru întregul coș, cu pagini dedicate pentru succes sau eroare.
Galerie de Produse și Categorii
Prezentarea celor mai noi produse, navigare pe categorii și pagini individuale de produs cu galerii de imagini.
Comutator Dark/Light Mode
Schimbarea adaptivă a temei cu next-themes, oferind opțiuni de design elegante pentru modurile dark și light cu tranziții fluide.
Design Responsiv
Layout responsiv de tip mobile-first cu animații personalizate, navigație dropdown, meniu mobil și carduri de produs optimizate pentru toate dimensiunile de ecran.
Carnival Bambini a reprezentat primul meu contact cu domeniul e-commerce. Am inițiat acest proiect din dorința de a explora mecanismele interne ale gestionării de conținut headless și ale tranzacțiilor financiare securizate. Mai exact, am vrut să înțeleg cum gestionează Sanity CMS schemele complexe de produse și cum integrarea plăților Stripe poate fi implementată armonios într-o aplicație Next.js. Rezultatul este o platformă complet dinamică în care catalogul de produse este gestionat prin Sanity, în timp ce procesarea securizată prin Stripe asigură o experiență profesională și de încredere pentru utilizator.
Provocarea și soluția
Principala provocare a fost corelarea dintre un Headless CMS și un sistem de plată în timp real — asigurând sincronizarea datelor despre produse (precum ID-urile de preț Stripe) între Sanity și frontend. Am rezolvat acest lucru prin implementarea unei scheme structurate în Sanity care se mapează direct pe dashboard-ul Stripe, garantând integritatea datelor în timpul plății. În plus, gestionarea stării persistente a unui coș de cumpărături complex între diferite sesiuni a necesitat o implementare robustă a hook-ului use-shopping-cart, pe care l-am integrat cu Next.js 14 App Router pentru a menține o performanță ridicată și o interfață fluidă.