Chogan Catalog
Catalog web responsive pentru produse Chogan, cu acces protejat, variante și prețuri, galerii media, filtrare, coș local, comandă prin WhatsApp și administrare dedicată.
Stack principal
Provocarea
Catalogul trebuia să reprezinte corect produse care nu au toate aceeași structură: parfumurile pot avea mai multe volume și coduri, alte tipuri pot avea sau nu volum ori preț obligatoriu, iar imaginile trebuie administrate și ordonate separat. În același timp, experiența trebuia să rămână simplă pe mobil și să păstreze un flux comercial bazat pe conversație, fără a introduce artificial un checkout sau un sistem de conturi.
Soluția
Am separat catalogul React de API-ul Express și am modelat produsul în Prisma prin Perfume, Variant, ProductType și PerfumeImage. Zod și validările dependente de ProductType verifică payload-urile, iar operațiile care înlocuiesc variantele sau reordonează media folosesc tranzacții. Frontend-ul normalizează atât forma curentă bazată pe variante, cât și datele legacy, păstrează coșul în localStorage și generează mesajul WhatsApp din selecție. Pentru administrare există CRUD de produse, configurare de tipuri, upload multiplu, alegerea cover-ului și reordonarea imaginilor. Accesul la catalog este separat de autentificarea administratorului, iar deploymentul este automatizat prin scripturi SSH cu build și smoke checks.
Complexitate notabilă
Chogan Catalog este o aplicație web full-stack construită pentru prezentarea și operarea unui catalog comercial care are mai multe categorii de produse, variante cu reguli diferite, imagini și prețuri. Experiența pentru client acoperă accesul protejat la catalog, navigarea pe categorii, căutarea, paginarea, pagina de produs cu galerie și selectarea variantei, produse similare și un coș persistent local. Comanda nu este tratată ca un checkout e-commerce propriu: selecția este transformată într-un mesaj WhatsApp precompletat pentru continuarea conversației cu consultantul. Zona de administrare permite gestionarea produselor, variantelor, tipurilor de produs și galeriilor, iar backend-ul validează regulile de variantă și persistă datele prin Prisma într-o bază SQLite.
Rezultate cheie
- Catalog web cu landing, listare paginată pe categorii și pagină de produs cu variante, galerie media și produse din aceeași categorie.
- Coș local cu agregare pe cod, cantități și total estimativ, urmat de trimiterea selecției printr-un mesaj WhatsApp precompletat.
- Panou administrator pentru creare, editare și ștergere produse, inclusiv editor de variante și feedback pentru erorile de validare ale API-ului.
- Tipuri de produs configurabile, cu reguli persistate pentru volum obligatoriu și preț opțional.
- Galerii cu upload multiplu, imagine principală, ștergere și reordonare persistată tranzacțional.
- Model de date relațional cu constrângeri pentru coduri, relații cascade/restrict și indexuri pentru categorii, brand, variante și ordinea imaginilor.
- Scripturi operaționale pentru popularea catalogului și asocierea imaginilor din surse de import, inclusiv procesarea unui catalog PDF.
- Suite de teste unitare pentru coș, formatare și editorul de variante, plus scenarii Playwright pentru pagina de produs.
Proiecte asemănătoare
- CreativeSys AutoMagazin online personalizat cu produse simple și variabile, catalog și filtre dinamice, checkout, plăți EuPlătesc, documente comerciale, administrare completă și un flux separat de ofertare pentru vopsea auto.
- Ghici CineJoc de petrecere multiplayer în browser, cu camere private, cuvinte propuse de participanți, ture sincronizate în timp real, stare filtrată pentru fiecare jucător și reconectare la sesiunea activă.
- Vedete & InițialeAplicație web multiplayer pentru runde TOMAPAN în camere private, cu cod de acces, categorii configurabile, literă comună, timer, scor pentru răspunsuri unice sau duplicate și sincronizare real-time între jucători.
Vrei ceva similar?
Începe cu wizard-ul de estimare — răspunzi la câteva întrebări și primești un range de preț + timeline realist.