NusaComputer Storefront

A modern, headless e-commerce storefront for a computer store. It sells laptops, custom-built PCs, graphics cards, processors, monitors, storage, and accessories.

The frontend is built with Next.js and is designed to run on top of WordPress + WooCommerce as the backend. Products, categories, prices, stock, and the cart all come from WooCommerce through its public Store API, while the shopper-facing UI is a fast, fully custom React application.

Demo mode: if WORDPRESS_URL is not set, the app runs with built-in sample products and a cookie-based cart, so you can preview the whole storefront without any backend.

---

Features

• Home page with hero, category grid, store benefits, flash-sale products, custom-PC banner, and popular products
• Product listing with category filters, keyword search, and a "deals" (on-sale) filter
• Product detail page with image, price and discount badge, stock status, specifications, description, and related products
• Shopping cart (add, change quantity, remove) with optimistic UI updates
• Checkout handed off to WooCommerce (/checkout on the WordPress site)
• SEO: dynamic metadata, Open Graph / Twitter cards, JSON-LD (OnlineStore, Product), sitemap.xml, and robots.txt
• Security headers (HSTS, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy)
• Responsive layout and accessible markup (ARIA labels, semantic landmarks, screen-reader text)
• All prices displayed in USD

---

Tech Stack

Backend (headless CMS and commerce)

Technology	Role
WordPress	Content and catalog management
WooCommerce	Products, categories, inventory, pricing, cart, and checkout
WooCommerce Store API (/wp-json/wc/store/v1)	Public REST API the storefront uses to read products and manage the cart

Frontend

Technology	Role
Next.js 16 (App Router)	Framework: server components, routing, API route handlers, metadata, sitemap
React 19	UI library
TypeScript	Type safety
Tailwind CSS 4	Styling (via @tailwindcss/postcss)
shadcn/ui + Base UI	Accessible UI primitives (Button, Badge, Input, Separator)
class-variance-authority, clsx, tailwind-merge	Component variants and class merging
tw-animate-css	Animation utilities
Lucide React	Icons
SWR	Client-side cart state and data fetching
next/font (Inter, Space Grotesk)	Typography
Vercel Analytics	Production analytics (enabled only when NODE_ENV=production)

Tooling

• pnpm as the package manager
• Generated and scaffolded with v0

---

How It Works

Browser ──► Next.js storefront ──► WooCommerce Store API ──► WordPress / WooCommerce
              (this repo)            /wp-json/wc/store/v1

• Catalog: server components fetch products and categories from the Store API and cache them for 5 minutes (revalidate: 300).
• Cart: the browser talks only to the Next.js route /api/cart. That route proxies requests to the Store API and stores WooCommerce's Cart-Token in an httpOnly cookie, so the token is never exposed to client-side JavaScript.
• Checkout: the "Proceed to checkout" button sends the shopper to WORDPRESS_URL/checkout.
• Demo mode: without WORDPRESS_URL, lib/woocommerce.ts and lib/cart.ts fall back to lib/demo-catalog.ts. The demo cart lives in a cookie, and prices are always resolved server-side.

---

Project Structure

app/
  api/cart/route.ts        Cart API (GET cart, POST add / update / remove)
  products/                Product listing and product detail pages
  cart/                    Shopping cart page
  layout.tsx               Root layout, fonts, metadata, providers
  page.tsx                 Home page
  sitemap.ts, robots.ts    SEO files
components/
  store/                   Storefront components (header, hero, product card, cart, ...)
  ui/                      shadcn/ui primitives
lib/
  woocommerce.ts           WooCommerce Store API client + demo-mode switch
  cart.ts                  Cart logic (WooCommerce and demo)
  demo-catalog.ts          Sample products and categories
  format.ts                USD price formatting and discount helper
  types.ts                 Shared TypeScript types
public/images/             Hero and product images

---

Getting Started

Prerequisites

• Node.js 20+ and pnpm
• (Optional) a WordPress site with WooCommerce installed

Install and run

pnpm install
pnpm dev

Open http://localhost:3000. With no environment variables set, the store runs in demo mode.

Production build

pnpm build
pnpm start

---

Connecting to WordPress / WooCommerce

1. Set up WooCommerce on your WordPress site (HTTPS is recommended, and required for the cart cookie).

2. Set the store currency to USD: WooCommerce → Settings → General → Currency. The storefront formats all prices as USD.

3. Create product categories and use these slugs if you want the built-in icons and links to work: laptop, custom-pc, graphics-cards, processors, monitor, storage, accessories. Other categories work too and are listed automatically (with a default icon).

4. Copy the example env file and fill it in:

   cp .env.example .env.local

   Variable	Description
   WORDPRESS_URL	Base URL of your WordPress site, without a trailing slash. Leave empty for demo mode.
   NEXT_PUBLIC_SITE_URL	Public URL of this storefront. Used for SEO metadata, the sitemap, and robots.txt.

5. Restart the dev server. Products, categories, and the cart now come from WooCommerce.

Tip: product attributes defined in WooCommerce are shown as the "Specifications" table on the product page.

---

Deployment

The project deploys easily to Vercel. Add WORDPRESS_URL and NEXT_PUBLIC_SITE_URL as environment variables in your project settings. Any platform that supports Next.js (Node.js hosting, Docker, etc.) also works.

---

Notes

• Brand name, demo copy, shipping threshold, and installment text are placeholders. Edit them in components/store/ and app/layout.tsx.
• The cart cookie uses SameSite=None; Secure, so the cart requires HTTPS outside of localhost.