MERN Commerce

A full-stack e-commerce solution built with the MERN stack (MongoDB, Express.js, React.js, Next.js) and TypeScript. This application provides a complete e-commerce platform with user authentication, product management, order processing, and an admin panel.

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• TypeScript - Type-safe JavaScript
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcrypt - Password hashing
• AdminBro - Admin panel interface

• React.js - UI library
• Next.js - React framework for production
• TypeScript - Type-safe JavaScript

• Docker - Containerization
• Heroku - Cloud platform (Procfile included)

• User registration and authentication
• JWT-based authentication
• Role-based access control (superadmin, admin, user)
• Password encryption with bcrypt
• User profile management

• Create, read, update, and delete products
• Product search functionality
• Category-based product filtering
• Product slug generation
• Bulk product generation from external API (FakeStore API)
• Category management

• Create and manage orders
• Order status tracking (pending, accepted, delivered, rejected)
• Order reports and analytics
• Order history with populated product details
• Shipping address management

• Admin panel powered by AdminBro
• Role-based authorization
• Order status management
• User management
• Product management
• Order reports and analytics

mern-commerce/
├── src/
│   ├── app.ts                 # Express app configuration
│   ├── server.ts              # Server entry point
│   ├── components/            # React components
│   ├── controllers/           # Business logic controllers
│   │   ├── accountController.ts
│   │   ├── orderController.ts
│   │   └── productController.ts
│   ├── interfaces/            # TypeScript interfaces
│   ├── middlewares/           # Express middlewares
│   │   ├── authMiddleware.ts
│   │   └── logger.ts
│   ├── models/                # Mongoose models
│   │   ├── orderModel.ts
│   │   ├── productModel.ts
│   │   └── userModel.ts
│   ├── pages/                 # Next.js pages
│   └── routes/                # API routes
│       ├── accountRoutes.ts
│       ├── orderRoutes.ts
│       └── productRoutes.ts
├── Dockerfile
├── Procfile
├── package.json
└── tsconfig.json

• Node.js (v14.16.0 or higher)
• MongoDB (local or cloud instance)
• npm or yarn

1. Clone the repository

   git clone <repository-url>
   cd mern-commerce

2. Install dependencies

   npm install

3. Environment Variables Create a .env file in the root directory:

   PORT=5000
   DB_STRING=mongodb://127.0.0.1:27017/mern-commerce
   SECRET_KEY=your-secret-key-here
   NODE_ENV=development

4. Start the development server

   npm run dev

   The server will start on http://localhost:5000

• npm run dev - Start development server with nodemon
• npm run build:server - Build TypeScript server code
• npm run build:client - Build Next.js client
• npm run build - Build both client and server
• npm start - Start production server (requires build)

POST /api/register
Body: {
  firstName: string,
  lastName: string,
  username: string,
  email: string,
  password: string
}

POST /api/login
Body: {
  username: string,
  password: string
}
Response: { token: string }

GET /api/user
Headers: Authorization: Bearer <token>

GET /api/users
Headers: Authorization: Bearer <token>

PUT /api/users
Headers: Authorization: Bearer <token>
Body: { _id: string, ...userData }

DELETE /api/users
Headers: Authorization: Bearer <token>
Body: { _id: string }

GET /api/products

GET /api/product?slug=product-slug

GET /api/product/search?q=search-query

GET /api/category/:categorySlug

GET /api/products/categories

POST /api/products
Headers: Authorization: Bearer <token>
Body: {
  title: string,
  description: string,
  price: number,
  category: string,
  image: string
}

PUT /api/products
Headers: Authorization: Bearer <token>
Body: { _id: string, ...productData }

DELETE /api/products
Headers: Authorization: Bearer <token>
Body: { _id: string }

GET /api/products/generate
Headers: Authorization: Bearer <token>

POST /api/products/categories
Body: { title: string }

GET /api/orders
Headers: Authorization: Bearer <token>

GET /api/order?id=ORDER_ID
Headers: Authorization: Bearer <token>

POST /api/orders
Headers: Authorization: Bearer <token>
Body: {
  shippingAddress: string,
  orderEmail: string,
  orderItems: [
    { productId: string, quantity: number }
  ]
}

PUT /api/orders
Headers: Authorization: Bearer <token>
Body: {
  _id: string,
  status: "pending" | "accepted" | "delivered" | "rejected"
}

DELETE /api/orders
Headers: Authorization: Bearer <token>
Body: { _id: string }

GET /api/orders/report
Headers: Authorization: Bearer <token>

The API uses JWT (JSON Web Tokens) for authentication. Include the token in the Authorization header:

Authorization: Bearer <your-token>

• user - Regular customer (default)
• admin - Can manage products and orders
• superadmin - Full access including user management and reports

1. Build the Docker image

   docker build -t mern-commerce .

2. Run the container

   docker run -p 5000:5000 --env-file .env mern-commerce

The project includes a Procfile for Heroku deployment:

1. Create a Heroku app
2. Set environment variables in Heroku dashboard
3. Deploy using Git:

   git push heroku main

• PORT - Server port (Heroku sets this automatically)
• DB_STRING - MongoDB connection string
• SECRET_KEY - JWT secret key
• NODE_ENV - Set to "production"

• firstName, lastName, username, email, password
• role (default: "user")
• timestamp

• title, description, price, slug, category, image
• createdAt

• customer (User reference)
• shippingAddress, orderEmail
• status (default: "pending")
• orderNo (auto-increment)
• orderItems (virtual reference to OrderItem)
• timestamp

• product (Product reference)
• order (Order reference)
• price, quantity
• timestamp

• Password hashing with bcrypt
• JWT token-based authentication
• Role-based authorization
• Input validation
• CORS enabled
• Environment variable configuration

ISC

Shakil Ahmed

• GitHub: @shahmedme

Contributions, issues, and feature requests are welcome!

For support, please open an issue in the repository.

Made with ❤️ by Shakil Ahmed