Shopcart is a modern, full‑featured e‑commerce web application built with Next.js App Router, TypeScript, Tailwind CSS v4, Zustand state management, and Sanity CMS as a headless backend.
It provides a complete shopping experience: product listing, filters, product details, cart, wishlist, orders, blog, and secure checkout powered by Stripe.

• Framework: Next.js app router (next@16)
• Language: TypeScript
• Frontend Library: React (react@19, react-dom@19)
• Styling:
  • Tailwind CSS v4
  • CSS Modules / global styles (app/globals.css)
  • styled-components for component‑level styling
• UI Components:
  • shadcn/ui component library
  • Custom UI system in components/ui/*
  • Icons: lucide-react, react-icons
• State Management: Zustand (lib/store.ts)
• Authentication: Clerk (@clerk/nextjs)
• Content & CMS:
  • Sanity (sanity, next-sanity)
  • Structured schemas for products, categories, brands, blogs, orders, addresses, etc.
• Payments:
  • Stripe (stripe, lib/stripe.ts)
  • Checkout session via actions/createCheckoutSession.ts
• Utilities & UX:
  • dayjs for date formatting
  • react-hot-toast for notifications
  • clsx, class-variance-authority, tailwind-merge for class composition
  • embla-carousel-react & motion for carousels/animations

• app/
  • (client)/
    • page.tsx – Home page
    • shop/page.tsx – Shop & product listing
    • product/[slug]/page.tsx – Product details
    • cart/page.tsx – Cart page
    • wishlist/page.tsx – Wishlist
    • orders/page.tsx – Orders
    • success/page.tsx – Checkout success
    • deal/page.tsx – Deals
    • blog/page.tsx & blog/[slug]/page.tsx – Blog index & detail
    • brand/[slug]/page.tsx – Brand‑specific products
    • category/[slug]/page.tsx – Category‑specific products
    • api/webhook/route.ts – Stripe webhook handler
  • studio/[[...tool]]/page.tsx – Embedded Sanity Studio
  • layout.tsx, not-found.tsx – App layout & 404
• components/
  • Core UI: NavBar, Footer, SideMenu, MobileMenu, SearchBar, SignIn, etc.
  • Commerce: ProductCard, ProductGrid, AddtoCartButton, QuantityButtons, WishListProducts, OrdersComponent, OrderDetailDialog, etc.
  • Home: home/HomeBanner, HomeCategories, ShopByBrands, LatestBlog, etc.
  • Shop filters: shop/BrandList, CategoryList, PriceList
  • Shared UI primitives in components/ui/*
• lib/
  • store.ts – Global state with Zustand
  • stripe.ts – Stripe server utilities
  • utils.ts – helpers & utilities
• sanity/
  • schemaTypes/* – Sanity schemas for all entities
  • queries/* – Sanity GROQ queries
  • lib/* – Sanity clients & image builders

• Modern storefront
  • Home page with hero banner, featured categories, and brands
  • Dedicated shop page with filters (brand, category, price)
  • Product detail pages with rich content and characteristics
• Cart & Wishlist
  • Add/remove items from cart and wishlist
  • Quantity management and price calculations
  • Empty cart state handling
• Orders & Checkout
  • Stripe‑based checkout flow (createCheckoutSession)
  • Order tracking & order list page
  • Success page after payment
• Content & Blog
  • Blog listing and detail pages powered by Sanity
  • Brand & category‑specific content
• Authentication & Access
  • Clerk‑based authentication integration
  • Protected user areas (orders, possibly wishlist/cart sync)
• Responsive UI
  • Fully responsive layout with mobile menu & side navigation
  • Accessible components built with shadcn/ui

All UI screenshots are expected to be stored under public/app/<page-name>.<ext>.
Once you add the image files with these names, they will render directly in the README.

• Node.js >= 18
• npm (or pnpm / yarn)
• A Stripe account & API keys
• A Sanity project (Project ID, dataset, tokens)
• A Clerk account and application keys

npm install

Create a .env.local file in the project root and configure values such as (adjust to your actual env names):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_READ_TOKEN=your_sanity_read_token

STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

NEXT_PUBLIC_APP_URL=http://localhost:3000

Check the sanity/ and lib/stripe.ts files to align env variable names with your configuration.

npm run dev

Open http://localhost:3000 in your browser to see the app.

• npm run dev – Start the Next.js development server
• npm run build – Create an optimized production build
• npm run start – Start the production server
• npm run lint – Run ESLint
• npm run typegen – Generate Sanity schema types

• Type Safety: TypeScript configuration via tsconfig.json
• Linting: ESLint with eslint-config-next
• Styling: Tailwind CSS v4 with @tailwindcss/postcss and tw-animate-css

You can integrate additional tools like Playwright, Cypress, or Jest/RTL if you want more automated tests.

• The project is optimized for deployment on platforms that support Next.js, such as:
  • Vercel
  • Netlify
  • Render / custom Node servers
• Make sure to configure your environment variables and Stripe webhooks in the hosting provider dashboard.

This project is licensed under the MIT License.

You are free to use this code for learning, personal, and commercial projects.
Attribution is appreciated but not required.