Project Mart
All Projects
15 min read
mernreactnodejsmongodbecommercefull-stack

SwiftMarket - Multivendor Ecommerce Website using MERN Stack

An innovative multivendor e-commerce platform with fair policies, personalized experiences, and robust vendor management built with MongoDB, Express, React, and Node.js.

Overview

SwiftMarket is an innovative multivendor e-commerce platform designed to empower students with hands-on experience in the dynamic world of online shopping. Unlike traditional e-commerce platforms, SwiftMarket focuses on fair and transparent policies, personalized user experiences, and robust vendor management tools.

A comprehensive MERN stack project perfect for learning modern full-stack JavaScript development and e-commerce business logic.

Why SwiftMarket?

Students exploring e-commerce will find SwiftMarket invaluable for gaining insights into:

  • Customer Behaviour Analysis: Track and understand shopping patterns
  • Vendor Management: Effectively manage multiple sellers on one platform
  • Refunds & Dispute Resolution: Handle complex business scenarios
  • Sales Optimization: Implement strategies to boost conversions
  • Real-World E-commerce: Experience the complete online business ecosystem

Key Features

For Customers

  • User Registration & Authentication: Secure signup/login with JWT
  • Product Browsing: Advanced search, filters, and categorization
  • Shopping Cart: Add, update, remove items with real-time calculations
  • Wishlist: Save favorite products for later
  • Order Management: Track orders from placement to delivery
  • Multiple Payment Options: Credit/debit cards, digital wallets, COD
  • Product Reviews & Ratings: Share feedback and experiences
  • Order History: View past purchases and reorder
  • Address Management: Save multiple delivery addresses
  • Personalized Recommendations: AI-based product suggestions
  • Discount Coupons: Apply promotional codes
  • Email Notifications: Order confirmations, shipping updates

For Vendors

  • Vendor Dashboard: Comprehensive analytics and insights
  • Product Management: Add, edit, delete products with images
  • Inventory Tracking: Real-time stock management
  • Order Management: Process customer orders efficiently
  • Sales Analytics: Revenue reports, best sellers, trends
  • Vendor Wallet: Track earnings and payouts
  • Shipping Management: Set shipping rates and methods
  • Promotional Tools: Create discounts and special offers
  • Customer Insights: View buyer demographics and behavior
  • Bulk Upload: CSV import for product catalogs
  • Performance Metrics: Sales KPIs and conversion rates
  • Commission Tracking: Transparent platform fee calculation

For Administrators

  • Admin Dashboard: Complete platform oversight
  • Vendor Approval System: Verify and onboard new sellers
  • User Management: Manage customers and vendors
  • Product Moderation: Review and approve listings
  • Order Monitoring: Track all platform transactions
  • Dispute Resolution: Handle refunds and complaints
  • Commission Management: Configure platform fees
  • Analytics & Reports: Platform-wide insights
  • Category Management: Create and organize product categories
  • Banner Management: Control homepage promotions
  • Policy Management: Update terms, privacy, refund policies
  • Payment Gateway Configuration: Manage payment integrations

Tech Stack

Frontend (React)

  • React 18+: Modern UI library with hooks
  • React Router: Client-side routing
  • Redux Toolkit: State management
  • Axios: HTTP client for API calls
  • Material-UI / TailwindCSS: UI components and styling
  • Formik & Yup: Form handling and validation
  • React Query: Data fetching and caching
  • Chart.js / Recharts: Data visualization
  • Socket.io-client: Real-time notifications

Backend (Node.js & Express)

  • Node.js 16+: JavaScript runtime
  • Express.js: Web application framework
  • MongoDB & Mongoose: NoSQL database and ODM
  • JWT (jsonwebtoken): Authentication
  • Bcrypt: Password hashing
  • Multer: File upload handling
  • Cloudinary: Image storage and CDN
  • Nodemailer: Email notifications
  • Express Validator: Input validation
  • Helmet: Security headers
  • CORS: Cross-origin resource sharing
  • Morgan: HTTP request logger

Payment Integration

  • Stripe: Credit/debit card processing
  • Razorpay: Payment gateway for India
  • PayPal: International payments

Additional Tools

  • Socket.io: Real-time communication
  • Redis: Session storage and caching
  • Winston: Logging
  • PM2: Process management
  • Jest & Supertest: Testing

Project Structure

