Chogan Catalog
Responsive web catalog for Chogan products, with protected access, variants and pricing, media galleries, filtering, a local cart, WhatsApp ordering, and dedicated administration.
Core stack
The challenge
The catalog had to correctly represent products that don't all share the same structure: perfumes can have multiple volumes and codes, other types may or may not have a mandatory volume or price, and images need to be managed and ordered separately. At the same time, the experience had to stay simple on mobile and preserve a conversation-based commercial flow, without artificially introducing a checkout or an account system.
The solution
I separated the React catalog from the Express API and modeled the product in Prisma through Perfume, Variant, ProductType, and PerfumeImage. Zod and ProductType-dependent validations check the payloads, and operations that replace variants or reorder media use transactions. The frontend normalizes both the current variant-based shape and the legacy data, keeps the cart in localStorage, and generates the WhatsApp message from the selection. For administration there is product CRUD, type configuration, multiple upload, cover selection, and image reordering. Catalog access is separate from admin authentication, and deployment is automated through SSH scripts with build and smoke checks.
Notable complexity
Chogan Catalog is a full-stack web application built to present and operate a commercial catalog that spans multiple product categories, variants with different rules, images, and prices. The customer experience covers protected catalog access, category browsing, search, pagination, a product page with a gallery and variant selection, similar products, and a persistent local cart. Ordering is not treated as a standalone e-commerce checkout: the selection is turned into a pre-filled WhatsApp message to continue the conversation with the consultant. The administration area allows managing products, variants, product types, and galleries, and the backend validates the variant rules and persists the data through Prisma into a SQLite database.
Key results
- Web catalog with a landing page, paginated category listing, and a product page with variants, media gallery, and products from the same category.
- Local cart with aggregation by code, quantities, and an estimated total, followed by sending the selection through a pre-filled WhatsApp message.
- Admin panel for creating, editing, and deleting products, including a variant editor and feedback for the API's validation errors.
- Configurable product types, with persisted rules for mandatory volume and optional price.
- Galleries with multiple upload, a main image, deletion, and reordering persisted transactionally.
- Relational data model with constraints for codes, cascade/restrict relations, and indexes for categories, brand, variants, and image order.
- Operational scripts for populating the catalog and associating images from import sources, including processing an import catalog PDF.
- Unit test suites for the cart, formatting, and the variant editor, plus Playwright scenarios for the product page.
Related projects
- CreativeSys AutoA custom online store with simple and variable products, a dynamic catalog and filters, checkout, EuPlătesc payments, commercial documents, full administration, and a separate quoting flow for car paint.
- Ghici Cine (Guess Who)A multiplayer browser party game with private rooms, words submitted by participants, real-time synchronized turns, per-player filtered state, and reconnection to the active session.
- Vedete & Inițiale (Celebrities & Initials)A multiplayer web app for TOMAPAN (categories/initial-letter) rounds in private rooms, with an access code, configurable categories, a shared letter, a timer, scoring for unique or duplicate answers, and real-time synchronization between players.
Want something similar?
Start with the estimate wizard — answer a few questions and get a realistic price range and timeline.