How aadishsalian/e-commerce works
MATTE is a Next.js commerce storefront styled as a boutique shopping experience. The customer journey spans product discovery and search, product configuration, cart and checkout, then order confirmation and follow-up. Additional product branches include wishlists and sharing, comparison, price history, personalization, and fit guidance; administrative routes manage products and hotspots. The excerpts show selected search, wishlist, and order flows, but not checkout internals or most page wiring, so those connections are omitted. Although the README describes PostgreSQL and Prisma, sampled runtime code also uses local or file-backed data; persistence details are therefore not unified here.
Main entry points: SearchClient.tsx Search UI · useCartStore.ts Cart · search.ts Product Search · useWishlistStore.ts Wishlist Client State
Components 24
Discovery and Catalog
- Search UI
src/app/search/SearchClient.tsx - Product Search
src/lib/search.ts - Product Catalog
src/lib/mockData.ts - Product Detail
src/app/products/[id]/page.tsx - Product Experience
src/components/product
Shopping Tools
- Product Comparison
src/store/useCompareStore.ts - Price History
src/lib/price-history/service.ts - Personalization
src/lib/personalization/service.ts - Fit Guidance
src/components/quiz/FitQuiz.tsx - Wishlist Experience
src/components/wishlist/SharedWishlistClient.tsx - Wishlist Client State
src/store/useWishlistStore.ts - Wishlist API
src/app/api/wishlists/route.ts - Wishlist Service
src/lib/wishlist/service.ts
Cart and Orders
- Cart
src/store/useCartStore.ts - Checkout
src/app/checkout/page.tsx - Order API
src/app/api/orders/[id]/route.ts - Order Service
src/lib/order-confirmation/service.ts - Order Confirmation
src/components/order-confirmation/OrderConfirmationClient.tsx
Commerce Operations
- Hotspot Admin API
src/app/api/admin/hotspots/route.ts - Hotspot Service
src/lib/hotspots/service.ts - Product Admin
src/app/admin/products/page.tsx
App Platform
- Authentication
src/contexts/AuthContext.tsx - Shared UI State
src/store/useUIStore.ts
Other components
- Shopper
Connections 14
- Shopper → Search UI: searches
src/app/search/SearchClient.tsx - Search UI → Product Search: queries
src/app/search/SearchClient.tsx - Product Search → Product Catalog: reads products
src/lib/search.ts - Search UI → Product Detail: links to
src/app/search/SearchClient.tsx - Wishlist Experience → Wishlist Client State: uses state
src/components/wishlist/SharedWishlistClient.tsx - Wishlist Client State → Wishlist API: fetches lists
src/store/useWishlistStore.ts - Wishlist API → Wishlist Service: delegates to
src/app/api/wishlists/route.ts - Wishlist Service → Personalization: moderates names
src/lib/wishlist/service.ts - Cart → Product Catalog: uses product data
src/store/useCartStore.ts - Cart → Checkout: supports checkout
- Order Confirmation → Order API: polls status
src/components/order-confirmation/OrderConfirmationClient.tsx - Order API → Order Service: uses service
src/app/api/orders/[id]/route.ts - Hotspot Admin API → Hotspot Service: uses service
src/app/api/admin/hotspots/route.ts - Authentication → Shared UI State: shows feedback