ShopNow - E-Commerce Frontend

Pakistan's Favorite Online Store

A modern, full-featured e-commerce frontend built with Next.js, TypeScript, and Tailwind CSS.

---

Screenshots

---

Features

Customer

• Product browsing with search, category filtering, and pagination
• Product detail page with image gallery, size & color selectors
• Shopping cart with coupon code support
• Checkout with address management
• Order tracking and history
• Wishlist and product reviews
• WhatsApp integration for quick inquiries
• Live viewer count and recent sales display

Admin Panel

• Dashboard with revenue, orders, and analytics
• Product management with multi-image upload (up to 15) and camera capture
• Dynamic sizes (S/M/L/XL) and color options per product
• Order status management (Pending → Confirmed → Shipped → Delivered)
• Category and coupon management

---

Tech Stack

---

Getting Started

Prerequisites

• Node.js 18+
• Backend API running (shopnow-ecommerce-backend)

Installation

git clone https://github.com/AbdullahNaseemAbbasi/shopnow-frontend.git
cd shopnow-frontend
npm install

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:8080

Run Development Server

npm run dev

Open http://localhost:3000

---

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── admin/              # Admin panel (dashboard, products, orders, categories, coupons)
│   ├── auth/               # Login & Register
│   ├── cart/               # Shopping cart
│   ├── checkout/           # Checkout flow
│   ├── orders/             # Order history & tracking
│   ├── products/           # Product listing & detail
│   ├── profile/            # Address management
│   ├── dashboard/          # User dashboard
│   └── wishlist/           # Wishlist
├── components/             # Reusable components (Navbar, Footer, ProductCard, etc.)
├── store/                  # Zustand stores (auth, cart)
├── lib/                    # API client, utilities
└── types/                  # TypeScript interfaces

---

Deployment

Deployed on Vercel with automatic deployments from the main branch.

NEXT_PUBLIC_API_URL=https://your-backend-url.railway.app

---

Built by Abdullah Naseem Abbasi