A production-style storefront built with Next.js 15 (App Router), React 19, TypeScript, Sanity as the headless CMS, Clerk for authentication, and bKash + cash on delivery for checkout—with an admin flow to verify manual payments.
Live demo: ecommerce-hut-rouge.vercel.app
- Storefront: Clean, responsive layout—sticky header with search, basket badge, and sign-in; hero carousel with category CTAs; product grid with category filter and stock hints.
- Product pages: Sanity-driven imagery and rich text descriptions; add/remove quantity in the basket from the grid.
- Basket & checkout: Signed-in users can place orders; bKash flow collects transaction details for manual verification; orders surface in My Orders after checkout.
- Content: Products, categories, and orders live in Sanity; optional draft mode and live preview for editors.
| Area | Preview |
|---|---|
| Home |  |
| Basket |  |
| Orders |  |
| Sanity Studio |  |
- Browse — Home, shop, categories, search, and product detail pages load data from Sanity.
- Basket — Client state is stored with Zustand (
persist) so the cart survives refresh; safe on the server wherelocalStorageis unavailable or misconfigured. - Auth — Clerk protects routes that need a user (e.g. checkout, orders); middleware aligns with Clerk’s matchers.
- Checkout — Server actions create an order document in Sanity. COD completes in one step; bKash redirects to instructions and collects trx / sender info via API routes.
- Verification — Admins review submissions (e.g.
/admin/payments+ API) and update order payment status in Sanity. - Content — Editors use Sanity Studio at
/studiofor products, categories, and schema-defined content.
| Layer | Choice |
|---|---|
| Framework | Next.js 15, App Router, Turbopack (npm run dev) |
| UI | Tailwind CSS v4, Radix UI, lucide-react, Framer Motion |
| CMS | Sanity (next-sanity, embedded Studio) |
| Auth | Clerk (@clerk/nextjs) |
| Client state | Zustand + persist (basket) |
| Payments | bKash (manual verify) + cash on delivery |
EcommerceHut/
├── actions/ # Server actions (e.g. create order / bKash flow)
├── public/
│ └── screenshort/ # README / marketing screenshots
├── src/
│ ├── app/
│ │ ├── (store)/ # Store routes: /, /shop, /basket, /orders, …
│ │ ├── api/ # REST handlers (orders, payment verify, admin)
│ │ └── studio/ # Sanity Studio
│ ├── components/ # Header, Hero, ProductGrid, UI primitives
│ ├── sanity/ # Client, queries, schemas, live fetch
│ ├── store/ # Zustand basket store
│ └── instrumentation.ts # Dev-safe fix for broken Node `localStorage` (optional tooling)
├── sanity.config.ts
└── package.json
| Route | Purpose |
|---|---|
/ |
Home + featured products |
/shop, /categories, /categories/[slug] |
Browse by category |
/product/[slug] |
Product detail |
/search |
Search |
/basket |
Cart & checkout |
/bkash-payment, /success |
Post-checkout flows |
/orders |
Authenticated order history |
/admin/payments |
Payment review (admin) |
/studio |
Sanity Studio |
API routes under src/app/api/ support order fetch, payment verification, and admin payment updates.
Create .env.local (see also SETUP_INSTRUCTIONS.md for bKash/Sanity details). Typical keys:
- Sanity:
NEXT_PUBLIC_SANITY_PROJECT_ID,NEXT_PUBLIC_SANITY_DATASET,SANITY_API_TOKEN(editor/write),SANITY_API_READ_TOKEN(live/preview where used),NEXT_PUBLIC_SANITY_API_VERSION - App URL:
NEXT_PUBLIC_BASE_URL,VERCEL_URL(deployment) - Clerk:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,CLERK_SECRET_KEY - bKash (display):
NEXT_PUBLIC_BKASH_NUMBER,NEXT_PUBLIC_BKASH_MERCHANT_NAME
Never commit secrets; keep .env.local gitignored.
npm install
npm run dev # Next dev (Turbopack)
npm run build # Production build
npm run start # Production server
npm run lint
npm run typegen # Sanity schema extract + typegen (when you change schemas)Configured for Vercel: connect the repo, set environment variables, and deploy. The live site above reflects the current production build.
Tanvir Ahamed — LinkedIn
Private project unless otherwise specified.