How helena141/frozenfood-frontend works
Lezzat is a frozen-food commerce application with customer shopping and account flows, plus an admin panel for operations. The customer journey runs from browsing products through cart and checkout, delivery estimation, payment, and order tracking; customers can also manage profiles. Admin screens cover dashboard reporting, products, customers, and deliveries. The frontend uses a shared API client and persistent auth/cart state. Checkout’s excerpt shows delivery lookup and estimation context, but not every submission or payment call, so those links are omitted where ownership is not visible.
Main entry points: axios.ts API client · page.tsx Product catalog · cart-store.ts Cart state · auth-store.ts Auth state
Components 27
Customer Shopping
- Product catalog
src/app/page.tsx - Product details
src/app/products/[id]/page.tsx - Product card
src/components/shop/product-card.tsx - Cart panel
src/components/shop/cart-panel.tsx - Checkout
src/app/checkout/page.tsx - Order list
src/app/orders/page.tsx - Order tracking
src/app/orders/[id]/page.tsx - QRIS demo
src/components/shop/qris-demo-modal.tsx - Midtrans token API
src/app/api/midtrans/token/route.ts - Shop navigation
src/components/shop/sidebar.tsx
Accounts
- Login
src/app/login/page.tsx - Google login
src/components/auth/google-login-button.tsx - Customer profile
src/app/profile/page.tsx
Admin Operations
- Admin dashboard
src/app/admin/dashboard/page.tsx - Product management
src/app/admin/products/page.tsx - Customer management
src/app/admin/customers/page.tsx - Delivery management
src/app/admin/deliveries/page.tsx - Admin navigation
src/components/admin/admin-sidebar.tsx
App Foundation
- Cart state
src/store/cart-store.ts - Auth state
src/store/auth-store.ts - API client
src/lib/axios.ts - API data types
src/types/api.ts - Query provider
src/components/providers/query-provider.tsx
Other components
- Shopper
- Admin user
- Midtrans
- Commerce backend
Connections 29
- Shopper → Product catalog: browses
src/app/page.tsx - Product catalog → API client: loads products
src/app/page.tsx - Product catalog → Product card: renders
src/app/page.tsx - Product card → Cart state: adds products
src/components/shop/product-card.tsx - Shopper → Product details: views
src/app/products/[id]/page.tsx - Product details → Cart state: adds products
src/app/products/[id]/page.tsx - Cart panel → Cart state: reads and updates
src/components/shop/cart-panel.tsx - Shopper → Checkout: starts checkout
- Checkout → Cart state: reads cart
src/app/checkout/page.tsx - Checkout → API client: requests delivery
src/app/checkout/page.tsx - Order list → API client: loads orders
src/app/orders/page.tsx - Order tracking → API client: loads order
src/app/orders/[id]/page.tsx - QRIS demo → API client: requests payment
src/components/shop/qris-demo-modal.tsx - Midtrans token API → Midtrans: gets token
- Shopper → Login: signs in
src/app/login/page.tsx - Login → API client: authenticates
src/app/login/page.tsx - Google login → API client: authenticates
src/components/auth/google-login-button.tsx - Login → Auth state: stores session
src/app/login/page.tsx - Customer profile → API client: reads and updates
src/app/profile/page.tsx - Customer profile → Auth state: updates user
src/app/profile/page.tsx - Admin user → Admin dashboard: opens panel
- Admin dashboard → API client: loads reports
src/app/admin/dashboard/page.tsx - Product management → API client: manages products
src/app/admin/products/page.tsx - Customer management → API client: manages customers
src/app/admin/customers/page.tsx - Delivery management → API client: manages deliveries
src/app/admin/deliveries/page.tsx - Admin navigation → Auth state: reads session
src/components/admin/admin-sidebar.tsx - Shop navigation → Auth state: reads session
src/components/shop/sidebar.tsx - API client → Commerce backend: sends requests
src/lib/axios.ts - Query provider → Product catalog: provides queries