🛍️ BeyondBazaar

A Modern Full-Stack E-Commerce Platform Built with Next.js 14 & Firebase

Empowering seamless digital shopping experiences with cutting-edge web technologies

Live Demo • Report Bug • Request Feature

---

Users Features

Admin Features

📋 Table of Contents

• About The Project
• Key Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Environment Setup
• Project Structure
• Usage
• Deployment
• API Documentation
• Contributing
• License
• Contact
• Acknowledgments

---

🎯 About The Project

BeyondBazaar is a production-ready, full-featured e-commerce platform designed for scalability and performance. Built with modern web technologies, it provides a complete shopping ecosystem from product discovery to order fulfillment.

Why BeyondBazaar?

• 🚀 Lightning Fast: Server-side rendering with Next.js 14 App Router
• 🔒 Secure: JWT authentication with Firebase integration
• 📱 Responsive: Mobile-first design with Tailwind CSS
• 🎨 Modern UI: Clean interface with ShadCN UI components
• 🔄 Real-time: Live updates using Firebase Firestore
• 💳 Payment Ready: Integrated with Cashfree & Zwitch
• 📊 Admin Panel: Comprehensive dashboard for store management
• 🧪 Type-Safe: Full TypeScript support

---

✨ Key Features

👤 Customer Features

• 🛒 Shopping Cart

  • Add/remove products with real-time stock validation
  • Persistent cart across sessions
  • Quick checkout flow

• 🔍 Product Discovery

  • Advanced filtering and search
  • Category-based navigation
  • Product variants (size, color, etc.)

• 💳 Secure Checkout

  • Multiple payment gateways (Cashfree, Zwitch)
  • Order tracking with status updates
  • Invoice generation and download

• 👨‍💼 User Dashboard

  • Order history and tracking
  • Profile management
  • Multiple delivery addresses
  • Wishlist functionality

🔐 Authentication System

• Email/Password login with verification
• Phone OTP verification via Firebase
• JWT-secured API routes
• Session management with refresh tokens
• Password reset functionality

🎛️ Admin Panel

• Product Management

  • CRUD operations for products
  • Bulk upload via CSV
  • Image management with Firebase Storage
  • Stock level tracking
  • Product variants management

• Order Management

  • View and update order status
  • Customer details and shipping info
  • Order analytics and reports

• Content Management

  • Hero slider configuration
  • Category management
  • Banner and promotional content
  • SEO metadata control

• Analytics Dashboard

  • Sales statistics
  • Revenue tracking
  • Customer insights
  • Product performance metrics

🛠️ Developer Features

• TypeScript for type safety
• Modular architecture
• Centralized API layer with Axios
• Custom hooks for reusable logic
• Error boundary components
• SEO optimized with Next.js metadata API
• CI/CD pipeline with GitHub Actions

---

🧰 Tech Stack

Frontend

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Redux Toolkit
• UI Components: ShadCN UI, Lucide Icons
• Animations: Framer Motion
• Forms: React Hook Form + Zod validation

Backend

• API: Next.js API Routes
• Database: Firebase Firestore
• Authentication: Firebase Auth
• Storage: Firebase Storage
• HTTP Client: Axios with interceptors

Payment Integration

• Cashfree Payment Gateway
• Zwitch Payment System

DevOps & Deployment

• CI/CD: GitHub Actions
• Process Manager: PM2
• Web Server: Nginx
• Hosting: VPS (Virtual Private Server)
• Monitoring: PM2 Logs

---

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Node.js >= 18.0.0
npm >= 9.0.0
# or
yarn >= 1.22.0

Installation

1. Clone the repository

git clone https://github.com/guptaashish2003/beyondbazaar.git
cd beyondbazaar

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

Create a .env.local file in the root directory (see Environment Setup)

4. Run the development server

npm run dev
# or
yarn dev

5. Open your browser

Navigate to http://localhost:3000

Environment Setup

Create a .env.local file with the following variables:

# App Configuration
NODE_ENV=development
FRONTENDURL=http://localhost:3000
BASEURL=http://localhost:3000/api

# Firebase Configuration
APIKEY=your_firebase_api_key
APP_ID=your_firebase_app_id
MESSAGING_ID=your_firebase_messaging_sender_id

# Database
DB_URI=your_mongodb_uri

# Authentication
JWT_SECRET_KEY=your_jwt_secret
JWT_ALGORITHM=HS256
JWT_EXPIRES_IN=7d
JWT_COOKIE_EXPIRE=7
NEXTAUTH_SECRET=your_nextauth_secret

# Payment Gateways
CLIENT_ID=your_cashfree_client_id
CLIENT_SECRET=your_cashfree_client_secret

# Email Configuration
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASSWORD=your_email_password

# Third-party APIs
GOOGLE_AUTH_API_KEY=your_google_api_key
BIGDATACLOUDKEY=your_bigdatacloud_key
BGDATAURL=https://api.bigdatacloud.net

# File Upload
UPLOADTHING_APP_ID=your_uploadthing_app_id
UPLOADTHING_SECRET=your_uploadthing_secret

⚠️ Security Note: Never commit your .env.local file to version control. Add it to .gitignore.

