A modern, responsive e-commerce web app built with Next.js — browse products by category, search, view detailed product pages, manage your cart, and check out, all wrapped in a clean purple-accented UI with smooth entrance animations.
- 🔐 Authentication via Clerk (sign-in, session-aware welcome/logout toasts)
- 🛒 Persistent cart (localStorage-backed) with quantity controls
- 🔍 Case-insensitive live search across title and category
- 🗂️ Category tabs with auto-scrolling carousel
- 📦 Dynamic product detail pages with reviews and star ratings
- 💳 Checkout flow with order confirmation
- 🔔 Toast notifications for cart actions, auth events, and fetch errors (react-hot-toast)
- 📱 Fully responsive across mobile, tablet, and desktop
- ✨ Subtle CSS entrance animations (wipe, fade-up, scale-pop) on page headings
- Framework: Next.js 16 (App Router)
- UI: React 19, Tailwind CSS v4
- Auth: Clerk
- HTTP: Axios
- Icons: Lucide React
- Notifications: react-hot-toast
- Data Source: DummyJSON Products API
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Add your Clerk keys to .env.local (see below)
# Run the dev server
npm run devOpen http://localhost:3000 to view the app.
# Clerk authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-in
# Product data (DummyJSON)
NEXT_PUBLIC_PRODUCTS=https://dummyjson.com/products
NEXT_PUBLIC_CATEGORIES=https://dummyjson.com/products/categories| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
app/
(shop)/ # Storefront routes: home, about, cart, checkout, collections, contact, detail/[id]
sign-in/ # Clerk auth route
components/ # Reusable UI: Card, Navbar, Footer, Tab, StarRating
context/ # Global state (Context.jsx) and cart logic (useCartItem.jsx)
This project is private and not licensed for public use.