swiftmarket/
├─ client/                          # React frontend
│  ├─ public/
│  │  ├─ index.html
│  │  └─ favicon.ico
│  ├─ src/
│  │  ├─ components/
│  │  │  ├─ common/                # Reusable components
│  │  │  │  ├─ Navbar.jsx
│  │  │  │  ├─ Footer.jsx
│  │  │  │  ├─ Loader.jsx
│  │  │  │  └─ ErrorBoundary.jsx
│  │  │  ├─ customer/
│  │  │  │  ├─ ProductCard.jsx
│  │  │  │  ├─ ProductDetails.jsx
│  │  │  │  ├─ Cart.jsx
│  │  │  │  ├─ Checkout.jsx
│  │  │  │  └─ OrderTracking.jsx
│  │  │  ├─ vendor/
│  │  │  │  ├─ VendorDashboard.jsx
│  │  │  │  ├─ ProductForm.jsx
│  │  │  │  ├─ OrderList.jsx
│  │  │  │  └─ Analytics.jsx
│  │  │  └─ admin/
│  │  │     ├─ AdminDashboard.jsx
│  │  │     ├─ VendorApproval.jsx
│  │  │     ├─ DisputeManagement.jsx
│  │  │     └─ PlatformAnalytics.jsx
│  │  ├─ pages/
│  │  │  ├─ Home.jsx
│  │  │  ├─ Products.jsx
│  │  │  ├─ Login.jsx
│  │  │  ├─ Register.jsx
│  │  │  ├─ Profile.jsx
│  │  │  └─ NotFound.jsx
│  │  ├─ redux/
│  │  │  ├─ store.js
│  │  │  ├─ slices/
│  │  │  │  ├─ authSlice.js
│  │  │  │  ├─ productSlice.js
│  │  │  │  ├─ cartSlice.js
│  │  │  │  └─ orderSlice.js
│  │  │  └─ api/
│  │  │     └─ apiSlice.js
│  │  ├─ utils/
│  │  │  ├─ validators.js
│  │  │  ├─ formatters.js
│  │  │  └─ constants.js
│  │  ├─ hooks/
│  │  │  ├─ useAuth.js
│  │  │  └─ useDebounce.js
│  │  ├─ App.jsx
│  │  └─ index.js
│  └─ package.json
├─ server/                          # Node.js backend
│  ├─ config/
│  │  ├─ database.js                # MongoDB connection
│  │  ├─ cloudinary.js             # Image upload config
│  │  └─ redis.js                  # Redis connection
│  ├─ models/
│  │  ├─ User.js                   # User schema (Customer/Vendor/Admin)
│  │  ├─ Product.js                # Product schema
│  │  ├─ Order.js                  # Order schema
│  │  ├─ Review.js                 # Review schema
│  │  ├─ Category.js               # Category schema
│  │  ├─ Cart.js                   # Cart schema
│  │  ├─ Coupon.js                 # Discount coupon schema
│  │  └─ Dispute.js                # Dispute schema
│  ├─ controllers/
│  │  ├─ authController.js         # Authentication logic
│  │  ├─ productController.js      # Product CRUD
│  │  ├─ orderController.js        # Order management
│  │  ├─ vendorController.js       # Vendor operations
│  │  ├─ adminController.js        # Admin operations
│  │  ├─ paymentController.js      # Payment processing
│  │  └─ reviewController.js       # Reviews & ratings
│  ├─ routes/
│  │  ├─ auth.js                   # Auth routes
│  │  ├─ products.js               # Product routes
│  │  ├─ orders.js                 # Order routes
│  │  ├─ vendors.js                # Vendor routes
│  │  ├─ admin.js                  # Admin routes
│  │  └─ payments.js               # Payment routes
│  ├─ middleware/
│  │  ├─ auth.js                   # JWT verification
│  │  ├─ roleCheck.js              # Role-based access
│  │  ├─ upload.js                 # File upload middleware
│  │  ├─ errorHandler.js           # Global error handler
│  │  └─ rateLimiter.js            # API rate limiting
│  ├─ services/
│  │  ├─ emailService.js           # Email sending
│  │  ├─ paymentService.js         # Payment gateway integration
│  │  ├─ cloudinaryService.js      # Image upload
│  │  └─ recommendationService.js  # Product recommendations
│  ├─ utils/
│  │  ├─ validators.js             # Input validation schemas
│  │  ├─ helpers.js                # Helper functions
│  │  └─ constants.js              # Constants
│  ├─ socket/
│  │  └─ socketHandler.js          # Socket.io events
│  ├─ tests/
│  │  ├─ auth.test.js
│  │  ├─ product.test.js
│  │  └─ order.test.js
│  ├─ server.js                    # Entry point
│  └─ package.json
├─ .env.example                     # Environment variables template
├─ .gitignore
└─ README.md

