DEV Community

Cover image for Building a Modern D2C E-Commerce Platform with Next.js, Supabase & Express
Jayesh Patil
Jayesh Patil

Posted on

Building a Modern D2C E-Commerce Platform with Next.js, Supabase & Express

#webdev #nextjs #typescript #supabase

Building a Modern D2C E-Commerce Platform with Next.js, Supabase & Express

Building an e-commerce platform today requires more than just listing products. It needs performance, scalable architecture, SEO optimization, and a smooth user experience.

Recently, I worked on a project called **MasalaBrand (Gravitate) — a Direct-to-Consumer (D2C) platform for a premium spices brand based in Nashik, India.

🌐 Live Website: https://gravitatee.com/

In this post, I'll walk through the architecture, tech stack, and development decisions behind the project.

Tech Stack

Frontend

  • Next.js 16 (App Router)
  • TypeScript
  • Tailwind CSS
  • Shadcn UI
  • Radix UI

Backend

  • Node.js
  • Express.js
  • Supabase PostgreSQL

State Management

  • Zustand

Forms & Validation

  • React Hook Form
  • Zod

Animations

  • Framer Motion
  • GSAP

UI Utilities

  • Embla Carousel
  • Lucide Icons

Project Overview

Gravitate (formerly Gurukrupa Gruh Udyog) is a premium spices company transitioning to a modern digital storefront.

The platform was designed to include:

  • A customer-facing storefront
  • An internal admin dashboard
  • A backend API connected to Supabase

All of this is organized inside a monorepo architecture.

High-Level Architecture

The project consists of three main applications:

masala-website/

├── main web app (Next.js storefront)
├── admin panel (Next.js dashboard)
└── backend API (Node + Express)

1️⃣ Main Web Application

The customer-facing storefront.

Responsibilities include:

  • Product browsing
  • Cart management
  • SEO optimization
  • WhatsApp checkout flow

2️⃣ Admin Panel

Internal dashboard used for managing:

  • Categories
  • Products
  • Orders
  • Customer inquiries

Runs locally on: localhost:3001

3️⃣ Backend API

A lightweight Express.js server that acts as a middle layer between the frontend and Supabase PostgreSQL.

Instead of exposing the database directly to the client, the API handles structured queries and responses.

Runs locally on: localhost:3002

Backend API Endpoints

Current API routes include:

GET /health
GET /api/v1/categories
GET /api/v1/products
GET /api/v1/products/:slug
POST /api/v1/contact

These endpoints handle:

  • Category data
  • Product listings
  • Product details
  • Customer inquiries

Key Architectural Decisions

Monorepo Setup

Keeping the storefront, admin panel, and backend in a single repository allows:

  • shared utilities
  • faster development
  • easier environment management
  • consistent dependency versions

WhatsApp Checkout System

Instead of implementing a full payment gateway initially, the platform uses WhatsApp-based checkout.

Flow:

  1. User adds products to cart
  2. Clicks checkout
  3. A formatted WhatsApp message is generated
  4. The order is placed via WhatsApp chat

This works well for small businesses transitioning to digital commerce.

SEO Strategy

SEO was a major priority during development.

The platform includes:

  • Dynamic metadata
  • Robots configuration
  • Sitemap generation
  • Structured Schema.org JSON-LD

Schemas implemented include:

  • LocalBusiness
  • Organization

This helps improve Google indexing and discoverability.

Project Structure

Main Application

/app
/components
/lib

Key files include: layout.tsx

Handles:

  • global fonts
  • metadata
  • structured schema injection cartStore.ts

Global cart state using Zustand whatsapp.ts

Generates the WhatsApp checkout message payload.

Backend

backend/src/server.ts

This file configures:

  • Express server
  • CORS policies
  • API routes
  • Supabase connection

CORS is configured for:

  • localhost
  • production storefront
  • admin dashboard domain

Current Development Status

The storefront is fully functional and heavily styled.

Recent updates include:

  • Brand rename to Gravitate
  • Premium UI improvements
  • Full SEO implementation
  • Structured schema metadata

Migration in Progress

Initially the project used mock JSON data:

lib/data.ts

The application is currently migrating to Supabase-backed data through the Express API.

Next Development Steps

Database Setup

Supabase tables being finalized:

  • categories
  • products
  • product_variants
  • orders
  • contact_queries

Admin Dashboard

Building protected admin routes for:

  • category management
  • product CRUD
  • order tracking

Using Shadcn UI tables and forms.

Frontend API Integration

Replacing static imports: lib/data.ts

With API calls:

/api/v1/products
/api/v1/categories

Final Thoughts

This project demonstrates how modern tools like:

  • Next.js
  • Supabase
  • Express
  • Tailwind CSS
  • Shadcn UI

can be combined to create a scalable and production-ready D2C e-commerce platform.

Future improvements could include:

  • Razorpay / Stripe payment integration
  • Inventory automation
  • Analytics dashboards
  • Order tracking system

Discussion

I'm curious how other developers approach modern e-commerce architecture.

Would you:

A) Use Supabase directly from the frontend

B) Add a backend API layer like this project

C) Use serverless functions

Let me know your approach 👇

Top comments (0)