🛍️ NEXTSHOPP

Next-Generation E-Commerce Platform

🌐 Live Demo: https://nextshopp-azure.vercel.app/

Built solo by Shivam Indore GitHub: https://github.com/indoreshivam2006 Portfolio: https://shivamindoreportfolio.vercel.app

A blazing-fast, modern e-commerce platform built with cutting-edge technologies for the 2025 retail landscape.

Live Demo · Report Bug · Request Feature

🎯 Overview

NEXTSHOPP is a production-ready, full-stack e-commerce solution designed for scalability, performance, and exceptional user experience. Built with Next.js 15 and React 19, it leverages the latest web technologies including Server Components, Streaming SSR, and the App Router for optimal performance.

Why NEXTSHOPP?

Challenge	Our Solution
Slow page loads	Server Components + Streaming SSR
Poor mobile UX	Mobile-first responsive design
Complex state management	React Context + Local persistence
Limited animations	GSAP + Framer Motion integration
Authentication complexity	Firebase Auth with Google OAuth

✨ Key Features

🛒 Shopping Experience Smart Product Catalog with advanced filtering & sorting Real-time Cart Management with persistent storage Wishlist Functionality for saved items Product Image Galleries with zoom capabilities Related Products recommendation engine	🔐 Authentication & Security Firebase Authentication integration Google OAuth single sign-on Email/Password authentication Protected Routes with auth guards Session Management with auto-refresh
💳 Checkout & Orders Multi-step Checkout flow Multiple Payment Methods support Order History tracking Real-time Order Status updates Address Management system	🎨 UI/UX Excellence 60+ Custom UI Components (shadcn/ui) Smooth Page Transitions with GSAP Interactive Animations with Framer Motion Dark/Light Theme support Responsive Mobile Navigation

Additional Features

📊 Product Statistics Dashboard with Recharts visualizations
🗺️ Interactive Store Locator with Google Maps API
📧 Newsletter Subscription system
🏷️ Category-based Navigation with smart filtering
📱 PWA-ready architecture
♿ Accessibility-first component design

🛠️ Tech Stack

Frontend

Technology	Purpose
	React Framework with App Router
	UI Library with Server Components
	Type Safety & Developer Experience
	Utility-first Styling

UI Components & Animation

Technology	Purpose
	Accessible UI Primitives
	Pre-built Component Library
	Professional Animations
	Declarative Animations

Backend & Infrastructure

Technology	Purpose
	Authentication & Database
	Edge Deployment

Form & Data Management

Technology	Purpose
	Form State Management
	Schema Validation
	Data Visualization

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        NEXTSHOPP Architecture                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐       │
│  │   Next.js    │    │   React 19   │    │  TypeScript  │       │
│  │  App Router  │◄──►│   Server     │◄──►│    Types     │       │
│  │              │    │  Components  │    │              │       │
│  └──────┬───────┘    └──────────────┘    └──────────────┘       │
│         │                                                        │
│         ▼                                                        │
│  ┌─────────────────────────────────────────────────────┐        │
│  │                   Context Layer                      │        │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌────────┐  │        │
│  │  │  Auth   │  │  Cart   │  │Wishlist │  │ Theme  │  │        │
│  │  │ Context │  │ Context │  │ Context │  │Context │  │        │
│  │  └─────────┘  └─────────┘  └─────────┘  └────────┘  │        │
│  └─────────────────────────────────────────────────────┘        │
│         │                                                        │
│         ▼                                                        │
│  ┌─────────────────────────────────────────────────────┐        │
│  │                  Firebase Services                   │        │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │        │
│  │  │    Auth     │  │  Firestore  │  │   Storage   │  │        │
│  │  │   Service   │  │  Database   │  │   (CDN)     │  │        │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  │        │
│  └─────────────────────────────────────────────────────┘        │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

🚀 Getting Started

Prerequisites

Node.js 18.17 or later
npm, yarn, or pnpm package manager
Firebase account (for authentication & database)

Installation

Clone the repository

git clone https://github.com/indoreshivam2006/NEXTSHOPP.git
cd NEXTSHOPP

Install dependencies

npm install --legacy-peer-deps
# or
yarn install
# or
pnpm install

Configure environment variables

Create a .env.local file in the root directory:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Google Maps (Optional)
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_key

Start the development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:3000

Available Scripts

Command	Description
`npm run dev`	Start development server with hot reload
`npm run build`	Create optimized production build
`npm run start`	Start production server
`npm run lint`	Run ESLint for code quality

📁 Project Structure