Database Schema Design

User Model

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['customer', 'vendor', 'admin'], default: 'customer' },
  phone: String,
  avatar: String,
  addresses: [{
    street: String,
    city: String,
    state: String,
    pincode: String,
    isDefault: Boolean
  }],
  vendorDetails: {
    storeName: String,
    storeDescription: String,
    businessLicense: String,
    isApproved: { type: Boolean, default: false },
    commission: { type: Number, default: 10 },
    wallet: { type: Number, default: 0 }
  },
  isActive: { type: Boolean, default: true },
  createdAt: { type: Date, default: Date.now }
});

Product Model

const productSchema = new mongoose.Schema({
  vendor: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  name: { type: String, required: true },
  description: { type: String, required: true },
  category: { type: mongoose.Schema.Types.ObjectId, ref: 'Category' },
  price: { type: Number, required: true },
  discountPrice: Number,
  images: [String],
  stock: { type: Number, default: 0 },
  specifications: mongoose.Schema.Types.Mixed,
  isActive: { type: Boolean, default: true },
  averageRating: { type: Number, default: 0 },
  totalReviews: { type: Number, default: 0 },
  totalSales: { type: Number, default: 0 },
  createdAt: { type: Date, default: Date.now }
});

Order Model

const orderSchema = new mongoose.Schema({
  customer: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  items: [{
    product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product' },
    vendor: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
    quantity: Number,
    price: Number,
    status: { type: String, enum: ['pending', 'processing', 'shipped', 'delivered', 'cancelled'], default: 'pending' }
  }],
  shippingAddress: {
    street: String,
    city: String,
    state: String,
    pincode: String
  },
  paymentMethod: { type: String, enum: ['card', 'wallet', 'cod'] },
  paymentStatus: { type: String, enum: ['pending', 'completed', 'failed', 'refunded'], default: 'pending' },
  paymentId: String,
  subtotal: Number,
  shippingCharges: Number,
  tax: Number,
  discount: Number,
  total: Number,
  orderDate: { type: Date, default: Date.now },
  deliveryDate: Date
});

Setup & Installation

Prerequisites

  • Node.js 16+ and npm
  • MongoDB (local or MongoDB Atlas)
  • Redis (optional, for caching)
  • Cloudinary account (for image uploads)
  • Payment gateway accounts (Stripe/Razorpay)

Installation Steps

1. Clone Repository

git clone <repository-url>
cd swiftmarket

2. Install Server Dependencies

cd server
npm install

3. Install Client Dependencies

cd ../client
npm install
cd ..

4. Configure Environment Variables

Create server/.env file:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database
MONGO_URI=mongodb://localhost:27017/swiftmarket
# Or MongoDB Atlas:
# MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/swiftmarket

# JWT
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRE=7d

# Cloudinary
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# Stripe
STRIPE_SECRET_KEY=your-stripe-secret-key
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key

# Razorpay
RAZORPAY_KEY_ID=your-razorpay-key-id
RAZORPAY_KEY_SECRET=your-razorpay-key-secret

# Email (Nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-app-password

# Redis (optional)
REDIS_URL=redis://localhost:6379

# Frontend URL
CLIENT_URL=http://localhost:3000

Create client/.env file:

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
REACT_APP_RAZORPAY_KEY_ID=your-razorpay-key-id

5. Start MongoDB

# If using local MongoDB
mongod

# Or use MongoDB Atlas cloud database

6. Seed Database (Optional)

cd server
npm run seed

7. Start Development Servers

# Terminal 1: Start backend (from server directory)
cd server
npm run dev

# Terminal 2: Start frontend (from client directory)
cd client
npm start

Application will be available at:

API Endpoints

Authentication

POST   /api/auth/register          # Register new user
POST   /api/auth/login             # Login user
GET    /api/auth/profile           # Get user profile
PUT    /api/auth/profile           # Update profile
POST   /api/auth/forgot-password   # Forgot password
POST   /api/auth/reset-password    # Reset password

