🛒 FreshCart — Premium Online Grocery Store

A full-stack grocery application built with Next.js 16 featuring product browsing, cart management, and order placement.

Tech Stack

• Framework: Next.js 16 (App Router)
• Frontend: React 19 with Client Components
• Backend: Next.js API Routes
• Styling: Vanilla CSS with custom design system
• Data: In-memory store (resets on server restart)

Features

• 🛍️ 30 Products across 8 categories
• 🔍 Category Filtering — browse by Fruits, Vegetables, Dairy, Bakery, Beverages, Snacks, Meat & Seafood, Pantry
• 🛒 Cart Management — add, update quantity, remove items
• 💰 Discount Badges — automatic price calculations for discounted products
• 📦 Checkout Flow — delivery details form with order summary
• ✅ Order Confirmation — success page with order details
• 🌙 Dark Theme — premium emerald-accented UI with glassmorphism
• 📱 Responsive — mobile-first design that works on all screen sizes

Getting Started

# Install dependencies
npm install

# Start dev server
npm run dev

# Open in browser
open http://localhost:3000

API Endpoints

Method	Endpoint	Description
GET	/api/products	All products (optional ?category= filter)
GET	/api/products/:id	Single product
GET	/api/categories	Category list
GET	/api/cart	Cart with enriched product data
POST	/api/cart	Add to cart { productId, quantity }
PUT	/api/cart/:productId	Update quantity { quantity }
DELETE	/api/cart/:productId	Remove item
DELETE	/api/cart	Clear cart
POST	/api/orders	Place order { customerName, address, phone }
GET	/api/orders	All orders
GET	/api/orders/:id	Single order

Project Structure

src/
├── app/
│   ├── api/                    # API Routes
│   │   ├── cart/               # Cart endpoints
│   │   ├── categories/         # Categories endpoint
│   │   ├── orders/             # Orders endpoints
│   │   └── products/           # Products endpoints
│   ├── cart/page.js            # Cart page
│   ├── checkout/page.js        # Checkout page
│   ├── order-confirmation/     # Order success page
│   ├── products/page.js        # Products listing
│   ├── globals.css             # Design system
│   ├── layout.js               # Root layout
│   └── page.js                 # Home page
├── components/                 # Reusable components
│   ├── CartItem.jsx
│   ├── CategoryFilter.jsx
│   ├── Footer.jsx
│   ├── Navbar.jsx
│   ├── ProductCard.jsx
│   └── Toast.jsx
├── data/                       # Data layer
│   ├── products.js             # Product seed data
│   └── store.js                # In-memory store
├── lib/
│   └── api.js                  # API client
└── styles/                     # Component styles
    ├── Cart.css
    ├── Checkout.css
    ├── Footer.css
    ├── Home.css
    ├── Navbar.css
    ├── ProductCard.css
    └── Products.css