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-up
# 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 |
nextjs-ecommerce/
├── app/
│ ├── (shop)/
│ │ ├── about/
│ │ │ └── page.jsx
│ │ ├── cart/
│ │ │ └── page.jsx
│ │ ├── checkout/
│ │ │ └── page.jsx
│ │ ├── collections/
│ │ │ └── page.jsx
│ │ ├── contact/
│ │ │ └── page.jsx
│ │ ├── detail/
│ │ │ └── [id]/
│ │ │ └── page.jsx
│ │ ├── layout.jsx
│ │ ├── loading.jsx
│ │ └── page.jsx
│ ├── sign-in/
│ │ └── [[...sign-in]]/
│ │ └── page.jsx
│ ├── sign-up/
│ │ └── [[...sign-up]]/
│ │ └── page.jsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── icon.svg
│ ├── layout.jsx
│ ├── not-found.jsx
│ └── providers.jsx
├── components/
│ ├── Card.jsx
│ ├── Footer.jsx
│ ├── Navbar.jsx
│ ├── StarRating.jsx
│ └── Tab.jsx
├── context/
│ ├── Context.jsx
│ └── useCartItem.jsx
├── public/
├── .env.local
├── .gitignore
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── proxy.js
└── README.md
This project is private and not licensed for public use.