---

📁 Project Structure

beyondbazaar/
├── app/
│   ├── (auth)/               # Authentication routes
│   │   ├── login/
│   │   ├── register/
│   │   └── verify-otp/
│   ├── (dashboard)/          # User dashboard
│   │   ├── orders/
│   │   ├── profile/
│   │   └── addresses/
│   ├── admin/                # Admin panel
│   │   ├── products/
│   │   ├── orders/
│   │   ├── sliders/
│   │   └── analytics/
│   ├── api/                  # API routes
│   │   ├── auth/
│   │   ├── products/
│   │   ├── orders/
│   │   └── payments/
│   ├── products/             # Product pages
│   ├── cart/                 # Shopping cart
│   ├── checkout/             # Checkout flow
│   ├── layout.tsx
│   └── page.tsx
│
├── components/
│   ├── layout/
│   │   ├── Navbar.tsx
│   │   ├── Footer.tsx
│   │   └── Sidebar.tsx
│   ├── products/
│   │   ├── ProductCard.tsx
│   │   ├── ProductGrid.tsx
│   │   └── ProductDetails.tsx
│   ├── cart/
│   │   ├── CartItem.tsx
│   │   └── CartSummary.tsx
│   ├── forms/
│   │   └── ...form components
│   └── ui/                   # ShadCN UI components
│
├── lib/
│   ├── firebase.ts           # Firebase configuration
│   ├── axios.ts              # Axios instance & interceptors
│   ├── jwt.ts                # JWT utilities
│   ├── utils.ts              # Helper functions
│   └── validators.ts         # Zod schemas
│
├── store/                    # Redux store
│   ├── slices/
│   │   ├── authSlice.ts
│   │   ├── cartSlice.ts
│   │   └── productSlice.ts
│   └── store.ts
│
├── types/                    # TypeScript type definitions
├── hooks/                    # Custom React hooks
├── styles/
│   └── globals.css
├── public/
│   ├── images/
│   └── icons/
├── .env.local.example
├── next.config.mjs
├── tailwind.config.ts
├── tsconfig.json
└── package.json

---

💻 Usage

Running Tests

npm run test
# or
yarn test

Building for Production

npm run build
npm start
# or
yarn build
yarn start

Linting

npm run lint
# or
yarn lint

---

🌐 Deployment

Deploy to Vercel (Recommended)

Deploy to VPS with PM2

1. Build the application

npm run build

2. Start with PM2

pm2 start npm --name "beyondbazaar" -- start
pm2 save
pm2 startup

3. Configure Nginx

server {
    listen 80;
    server_name beyondbazaar.in www.beyondbazaar.in;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

4. SSL with Certbot

sudo certbot --nginx -d beyondbazaar.in -d www.beyondbazaar.in

CI/CD with GitHub Actions

The project includes a GitHub Actions workflow for automated deployment:

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        env:
          NODE_ENV: production
          
      - name: Deploy to VPS
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.VPS_SSH_KEY }}
          script: |
            cd /var/www/beyondbazaar
            git pull origin main
            npm ci
            npm run build
            pm2 restart beyondbazaar

---

📚 API Documentation

Authentication Endpoints

POST   /api/auth/register       // Register new user
POST   /api/auth/login          // Login user
POST   /api/auth/verify-otp     // Verify phone OTP
POST   /api/auth/logout         // Logout user
POST   /api/auth/refresh        // Refresh access token

Product Endpoints

GET    /api/products            // Get all products
GET    /api/products/:id        // Get single product
POST   /api/products            // Create product (Admin)
PUT    /api/products/:id        // Update product (Admin)
DELETE /api/products/:id        // Delete product (Admin)

Order Endpoints

GET    /api/orders              // Get user orders
POST   /api/orders              // Create new order
GET    /api/orders/:id          // Get order details
PUT    /api/orders/:id          // Update order status (Admin)

For detailed API documentation, visit the API Docs (if available).

---

🤝 Contributing

Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Coding Standards

• Follow the existing code style
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

---

📄 License

Distributed under the MIT License. See LICENSE file for more information.

---

📧 Contact

Ashish Gupta

• 🎓 AIML Student | Full Stack Developer
• 📍 Delhi, India
• 📧 Email: guptaashish2003@gmail.com
• 💼 LinkedIn: linkedin.com/in/ashish-gupta
• 🌐 Portfolio: ashishgupta.dev
• 🐙 GitHub: @guptaashish2003

Project Link: https://github.com/guptaashish2003/beyondbazaar

---

🙏 Acknowledgments

Special thanks to the following technologies and communities:

• Next.js - The React Framework for Production
• Firebase - Backend-as-a-Service platform
• Vercel - Deployment and hosting
• Tailwind CSS - Utility-first CSS framework
• ShadCN UI - Re-usable components
• Redux Toolkit - State management
• TypeScript - JavaScript with syntax for types
• Lucide Icons - Beautiful & consistent icons

Resources

• Next.js Documentation
• Firebase Documentation
• Tailwind CSS Documentation
• Redux Toolkit Documentation

---

⭐ If you found this project helpful, please consider giving it a star!

Made with ❤️ by Ashish Gupta

Back to Top