Products

GET    /api/products               # Get all products
GET    /api/products/:id           # Get product by ID
POST   /api/products               # Create product (vendor)
PUT    /api/products/:id           # Update product (vendor)
DELETE /api/products/:id           # Delete product (vendor)
GET    /api/products/search        # Search products
GET    /api/products/category/:id  # Products by category

Orders

POST   /api/orders                 # Create new order
GET    /api/orders                 # Get user orders
GET    /api/orders/:id             # Get order details
PUT    /api/orders/:id/cancel      # Cancel order
GET    /api/orders/vendor          # Vendor orders
PUT    /api/orders/:id/status      # Update order status (vendor)

Vendor

POST   /api/vendor/register        # Register as vendor
GET    /api/vendor/dashboard       # Vendor dashboard stats
GET    /api/vendor/products        # Vendor products
GET    /api/vendor/orders          # Vendor orders
GET    /api/vendor/analytics       # Sales analytics
GET    /api/vendor/wallet          # Wallet balance

Admin

GET    /api/admin/vendors          # All vendors
PUT    /api/admin/vendors/:id      # Approve/reject vendor
GET    /api/admin/orders           # All orders
GET    /api/admin/disputes         # All disputes
PUT    /api/admin/disputes/:id     # Resolve dispute
GET    /api/admin/analytics        # Platform analytics

Reviews

POST   /api/reviews/:productId     # Add review
GET    /api/reviews/:productId     # Get product reviews
PUT    /api/reviews/:id            # Update review
DELETE /api/reviews/:id            # Delete review

Cart

GET    /api/cart                   # Get cart items
POST   /api/cart                   # Add to cart
PUT    /api/cart/:id               # Update quantity
DELETE /api/cart/:id               # Remove from cart

Key Features Implementation

1. Multi-Vendor Architecture

  • Separate vendor dashboards with isolated product management
  • Commission-based revenue model
  • Vendor approval workflow
  • Individual vendor storefronts

2. Advanced Search & Filtering

  • Full-text search using MongoDB text indexes
  • Multi-criteria filtering (category, price, rating)
  • Sorting options (price, popularity, newest)
  • Pagination for large result sets

3. Shopping Cart Management

  • Persistent cart (saved in database)
  • Real-time price calculations
  • Stock validation before checkout
  • Cart abandonment tracking

4. Payment Integration

  • Multiple payment gateways
  • Secure payment processing
  • Payment webhook handling
  • Refund management

5. Order Management

  • Multi-item orders with multiple vendors
  • Individual tracking per vendor item
  • Order status updates with notifications
  • Invoice generation

6. Dispute Resolution

  • Customer complaint submission
  • Admin mediation system
  • Refund processing
  • Vendor performance tracking

7. Analytics Dashboard

  • Sales trends visualization
  • Revenue reports
  • Best-selling products
  • Customer demographics
  • Vendor performance metrics

8. Recommendation Engine

  • Collaborative filtering
  • Product similarity
  • Purchase history analysis
  • Trending products

Security Features

Authentication & Authorization

  • JWT-based authentication
  • Password hashing with bcrypt
  • Role-based access control (RBAC)
  • Protected routes
  • Session management

Data Protection

  • Input validation and sanitization
  • SQL injection prevention (using Mongoose)
  • XSS protection
  • CSRF protection
  • Rate limiting on API endpoints
  • Helmet.js for security headers

Payment Security

  • PCI DSS compliance via payment gateways
  • No storage of card details
  • Secure webhook verification
  • SSL/TLS encryption

Testing

Backend Testing

cd server

# Run all tests
npm test

# Run with coverage
npm run test:coverage

# Run specific test file
npm test -- auth.test.js

Frontend Testing

cd client

# Run tests
npm test

# Run with coverage
npm run test:coverage

Deployment

Backend Deployment (Heroku/Railway/Render)

# Build for production
cd server
npm install --production

# Set environment variables on hosting platform
# Deploy using Git or CLI

Frontend Deployment (Vercel/Netlify)

cd client
npm run build

# Deploy build folder
# Configure environment variables

Database (MongoDB Atlas)

  • Create cluster
  • Whitelist IP addresses
  • Update connection string in .env

Image Storage (Cloudinary)

  • Configure upload presets
  • Set transformation parameters
  • Enable auto-optimization

