Forem: Jayesh Patil

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

Jayesh Patil — Fri, 13 Mar 2026 06:08:52 +0000

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:

User adds products to cart
Clicks checkout
A formatted WhatsApp message is generated
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 👇

Hi, I'm Jayesh Patil, a Full Stack Developer passionate about building scalable web applications. I'm currently looking for job opportunities or referrals. If you know any openings, please reach out at work@jayeshbpatil.com. Thank you!

Jayesh Patil — Sun, 15 Feb 2026 19:15:46 +0000

I Deployed a React 19 SPA on Cloudflare Workers — Here’s How

Jayesh Patil — Mon, 02 Feb 2026 15:30:19 +0000

🚀 Project Overview

I recently built Divines Code, a modern Single Page Application (SPA) for a digital agency.
The goal was to use the latest React ecosystem while deploying globally at the edge using Cloudflare Workers.

This post breaks down the tech stack, architecture, and deployment approach.

🧰 Tech Stack

React 19 (experimental)

Vite 6

TypeScript

Tailwind CSS v4

React Router DOM v7

Cloudflare Workers (Wrangler)

🏗️ Architecture

The app is a client-side rendered SPA.

Vite builds the app into a static dist/ folder

A Cloudflare Worker serves static assets

If a route isn’t found, the Worker falls back to index.html

React Router handles routing on the client

This allows fast edge delivery without a traditional server.

🧭 Routing Strategy

Uses HashRouter for compatibility with static hosting

Routes include:

/ Home

/about

/services

/work

/contact

A ScrollToTop component resets scroll on navigation

⚡ Performance Optimizations

Pages are lazy-loaded using React.lazy and Suspense

Custom loading spinner improves UX

Tailwind CSS keeps styles lightweight and consistent

☁️ Cloudflare Worker Setup

The Worker:

Serves assets from ./dist

Handles SPA fallback routing

Adds security headers:

X-Content-Type-Options

X-Frame-Options

Controls caching via Cache-Control

This keeps the app fast and secure at the edge.

📁 Project Structure
components/ reusable UI components
pages/ route-based pages
src/worker.ts Cloudflare Worker entry
App.tsx routing setup

🧠 Final Thoughts

This setup turned out to be:

⚡ Fast

🌍 Globally distributed

🧼 Clean to maintain

If you’re experimenting with React 19 or deploying SPAs on Cloudflare Workers, I’d love to hear your experience.

How I Built My Developer Portfolio with React, GSAP, and Performance in Mind

Jayesh Patil — Sun, 25 Jan 2026 09:33:41 +0000

Hi, I’m Jayesh Patil, a Full Stack Developer focused on building high-performance, scalable, and visually immersive web applications.

In this post, I want to share how I built my personal developer portfolio, the technical decisions behind it, and how I balanced animations, performance, and SEO in a real-world React project.

This portfolio is not just a design experiment — I treated it like a production-ready application.

🚀 Why I Built This Portfolio

As developers, our portfolio is often the first impression:

For recruiters
For clients
For search engines

I wanted my portfolio to:

Feel premium and modern
Be animation-rich but not slow
Work well on mobile devices
Be discoverable on Google, even as a Single Page Application (SPA)

🛠 Tech Stack I Used

Here’s the core stack behind the project:

React 19 + Vite – fast development and optimized builds
Tailwind CSS – clean, scalable UI styling
GSAP – complex timeline-based animations
Framer Motion – layout transitions and micro-interactions
Lenis – smooth, momentum-based scrolling
Cloudflare Pages – fast global deployment

The focus was not just visuals, but engineering discipline.

⚠️ Challenges I Faced

Building an animation-heavy SPA comes with real challenges:

Animations blocking page load
Poor Largest Contentful Paint (LCP) due to hero effects
SEO issues common with React SPAs
Maintaining smooth UX on low-end mobile devices

A beautiful website is useless if it’s slow or invisible to search engines.

✅ How I Solved These Problems

1️⃣ Performance-First Animations

Instead of running everything on page load, I:

Deferred heavy GSAP animations
Used requestIdleCallback so animations run only when the browser is idle
Disabled expensive effects on mobile devices

This significantly reduced Total Blocking Time (TBT).

2️⃣ Improving LCP Without Killing the Design

The hero section was visually heavy, so I:

Ensured critical text renders immediately
Added an SEO-safe hidden <h1> containing my name and role
Let animations enhance the UI instead of blocking it

This improved both performance metrics and search visibility.

3️⃣ Making SEO Work in a React SPA

To make the portfolio Google-friendly, I implemented:

Proper structured data (JSON-LD) with a Person schema
Clean robots.txt and sitemap.xml
Real anchor links instead of JavaScript-only navigation

This helps search engines clearly understand who I am and what I do.

🧠 What This Project Represents

This portfolio reflects how I approach development:

Clean architecture over shortcuts
Performance over unnecessary effects
UX and engineering working together

I believe even personal projects should follow real-world production standards.

🔗 Links

🌐 Portfolio: https://jayeshbpatil.com
💻 GitHub: https://github.com/Jayeshpatil9869

✨ Final Thoughts

This portfolio is an evolving project.

I’ll continue improving it as I explore frontend architecture, performance optimization, and full-stack development.

If you have feedback or questions, I’d love to hear them.

Thanks for reading!