How starkdockris/ecom-master works
Purpose and Runtime
This is a Next.js App Router storefront for product browsing, cart management, checkout, order confirmation, policy/content pages, and order tracking. The primary application entry is app/layout.js; the storefront landing route is app/page.js. Styling is globally initialized in app/globals.css.
Route Layer
Server-rendered route segments define the customer-facing site:
• Product catalog and product-detail routes: app/products/page.js, app/products/[slug]/page.js
• Purchase flow: app/cart/page.js, app/checkout/page.js, app/order-confirmation/page.js
• Informational and support routes: app/contact/page.js, app/track-order/page.js, app/about/page.js
SEO crawler endpoints are implemented as App Router modules in app/robots.js and app/sitemap.js.
Backend/API Boundary
app/api/[[...path]]/route.js is a catch-all API route, creating a single internal boundary for browser-to-backend requests. This likely isolates frontend pages and client components from the commerce service’s API shape and credentials.
Commerce access is centralized in lib/wc.js, indicating a WooCommerce-oriented external integration. Product fallback/bootstrap data is held separately in lib/products-seed.js, so product presentation can be decoupled from live backend availability.
Product Data and Presentation Flow
Catalog/detail routes obtain or receive product data, then render reusable product UI:
• Catalog cards: components/products/product-card.jsx
• Interactive detail experience: components/products/product-detail-client.jsx
• Product data/integration modules: lib/products-seed.js, lib/wc.js
The slug route (app/products/[slug]/page.js) is the key boundary between URL identity and product lookup. Client-side detail behavior is intentionally isolated from the route/server layer in components/products/product-detail-client.jsx.
Cart and Checkout State
Cart state is centralized in lib/cart-context.js, rather than being owned independently by product, cart, and checkout pages. The expected control flow is product-detail/card interaction → cart context mutation → cart drawer/cart page → checkout → confirmation.
Global cart access is surfaced through components/layout/cart-drawer.jsx; dedicated purchase stages are represented by app/cart/page.js, app/checkout/page.js, and app/order-confirmation/page.js. This separation makes cart state a cross-page client concern while checkout/order operations remain route-level workflows.
Shared Shell and Client Experience
The site shell is assembled from shared layout components:
• components/layout/header.jsx
• components/layout/footer.jsx
• components/layout/cart-drawer.jsx
Additional global interaction/presentation elements include components/layout/page-loader.jsx, components/layout/whatsapp-button.jsx, and components/layout/mandala-background.jsx. The UI component library under components/ui/ supplies reusable primitives, while components.json, tailwind.config.js, and postcss.config.js indicate a Tailwind-based component styling stack.
Infrastructure and Supporting Boundaries
Next.js configuration is defined in next.config.js; path alias behavior is likely configured through jsconfig.json. The application’s material external dependency is the WooCommerce-like commerce backend accessed via lib/wc.js and exposed to clients through the catch-all API route. Static/public assets and branding guidance reside under public/, including public/LOGO_INSTRUCTIONS.md.
Main entry points: cart-context.js Cart context · page.js Product catalog · wc.js WooCommerce client · layout.js Root layout
Components 18
App Router
Customer routes and crawler endpoints.
- Root layout · Assembles global providers and site chrome.
app/layout.js - Global styles
app/globals.css - Storefront landing
app/page.js - Product catalog
app/products/page.js - Product slug route · Maps URL slugs to product lookup and detail rendering.
app/products/[slug]/page.js - Purchase flow · Cart, checkout, and confirmation stages.
app/cart/page.js - Content & support · Contact, tracking, and about pages.
app/contact/page.js - SEO endpoints · Robots and sitemap responses.
app/robots.js
Shared UI & State
Cross-page shell, product UI, and cart state.
- Site shell · Header, footer, loader, background, and WhatsApp affordance.
components/layout/header.jsx - Cart drawer · Global cart access from the shared shell.
components/layout/cart-drawer.jsx - Product card
components/products/product-card.jsx - Product detail client · Isolates interactive detail behavior from the slug route.
components/products/product-detail-client.jsx - Cart context · Centralized cart state shared across purchase surfaces.
lib/cart-context.js - UI primitives
Commerce Data
Internal API boundary and WooCommerce access.
- Catch-all API · Internal browser-to-commerce boundary.
app/api/[[...path]]/route.js - WooCommerce client · Centralized external commerce access.
lib/wc.js - Product seed data · Bootstrap or fallback product data.
lib/products-seed.js - Commerce backend · WooCommerce-oriented product and order service.
Connections 19
- Root layout → Global styles: initializes
- Root layout → Site shell: assembles
- Root layout → Cart context: provides
- Site shell → Cart drawer: includes
- Cart drawer → Cart context: reads and mutates
- Storefront landing → Product catalog: leads to
- Product catalog → Product card: renders
- Product catalog → WooCommerce client: loads products
- Product catalog → Product seed data: falls back to
- Product slug route → WooCommerce client: looks up slug
- Product slug route → Product detail client: renders
- Product detail client → Cart context: adds items
- Product card → Cart context: adds items
- Cart context → Purchase flow: drives cart and checkout
- Purchase flow → Catch-all API: submits commerce requests
- Catch-all API → WooCommerce client: delegates
- WooCommerce client → Commerce backend: calls
- Product card → UI primitives: uses
- Product detail client → UI primitives: uses