Learning Outcomes

Frontend Skills

  • React Development: Components, hooks, state management
  • Redux: Global state management patterns
  • Responsive Design: Mobile-first approach
  • API Integration: Axios, error handling, loading states
  • Form Handling: Validation, submission, user feedback
  • Routing: React Router, protected routes, navigation

Backend Skills

  • RESTful API Design: Resource-based endpoints, HTTP methods
  • MongoDB & Mongoose: Schema design, queries, aggregations
  • Authentication: JWT, password hashing, session management
  • File Uploads: Multer, Cloudinary integration
  • Payment Processing: Gateway integration, webhooks
  • Email Notifications: Nodemailer, templates

Full-Stack Skills

  • MERN Architecture: Client-server communication
  • State Management: Frontend and backend synchronization
  • Real-Time Features: Socket.io for notifications
  • Deployment: Production builds, environment configuration
  • Testing: Unit tests, integration tests
  • Security: Best practices, vulnerability prevention

Business Logic

  • E-commerce Workflows: Cart, checkout, order fulfillment
  • Multi-Vendor Management: Commission, payouts, disputes
  • Analytics: Sales tracking, reporting
  • Customer Experience: Personalization, recommendations

Advanced Features to Implement

Phase 2 Enhancements

  • Mobile App: React Native version
  • Live Chat: Customer support chat
  • Wishlist Sharing: Social features
  • Flash Sales: Time-limited offers
  • Loyalty Program: Points and rewards
  • Subscription Model: Recurring orders
  • Multi-Currency: International sales
  • Multi-Language: i18n support
  • Advanced Analytics: Machine learning insights
  • Inventory Predictions: AI-based forecasting

Integration Possibilities

  • Shipping APIs: FedEx, UPS, DHL integration
  • SMS Notifications: Twilio integration
  • Social Login: OAuth with Google, Facebook
  • Email Marketing: Mailchimp integration
  • Accounting: QuickBooks integration
  • CRM: Salesforce integration

Performance Optimization

Frontend

  • Code splitting with React.lazy
  • Image lazy loading
  • Memoization with React.memo
  • Virtual scrolling for long lists
  • Service workers for PWA

Backend

  • Database indexing
  • Query optimization
  • Redis caching
  • API response compression
  • CDN for static assets

Best Practices

Code Quality

  • ESLint for code linting
  • Prettier for code formatting
  • Consistent naming conventions
  • Component modularity
  • DRY principle

Git Workflow

  • Feature branch workflow
  • Meaningful commit messages
  • Pull request reviews
  • Version tagging

Documentation

  • API documentation with Swagger
  • Component documentation
  • README for setup instructions
  • Code comments for complex logic

Troubleshooting

Common Issues

MongoDB Connection Error

# Ensure MongoDB is running
mongod

# Check connection string in .env
# Whitelist IP in MongoDB Atlas

CORS Error

// Ensure CORS is configured in server.js
app.use(cors({ origin: process.env.CLIENT_URL }));

Payment Webhook Not Working

# Use ngrok for local testing
ngrok http 5000

# Update webhook URL in payment gateway dashboard

Resources

Use Cases

Academic Projects

  • Final Year Project: Complete full-stack application
  • Capstone Project: Real-world e-commerce system
  • Web Development Course: Practical MERN implementation
  • Database Design: Complex schema relationships

Portfolio

  • Showcase full-stack JavaScript skills
  • Demonstrate e-commerce expertise
  • Display UI/UX capabilities
  • Highlight API design skills

Career Preparation

  • Interview project discussion
  • Technical challenge preparation
  • Understanding business logic
  • Learning industry best practices

Conclusion

SwiftMarket is more than just an e-commerce platform—it's a comprehensive learning experience that covers every aspect of modern web development. From frontend React components to backend API design, from database modeling to payment integration, students gain invaluable hands-on experience with the MERN stack while building a real-world application.

The multivendor architecture adds complexity that mirrors actual marketplace platforms like Amazon, eBay, or Etsy, making this project particularly valuable for understanding scalable e-commerce systems. With features like dispute resolution, vendor analytics, and personalized recommendations, students learn not just coding but also business logic and user experience design.

Whether you're preparing for a career in web development, building your portfolio, or completing an academic project, SwiftMarket provides the perfect platform to dive deep into the e-commerce ecosystem and emerge with production-ready skills.