Coovi Storefront

The customer-facing storefront for Coovi, an online saree shop serving customers across Bangladesh. Shoppers browse products, keep a guest cart in the browser, check out with Cash on Delivery, and track orders by order number and phone.

Built with Next.js 16 (App Router), React 19, Tailwind CSS 4 and Zustand.

Getting started

Requires Node.js 20.9+ and pnpm 10.28.2 (pinned via packageManager).

pnpm install
pnpm dev

Open http://localhost:3000. The storefront needs the Coovi API running; by default it calls http://localhost:5000/api.

Environment variables

Set these in .env.local:

Variable	Default	Purpose
NEXT_PUBLIC_API_URL	http://localhost:5000/api	Base URL of the Coovi API
NEXT_PUBLIC_SITE_URL	http://localhost:3000	Public site URL, used for metadata, the sitemap and WhatsApp share links
NEXT_PUBLIC_WHATSAPP_NUMBER	8801700000000 (placeholder)	Fallback WhatsApp number, digits in international format, used until shop settings load from the API. The real number is set on the admin Settings page
STOREFRONT_API_KEY	none	Server-only secret, equal to STOREFRONT_API_KEY on the API; gives this storefront's server its own rate limit

Scripts

Command	What it does
pnpm dev	Start the development server
pnpm build	Production build
pnpm start	Serve the production build
pnpm lint	Run ESLint
pnpm typecheck	Generate Next.js route types (next typegen), then run tsc --noEmit
pnpm test	Run the test suite once
pnpm test:watch	Run tests in watch mode
pnpm coverage	Run tests with a coverage report (written to coverage/, open coverage/index.html)

Testing

Tests use Vitest and live next to the code they cover as *.test.ts(x). The default environment is Node; files that need browser APIs opt in with a // @vitest-environment jsdom comment at the top (see lib/cartStore.test.ts).

Covered today, at 100% line and branch coverage:

• lib/api.ts: request URLs and query params, error and timeout handling, and that orders send only product IDs and quantities
• lib/cartStore.ts: cart actions, localStorage persistence, totals and counts
• lib/utils.ts: price formatting
• lib/site.ts: site URL, Open Graph and WhatsApp link helpers
• lib/useDialog.ts: Escape, focus trap, scroll lock and focus return for dialogs

Component tests use React Testing Library; components/CartDrawer.test.tsx covers the cart drawer's dialog behaviour. Other components and pages are not tested yet.

Continuous integration

GitHub Actions (.github/workflows/ci.yml) runs on every pull request and on pushes to master, as three parallel jobs:

• Lint: pnpm lint
• Typecheck: pnpm typecheck
• Test: pnpm coverage, with the coverage report uploaded as a build artifact for 14 days

Project structure

app/          Routes: home (in the (home) route group), saree, sale,
              products/[slug], cart, checkout,
              order-confirmation/[orderNumber], track-order,
              track-order/[orderNumber], about, contact, policy pages.
              Each route has its own loading.tsx, built from components/Skeleton.tsx
components/   UI components (cart drawer, filters, product card, gallery, ...)
lib/
  api.ts        API client (fetch with a 60s timeout on the server, 30s in the browser)
  cartStore.ts  Zustand guest cart, persisted to localStorage as "coovi-cart"
  types.ts      Shared types for products, cart items and orders
  utils.ts      Formatting helpers

How the cart and checkout work

The cart lives only in the browser. At checkout the storefront sends the customer's details plus product IDs and quantities, and nothing else. The API is authoritative for prices, stock, delivery fees and totals, and recomputes them from its own database. The API contract shared with the other Coovi apps is ../API_ENDPOINTS.md.

Deployment

Any Next.js host works. Run pnpm build and pnpm start, or deploy to Vercel. Set the environment variables above in production. Product images are allowed from res.cloudinary.com (photos uploaded in the admin), images.pexels.com, images.unsplash.com and picsum.photos (see next.config.ts).