nextshopp/
├── 📂 app/                    # Next.js App Router
│   ├── 📂 about/              # About page
│   ├── 📂 auth/               # Authentication pages
│   ├── 📂 cart/               # Shopping cart
│   ├── 📂 categories/         # Product categories
│   ├── 📂 checkout/           # Checkout flow
│   ├── 📂 contact/            # Contact page
│   ├── 📂 orders/             # Order history
│   ├── 📂 products/           # Product pages
│   ├── 📂 profile/            # User profile
│   ├── 📂 wishlist/           # Wishlist page
│   ├── 📄 layout.tsx          # Root layout
│   ├── 📄 page.tsx            # Homepage
│   └── 📄 globals.css         # Global styles
│
├── 📂 components/             # React Components
│   ├── 📂 ui/                 # 60+ shadcn/ui components
│   ├── 📄 header.tsx          # Site header
│   ├── 📄 footer.tsx          # Site footer
│   ├── 📄 hero.tsx            # Hero section
│   ├── 📄 product-card.tsx    # Product card
│   ├── 📄 product-grid.tsx    # Product grid
│   └── ...                    # Other components
│
├── 📂 context/                # React Context Providers
│   ├── 📄 auth-context.tsx    # Authentication state
│   ├── 📄 cart-context.tsx    # Cart management
│   └── 📄 wishlist-context.tsx# Wishlist management
│
├── 📂 hooks/                  # Custom React Hooks
│   ├── 📄 use-mobile.tsx      # Mobile detection
│   ├── 📄 use-toast.ts        # Toast notifications
│   └── 📄 useSmoothScroll.ts  # Smooth scrolling
│
├── 📂 lib/                    # Utilities & Services
│   ├── 📂 firebase/           # Firebase configuration
│   ├── 📄 utils.ts            # Utility functions
│   └── 📄 animations.ts       # Animation helpers
│
├── 📂 public/                 # Static assets
│   └── 📄 *.avif              # Optimized images
│
├── 📄 tailwind.config.ts      # Tailwind configuration
├── 📄 next.config.mjs         # Next.js configuration
├── 📄 components.json         # shadcn/ui configuration
└── 📄 package.json            # Dependencies

📸 Screenshots

Homepage

Modern hero section with animated elements and featured products

Product Catalog

Advanced filtering, sorting, and responsive grid layout

Shopping Cart

Real-time cart management with quantity controls

Checkout Flow

Streamlined multi-step checkout process

⚡ Performance

NEXTSHOPP is optimized for exceptional performance:

Metric	Score
First Contentful Paint	< 1.2s
Largest Contentful Paint	< 2.5s
Time to Interactive	< 3.5s
Cumulative Layout Shift	< 0.1

Optimization Techniques

✅ Server Components - Reduced client-side JavaScript
✅ Image Optimization - AVIF format with lazy loading
✅ Code Splitting - Automatic route-based splitting
✅ Edge Caching - Vercel Edge Network integration
✅ Font Optimization - Next.js font optimization

👨‍💻 Built By

Shivam Indore — Solo Developer

GitHub: https://github.com/indoreshivam2006
Portfolio: https://shivamindoreportfolio.vercel.app
Live: https://nextshopp-azure.vercel.app/

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ by Shivam Indore using Next.js 15 & React 19

⬆ Back to Top

Navigation Menu

Repository files navigation

🛍️ NEXTSHOPP

Next-Generation E-Commerce Platform

📋 Table of Contents

🎯 Overview

Why NEXTSHOPP?

✨ Key Features

🛒 Shopping Experience

🔐 Authentication & Security

💳 Checkout & Orders

🎨 UI/UX Excellence

Additional Features

🛠️ Tech Stack

Frontend

UI Components & Animation

Backend & Infrastructure

Form & Data Management

🏗️ Architecture

🚀 Getting Started

Prerequisites

Installation

Available Scripts

📁 Project Structure

📸 Screenshots

Homepage

Product Catalog

Shopping Cart

Checkout Flow

⚡ Performance

Optimization Techniques

👨‍💻 Built By

📄 License

Built with ❤️ by Shivam Indore using Next.js 15 & React 19

About

Releases

Packages

Used by

Contributors

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
app		app
components		components
context		context
hooks		hooks
lib		lib
public		public
scripts		scripts
styles		styles
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🛍️ NEXTSHOPP

Next-Generation E-Commerce Platform

📋 Table of Contents

🎯 Overview

Why NEXTSHOPP?

✨ Key Features

🛒 Shopping Experience

🔐 Authentication & Security

💳 Checkout & Orders

🎨 UI/UX Excellence

Additional Features

🛠️ Tech Stack

Frontend

UI Components & Animation

Backend & Infrastructure

Form & Data Management

🏗️ Architecture

🚀 Getting Started

Prerequisites

Installation

Available Scripts

📁 Project Structure

📸 Screenshots

Homepage

Product Catalog

Shopping Cart

Checkout Flow

⚡ Performance

Optimization Techniques

👨‍💻 Built By

📄 License

Built with ❤️ by Shivam Indore using Next.js 15 & React 19

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages