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

Source: Dev.to

Introduction

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

Project: MasalaBrand (Gravitate) – a Direct‑to‑Consumer (D2C) platform for a premium spices brand based in Nashik, India.
🌐 Live website:

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 includes:

• A customer‑facing storefront
• An internal admin dashboard
• A backend API that connects to Supabase

All components live in a monorepo.

High‑Level Architecture

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

1️⃣ Main Web Application

Customer‑facing storefront handling:

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

2️⃣ Admin Panel

Internal dashboard for managing:

• Categories
• Products
• Orders
• Customer inquiries

Runs locally at http://localhost:3001.

3️⃣ Backend API

A lightweight Express server that acts as a middle layer between the frontend and Supabase PostgreSQL, preventing direct client access to the database.

Runs locally at http://localhost:3002.

Backend API Endpoints

These routes handle category data, product listings, product details, and contact queries.

Key Architectural Decisions

Monorepo Setup

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

• Shared utilities
• Faster development cycles
• Unified environment management
• Consistent dependency versions

WhatsApp Checkout System

Instead of a full payment gateway, the platform uses a WhatsApp‑based checkout:

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

This approach works well for small businesses transitioning to digital commerce.

SEO Strategy

SEO was a major priority. Implementations include:

• Dynamic metadata
• Robots configuration
• Sitemap generation
• Structured Schema.org JSON‑LD (e.g., LocalBusiness, Organization)

These enhancements improve Google indexing and discoverability.

Project Structure

Main Application (/app)

/app
  /components
  /lib
  layout.tsx          // global fonts, metadata, schema injection
  cartStore.ts        // global cart state (Zustand)
  whatsapp.ts        // generates WhatsApp checkout payload

Backend (/backend/src)

• server.ts – configures Express server, CORS policies, API routes, and Supabase connection.
• CORS allowed for localhost, production storefront, and admin dashboard domains.

Current Development Status

• Storefront is fully functional and heavily styled.
• Recent updates: brand rename to Gravitate, premium UI improvements, full SEO implementation, structured schema metadata.

Migration in Progress

The project originally used mock JSON data (lib/data.ts). It is now migrating to Supabase‑backed data via the Express API.

Next Development Steps

Database Setup

Finalize Supabase tables:

• categories
• products
• product_variants
• orders
• contact_queries

Admin Dashboard

Build protected admin routes for:

• Category management
• Product CRUD
• Order tracking

Utilize Shadcn UI tables and forms.

Frontend API Integration

Replace static imports (lib/data.ts) with live API calls:

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

Final Thoughts

This project demonstrates how modern tools—Next.js, Supabase, Express, Tailwind CSS, Shadcn UI—can be combined to create a scalable, production‑ready D2C e‑commerce platform.

Potential Future Improvements

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

Discussion

How do you approach modern e‑commerce architecture?

• A) Use Supabase directly from the frontend
• B) Add a backend API layer like this project
• C) Use serverless functions

Share your thoughts below!