kameshwar736/ecommerce-site

Purpose and Runtime

SHOP.CO is a client-facing e-commerce storefront built with Next.js 16 App Router, React, Tailwind CSS, and React Context. It presents a static local product catalog, supports browsing/filtering/detail views, and maintains a browser-persisted cart via LocalStorage. Static media is served from public/products, public/images, and public/icons; no backend, database, payment provider, or external commerce API is represented.

Application Entry and Shell

The App Router routes are rooted in src/app/layout.js, which establishes the shared application shell and global styling from src/app/globals.css. Shared chrome is decomposed into navigation, promotional banner, newsletter, and footer components: src/components/layout/Navbar.jsx, src/components/layout/TopBanner.jsx, and src/components/layout/Footer.jsx.

Route-Level Experience

The home route at src/app/page.js composes marketing and product-discovery sections, notably src/components/home/Hero.jsx, src/components/home/NewArrival.jsx, and src/components/home/TopSelling.jsx. Browsing occurs at src/app/category/page.js; the dynamic product-detail boundary is src/app/product/[id]/page.js, where an ID selects a catalog item. Cart review and modification is isolated to src/app/cart/page.js. Missing routes/items are handled by src/app/notFound.js.

Catalog and Product Discovery

Local catalog records originate in src/data/products.js, with supporting style/testimonial datasets in src/data/dressStyle.js and src/data/testimonialData.js. Category browsing couples src/components/category/FilterSidebar.jsx for filter controls with src/components/category/ProductGrid.jsx for responsive, paginated results. The primary flow is catalog data → product context/filter state → grid/detail links; filtering remains frontend-only rather than querying a service.

Shared State Boundaries

src/contexts/ProductContext.jsx provides product-oriented shared state to home, category, and detail surfaces. src/contexts/CartContext.jsx owns cart mutations, quantities, and LocalStorage synchronization. This is the main client-state boundary: product selection and cart actions propagate through React Context rather than server actions or an API layer.

Product-to-Cart Flow

A user selects a product from category or home listings, navigates to src/app/product/[id]/page.js, chooses variant-related options and quantity, then adds it through cart context. Cart rendering is divided among src/components/carts/CartItems.jsx for line-item updates/removal, src/components/carts/OrderSummary.jsx for totals, and src/components/carts/CouponForm.jsx for coupon UI. There is no checkout or payment execution boundary.

Deployment and Assets

The project is configured as a standard Next.js application through next.config.mjs and is demonstrated on Vercel. Product imagery and UI assets are repository-managed under public/products, public/images, and public/icons, making the application deployable without an asset CDN or runtime content dependency.