E-commerce Demo

A simple e-commerce demo built with Next.js 14 using the App Router, featuring a product catalog, shopping cart, and checkout flow.

Features

✅ Static Product List - Hard-coded products with images, names, and prices
✅ Add to Cart - Click to add products to your cart
✅ Cart Management - View cart items, adjust quantities, remove items
✅ Checkout Flow - "Pay Now" button clears cart and shows success message
✅ Local Storage - Cart persists between browser sessions
✅ Cart Counter - Header shows total number of items in cart
✅ Responsive Design - Works on desktop and mobile devices

Tech Stack

• Next.js 14 with App Router
• React 18 with JSX (no TypeScript)
• Tailwind CSS for styling
• Local Storage for cart persistence

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser: Navigate to http://localhost:3000

Project Structure

app/
├── layout.jsx          # Root layout with header and navigation
├── page.jsx           # Product list page
├── globals.css        # Global styles with Tailwind
├── cart/
│   └── page.jsx       # Shopping cart page
└── success/
    └── page.jsx       # Payment success page

components/
├── ProductCard.jsx    # Individual product display
└── CartItem.jsx      # Cart item with quantity controls

lib/
├── products.js       # Hard-coded product data
└── cart.js          # Cart utilities and localStorage helpers

How It Works

1. Product Page (/) - Displays all available products in a grid layout
2. Add to Cart - Clicking "Add to Cart" adds the product to localStorage
3. Cart Page (/cart) - Shows all cart items with quantity controls and total
4. Checkout - "Pay Now" button clears the cart and redirects to success page
5. Success Page (/success) - Confirmation message with link back to products

Features Implemented

Core Features

• ✅ Static product list with 6 sample products
• ✅ Add to cart functionality
• ✅ Cart page with item management
• ✅ Quantity adjustment (+/- buttons)
• ✅ Remove individual items
• ✅ Total price calculation
• ✅ "Pay Now" checkout flow
• ✅ Success page with confirmation

Optional Features

• ✅ Cart counter in header
• ✅ Remove buttons for each cart item
• ✅ LocalStorage persistence
• ✅ Responsive design with Tailwind CSS
• ✅ Clean, modern UI

Sample Products

The demo includes 6 general products with Indian Rupee pricing:

• Red Shirt (₹899)
• Blue Jeans (₹1,299)
• Sneakers (₹1,899)
• Black Hoodie (₹4,599)
• White Cap (₹599)
• Green Backpack (₹799)

All product images are sourced from Unsplash for demonstration purposes.

Browser Support

This demo works in all modern browsers that support:

• ES6+ JavaScript features
• Local Storage API
• CSS Grid and Flexbox

Development

To modify the products, edit lib/products.js. To customize styling, modify the Tailwind classes in the component files.