Implement product page with cart functionality

[fingersandmind]

Summary

Full e-commerce storefront built with Next.js 16 (App Router), TypeScript, and Tailwind CSS v4.

• Product catalog page with responsive grid layout
• Product detail pages with dynamic metadata, star ratings, and stock-aware "Add to Cart"
• Shopping cart with slide-out drawer, quantity controls, and localStorage persistence
• Checkout flow with order summary and confirmation page
• REST API routes for products and cart validation
• Toast notification system for user feedback

Architecture Decisions

Server vs Client Component Split
Pages that only render data (home, product detail, confirmation) use server components by default. Interactive elements (cart drawer, add-to-cart button,
checkout page) are isolated as client components with "use client". This keeps the JS bundle small — only interactive code ships to the browser.

State Management — Context + useReducer
Cart state uses React Context with useReducer rather than a third-party library. For a cart with a small, predictable action set
(add/remove/update/clear/hydrate), this avoids unnecessary dependencies while keeping state transitions explicit and testable. useCallback memoizes
dispatch wrappers to prevent unnecessary re-renders.

localStorage Persistence
Cart hydrates from localStorage on mount and syncs on every change. This gives persistence across page refreshes without needing a database or cookies, and
avoids hydration mismatches by starting with an empty state and hydrating client-side via useEffect.

Static Generation with generateStaticParams
Product detail pages are statically generated at build time since the product catalog is fixed. This gives instant page loads with zero server cost. Dynamic
metadata (generateMetadata) provides proper SEO for each product.

API Route Validation
The POST /api/cart endpoint validates that the product exists and has sufficient stock before confirming the add-to-cart action. This mirrors a real
backend validation layer, even though the data is in-memory.

Performance Optimizations

• next/image with explicit sizes hints for responsive image optimization and lazy loading
• Static generation for all product pages via generateStaticParams — zero runtime server cost
• Loading skeleton (loading.tsx) for product detail page to eliminate layout shift during navigation
• Backdrop blur on cart drawer overlay using CSS (backdrop-blur-sm) instead of JS
• Minimal client JS — server components are the default; only interactive pieces opt into client rendering

Trade-offs

• No database: Product data lives in a static array (lib/products.ts). This simplifies the assessment but means no search, filtering, or pagination. In
  production, this would be backed by a database with proper query capabilities.
• No authentication: The checkout flow doesn't require sign-in. A real implementation would add auth before order placement.
• Client-side cart only: Cart lives in localStorage/Context rather than server-side sessions. This means cart state doesn't sync across devices, but
  avoids the complexity of server-side session management for this scope.
• No payment integration: "Place Order" simply clears the cart and shows a confirmation. A real checkout would integrate Stripe or similar.

Screenshots

Homepage

Product

Cart

Checkout (not included in the assessment, but why not)

Test Plan

• Home page renders product grid
• Product detail page shows correct data, rating, stock info
• Add to Cart respects stock limits and shows toast confirmation
• Cart drawer shows items, updates quantities, removes items, clears cart
• Checkout button navigates to /checkout with correct order summary
• "Place Order" clears cart and redirects to confirmation page
• Visiting /checkout with empty cart redirects to /
• bun run build passes with no errors