🍼 BabyMart — Full-Stack E-Commerce Platform

A modern, production-ready e-commerce platform for baby & children's products
Built with Next.js 16, Express 5, MongoDB, and a dedicated Admin Dashboard

📋 Table of Contents

Overview
Live Demo
Architecture
Tech Stack
Features
Project Structure
Getting Started
Environment Variables
API Reference
Performance Optimizations
Deployment
Screenshots
Author

🌟 Overview

BabyMart is a complete, full-stack e-commerce solution specifically designed for baby and children's products. The platform consists of three independently deployable applications:

Application	Technology	Purpose
Client (Storefront)	Next.js 16 + React 19	Customer-facing shopping experience
Admin Dashboard	Vite + React 19	Business management & analytics
API Server	Express 5 + MongoDB	RESTful API backend with Swagger docs

The platform supports the complete e-commerce lifecycle — from product browsing and cart management to checkout via Stripe, order tracking, and administrative oversight.

🔗 Live Demo

App	URL
🛒 Client Store	babymart-e-commerce-client.vercel.app
📊 Admin Dashboard	babymart-e-commerce-dashboard.vercel.app
🔌 API Server	https://babymart-e-commerce-server.vercel.app
📚 API Docs	https://babymart-e-commerce-server.vercel.app/api/docs (Swagger UI)

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        DEPLOYMENT (Vercel)                      │
├────────────────┬────────────────┬───────────────────────────────┤
│                │                │                               │
│  ┌──────────┐  │  ┌──────────┐  │  ┌───────────────────────┐    │
│  │  Client  │  │  │  Admin   │  │  │     API Server        │    │
│  │ Next.js  │──┼──│  Vite    │──┼──│  Express 5            │    │
│  │  16.2    │  │  │  React   │  │  │  ┌─────────────────┐  │    │
│  │          │  │  │          │  │  │  │   MongoDB Atlas  │  │    │
│  └──────────┘  │  └──────────┘  │  │  └─────────────────┘  │    │
│                │                │  │  ┌─────────────────┐  │    │
│                │                │  │  │   Cloudinary     │  │    │
│                │                │  │  └─────────────────┘  │    │
│                │                │  │  ┌─────────────────┐  │    │
│                │                │  │  │   Stripe API     │  │    │
│                │                │  │  └─────────────────┘  │    │
│                │                │  └───────────────────────┘    │
└────────────────┴────────────────┴───────────────────────────────┘

🛠 Tech Stack

Client (Storefront)

Category	Technology
Framework	Next.js 16 (App Router + Turbopack)
Language	TypeScript 5.9
UI Library	React 19
Styling	Tailwind CSS 4
State Management	Zustand 5
Forms	React Hook Form + Zod validation
Animations	Framer Motion
Icons	Lucide React
Payments	Stripe.js
UI Components	Radix UI Primitives (Dialog, Select, Tabs, etc.)
Notifications	Sonner
Auth	JWT (custom implementation)

Admin Dashboard

Category	Technology
Build Tool	Vite 7
Language	TypeScript 5.8
UI Library	React 19
Styling	Tailwind CSS 4
Routing	React Router 7
State Management	Zustand 5
Charts	Recharts 3
HTTP Client	Axios
Forms	React Hook Form + Zod
File Upload	React Dropzone
Printing	React To Print

API Server (Backend)

Category	Technology
Runtime	Node.js
Framework	Express 5.1
Database	MongoDB (Mongoose 8)
Authentication	JWT + bcryptjs
File Storage	Cloudinary
Payments	Stripe
Email	Nodemailer
API Docs	Swagger (swagger-jsdoc + swagger-ui-express)
Compression	gzip (compression middleware)

✨ Features

🛒 Customer Storefront

Shopping Experience

Dynamic Homepage — Hero banners, trending products, new arrivals, best deals, seasonal promotions, and stock clearance sections
Smart Search — Real-time autocomplete with debounced API calls and trending search suggestions
Product Catalog — Advanced filtering by category, brand, and price range with pagination
Product Details — Full product pages with image zoom, ratings, descriptions, and related products
Category Sidebar — Featured categories, hot categories, quick links, shop-by-age groups, and special offers

Cart & Checkout

Persistent Cart — Add/remove items with quantity management (syncs with backend for logged-in users)
Wishlist — Save products for later with heart icon toggle
Stripe Checkout — Secure payment processing via Stripe integration
Order Success — Post-checkout confirmation with order ID and tracking info
Order History — View all past orders with detailed order breakdown

User Account

Registration & Login — JWT-based authentication with form validation
Profile Management — Update personal information and profile image
Address Book — Manage multiple shipping addresses with default selection
Order Tracking — Monitor order status from processing to delivery

Customer Support Hub

Help Center (/help) — Central FAQ page with category navigation cards
Shipping Info (/help/shipping) — Tiered shipping options, process flow, and tracking guide
Returns & Exchanges (/help/returns) — 30-day return policy, step-by-step return process, non-returnable items
Contact Us (/help/contact) — Contact info cards with validated contact form and toast notifications

Information Pages

About Us (/about) — Company story, mission, and value propositions
Privacy Policy (/privacy) — Data collection and usage policies
Terms of Service (/terms) — Legal terms and conditions

📊 Admin Dashboard

Analytics Dashboard — Revenue charts, order statistics, and KPI cards (Recharts)
Product Management — Full CRUD with Cloudinary image upload, discount percentages, stock tracking
Category Management — Create/edit categories with image upload and category types (Featured / Hot)
Brand Management — Create/edit brands with logo upload
Banner Management — Manage promotional banners with type classification
Order Management — View all orders, update order status, track fulfillment
User Management — View registered users, manage roles (admin/user)
Invoice Generation — Print-ready invoices via React To Print
Account Settings — Admin profile management
Responsive Sidebar — Collapsible sidebar with active route highlighting

🔌 API Server

RESTful Architecture — Clean separation of routes, controllers, and models
12 API Modules — Auth, Users, Products, Categories, Brands, Banners, Orders, Cart, Wishlist, Stats, Analytics, Payments
JWT Authentication — Bearer token with role-based access control (user / admin)
Swagger Documentation — Interactive API docs at /api/docs
Database Indexing — Optimized indexes on product fields (category, brand, price, text search)
Gzip Compression — Response compression for reduced bandwidth
CORS Configuration — Environment-aware origin whitelisting
Error Handling — Centralized error middleware with async handler

📁 Project Structure

babyshop-ecommerce/
├── client/                          # Next.js 16 Storefront
│   ├── src/
│   │   ├── app/                     # App Router pages
│   │   │   ├── page.tsx             # Homepage (Server Component)
│   │   │   ├── shop/                # Product catalog with filters
│   │   │   ├── product/[id]/        # Dynamic product details
│   │   │   ├── search/              # Search page
│   │   │   ├── auth/                # Sign in / Sign up
│   │   │   ├── user/                # Cart, Checkout, Orders, Profile, Wishlist
│   │   │   ├── help/                # Help Center, Shipping, Returns, Contact
│   │   │   ├── success/             # Post-checkout confirmation
│   │   │   ├── about/               # About page
│   │   │   ├── privacy/             # Privacy policy
│   │   │   ├── terms/               # Terms of service
│   │   │   └── api/                 # API routes (Stripe checkout)
│   │   ├── components/
│   │   │   ├── auth/                # Login/Register forms
│   │   │   ├── common/              # ProductCard, PriceContainer, etc.
│   │   │   ├── header/              # TopHeader, MainHeader, Sidebar, Search
│   │   │   ├── footer/              # Footer with nav links
│   │   │   ├── home/                # Homepage sections (10 components)
│   │   │   ├── pages/               # Page-specific client components
│   │   │   ├── providers/           # Context providers
│   │   │   ├── skeleton/            # Loading skeletons
│   │   │   └── ui/                  # Radix-based UI primitives
│   │   ├── lib/                     # API config, stores, utilities
│   │   │   ├── store.ts             # Zustand stores (cart, user, currency)
│   │   │   ├── config.ts            # API base URL + fetch wrapper
│   │   │   ├── authApi.ts           # Auth API functions
│   │   │   ├── cartApi.ts           # Cart sync API
│   │   │   ├── orderApi.ts          # Order management API
│   │   │   ├── wishlistApi.ts       # Wishlist API
│   │   │   └── stripe.ts            # Stripe client config
│   │   ├── types/                   # TypeScript interfaces
│   │   └── constants/               # Static data & navigation
│   └── package.json
│
├── admin/                           # Vite + React Admin Dashboard
│   ├── src/
│   │   ├── pages/                   # Dashboard, Products, Categories, etc.
│   │   ├── components/              # Sidebar, Header, shared components
│   │   ├── store/                   # Zustand auth store
│   │   ├── hooks/                   # Custom hooks
│   │   └── lib/                     # Utilities
│   └── package.json
│
├── server/                          # Express 5 API Server
│   ├── index.js                     # Server entry point
│   ├── config/
│   │   ├── db.js                    # MongoDB connection
│   │   ├── cloudinary.js            # Cloudinary config
│   │   └── swagger.js               # Swagger/OpenAPI setup
│   ├── models/                      # Mongoose schemas (7 models)
│   │   ├── userModel.js
│   │   ├── productModel.js
│   │   ├── categoryModel.js
│   │   ├── brandModel.js
│   │   ├── bannerModel.js
│   │   ├── orderModel.js
│   │   └── cartModel.js
│   ├── controllers/                 # Business logic (12 controllers)
│   ├── routes/                      # API route definitions (12 routes)
│   ├── middleware/
│   │   ├── authMiddleware.js         # JWT protect + admin guard
│   │   └── errorMiddleware.js        # Global error handler
│   ├── utils/                       # Helper utilities
│   └── package.json

🚀 Getting Started

Prerequisites

Node.js ≥ 18.x
MongoDB (local instance or MongoDB Atlas)
Cloudinary account (cloudinary.com)
Stripe account (stripe.com)

Installation

# 1. Clone the repository
git clone https://github.com/your-username/babyshop-ecommerce.git
cd babyshop-ecommerce

# 2. Install server dependencies
cd server
npm install

# 3. Install client dependencies
cd ../client
npm install

# 4. Install admin dependencies
cd ../admin
npm install

Running Locally

Open three terminal windows:

# Terminal 1 — API Server (port 8000)
cd server
npm run dev

# Terminal 2 — Client Storefront (port 3000)
cd client
npm run dev

# Terminal 3 — Admin Dashboard (port 5173)
cd admin
npm run dev

Building for Production

# Client
cd client
npm run build    # Outputs to .next/

# Admin
cd admin
npm run build    # Outputs to dist/

# Server (no build step — runs directly with Node.js)
cd server
npm start

🔐 Environment Variables

Server (`server/.env`)

# Database
MONGO_URI=mongodb+srv://<user>:<pass>@cluster.mongodb.net/babymart

# Authentication
JWT_SECRET=your_jwt_secret_key

# Cloudinary (Image uploads)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Stripe (Payments)
STRIPE_SECRET_KEY=sk_test_xxxx

# CORS Origins
CLIENT_URL=http://localhost:3000
ADMIN_URL=http://localhost:5173

# Environment
NODE_ENV=development
PORT=8000

Client (`client/.env`)

# API Endpoint
NEXT_PUBLIC_API_URL=http://localhost:8000/api

# Stripe Public Key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxx

Admin (`admin/.env`)

# API Endpoint
VITE_API_URL=http://localhost:8000/api

📡 API Reference

The API is fully documented with Swagger. After starting the server, visit:

http://localhost:8000/api/docs

Core Endpoints

Method	Endpoint	Auth	Description
Auth
`POST`	`/api/auth/register`	❌	Register a new user
`POST`	`/api/auth/login`	❌	Login and receive JWT
Products
`GET`	`/api/products`	❌	List products (paginated, filterable)
`GET`	`/api/products/:id`	❌	Get single product
`POST`	`/api/products`	🔒 Admin	Create product
`PUT`	`/api/products/:id`	🔒 Admin	Update product
`DELETE`	`/api/products/:id`	🔒 Admin	Delete product
Categories
`GET`	`/api/categories`	❌	List all categories
`POST`	`/api/categories`	🔒 Admin	Create category
Brands
`GET`	`/api/brands`	❌	List all brands
`POST`	`/api/brands`	🔒 Admin	Create brand
Cart
`GET`	`/api/cart`	🔒 User	Get user's cart
`POST`	`/api/cart/add`	🔒 User	Add item to cart
`DELETE`	`/api/cart/remove`	🔒 User	Remove from cart
Orders
`POST`	`/api/orders`	🔒 User	Place a new order
`GET`	`/api/orders/user/:id`	🔒 User	Get user's orders
`PUT`	`/api/orders/:id`	🔒 Admin	Update order status
Wishlist
`GET`	`/api/wishlist`	🔒 User	Get wishlist
`POST`	`/api/wishlist`	🔒 User	Toggle wishlist item
Payments
`POST`	`/api/payment`	🔒 User	Create Stripe payment intent
Analytics
`GET`	`/api/analytics`	🔒 Admin	Dashboard analytics data
`GET`	`/api/stats`	🔒 Admin	Summary statistics

Query Parameters (Products)

GET /api/products?page=1&limit=10&search=stroller&category=<id>&brand=<id>&priceMin=10&priceMax=50&sortOrder=desc

⚡ Performance Optimizations

Backend

Gzip Compression — compression middleware reduces JSON response sizes by ~80%
MongoDB Indexes — Compound indexes on category, brand, price, and createdAt fields
Text Search Index — Full-text index on name + description for fast search
Lean Queries — .lean() on all read queries skips Mongoose hydration for faster responses
Parallel Queries — Promise.all() for concurrent count + find operations

Frontend

Server Components — Homepage sections fetched and rendered on the server (zero client JS for product lists)
React Suspense Streaming — Sections stream to the browser as data becomes available
Turbopack — Next.js dev server uses Turbopack for instant HMR
Optimized Images — Next.js <Image> with lazy loading and appropriate width/height
Debounced Search — 300ms debounce on search input prevents excessive API calls
Zustand — Lightweight state management (~1KB) with persistence via localStorage
Code Splitting — Automatic route-based code splitting via Next.js App Router

Build Output

Route (app)                       Revalidate  Expire
┌ ○ /                                    ≈2m      1y    ← ISR cached
├ ○ /shop                                ≈2m      1y    ← ISR cached
├ ƒ /product/[id]                                       ← Dynamic SSR
├ ○ /help                                               ← Static
├ ○ /help/shipping                                      ← Static
├ ○ /help/returns                                       ← Static
├ ○ /help/contact                                       ← Static
└ ○ /about                                              ← Static

○ = Static (prerendered at build)
ƒ = Dynamic (rendered on demand)

🚢 Deployment

All three apps are deployed on Vercel:

Client (Next.js)

cd client
vercel --prod

Admin (Vite SPA)

cd admin
vercel --prod

Note: admin/vercel.json includes SPA rewrite rules for client-side routing.

Server (Serverless)

cd server
vercel --prod

Note: server/vercel.json configures the Express app as a serverless function.

🗄 Database Schema

erDiagram
    USER ||--o{ ORDER : places
    USER ||--o{ CART : has
    USER ||--o{ WISHLIST : saves
    ORDER ||--|{ PRODUCT : contains
    PRODUCT }o--|| CATEGORY : belongs_to
    PRODUCT }o--|| BRAND : manufactured_by
    BANNER ||--o{ BANNER : displays

    USER {
        string name
        string email
        string password
        string role
        string avatar
        array addresses
    }

    PRODUCT {
        string name
        string description
        number price
        number discountPercentage
        number stock
        number averageRating
        string image
        ref category
        ref brand
        array ratings
    }

    CATEGORY {
        string name
        string image
        string categoryType
    }

    BRAND {
        string name
        string image
    }

    ORDER {
        ref user
        array items
        number totalAmount
        string status
        object shippingAddress
        string paymentMethod
    }

🖼 Screenshots

Client Pages

Page	Route	Description
🏠 Homepage	`/`	Hero banners, trending products, new arrivals, vendor promo
🛍️ Shop / Catalog	`/shop`	Product grid with category, brand, price filters
📦 Product Details	`/product/:id`	Full product page with ratings and related items
🛒 Cart	`/user/cart`	Itemized cart with quantity controls
💳 Checkout	`/user/checkout`	Stripe-powered secure checkout
📋 Order History	`/user/orders`	Past orders with status tracking
❓ Help Center	`/help`	FAQ, category cards for support navigation
🚚 Shipping Info	`/help/shipping`	Shipping tiers and delivery process
↩️ Returns	`/help/returns`	30-day return policy and step-by-step guide
📞 Contact Us	`/help/contact`	Contact form with validation

Admin Pages

Page	Route
Dashboard Analytics	`/`
Product Management	`/products`
Category Management	`/categories`
Brand Management	`/brands`
Banner Management	`/banners`
Order Management	`/orders`
User Management	`/users`
Invoice Viewer	`/invoices`

👤 Author

shoriful-dev

📄 License

This project is licensed under the ISC License.

Made with ❤️ for parents and babies everywhere

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next-env.d.ts		next-env.d.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation