My Portfolio

Multi-Vendor E-Commerce Marketplace

A modern, scalable, and high-performance multi-vendor e-commerce marketplace built with Next.js 15 and TailwindCSS v4, featuring a multi-tenant architecture, custom vendor storefronts, integrated Stripe Connect payments, and powerful admin/merchant dashboards. Designed with production-grade performance, maintainability, and enterprise-level extensibility.

Features

Multi-tenant architecture with isolated vendor storefronts

Vendor subdomains (store.vendor.com)

Custom merchant storefront UI and branding

Stripe Connect integration for vendor payouts

Automatic platform commission fee system

Product ratings and reviews system

User purchase library

Role-based access control (admin, merchant, user)

Admin dashboard (manage users, vendors, products, payments)

Merchant dashboard (manage products, inventory, orders)

Payload CMS backend for content and product management

Advanced category & product filtering

Search with 2-second debounce optimization

Product image upload support

Built with Next.js 15 (SSR, RSC, caching)

Responsive UI using TailwindCSS v4

Responsive Designs

File & Folder

Production Code

server.tsbefore

import { NextRequest } from 'next/server';

export const middleware = async (req: NextRequest) => {
  let user = undefined;
  let team = undefined;
  const token = req.headers.get('token');

  if(req.nextUrl.pathname.startsWith('/auth')) {
    user = await getUserByToken(token);

    if(!user) {
      return NextResponse.redirect('/login');
    }
  }

  if(req.nextUrl.pathname.startsWith('/team')) {
    user = await getUserByToken(token);

    if(!user) {
      return NextResponse.redirect('/login');
    }

    const slug = req.nextUrl.query.slug;
    team = await getTeamBySlug(slug); // [!code highlight]

    if(!team) { // [!code highlight]
      return NextResponse.redirect('/'); // [!code highlight]
    } // [!code highlight]
  } // [!code highlight]

  return NextResponse.next(); // [!code highlight]
}

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'], // [!code highlight]
};

server.tsafter

import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
import { auth } from '@/app/(auth)/auth/_middleware'; // [!code --]
import { auth } from '@/app/(auth)/auth/_middleware'; // [!code ++]
import { team } from '@/app/(team)/team/_middleware';

const middlewares = {
  '/auth{/:path?}': auth,
  '/team{/:slug?}': [ auth, team ],
};

export const middleware = createMiddleware(middlewares); // [!code focus]

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};

Tech Stack

System Design & Docker