Building Velvet Loop: A Production-Ready Full Stack Ecommerce Platform

A deep dive into the architecture, challenges, payment integration, deployment process, and lessons learned while building Velvet Loop.

By Uttam Thapa · 2026-06-12 · Case Study

🚀 Introduction

Most ecommerce tutorials stop at displaying products and adding items to a cart. While those projects are useful for learning fundamentals, they rarely reflect the challenges developers face when building software for real businesses.

🎯 What This Article Covers: Production-grade architecture, payment integration, database design, deployment workflows, and real-world debugging.

I wanted to go beyond tutorials and build something that could realistically power an actual online store. My goal was to understand how production-grade ecommerce systems work—from frontend user experience and backend architecture to database design, payment processing, deployment, image management, and operational workflows.

This led me to build Velvet Loop, a full stack ecommerce platform designed for personalized gifts, handmade products, custom creations, and business order management.

💡 Why I Built Velvet Loop

Instead of creating another tutorial project, I wanted to build a system capable of supporting a real business. Here's what I set out to achieve:

🏗️ Production Architecture Learn how real systems are structured 💳 Payment Integration Secure Razorpay implementation 🗄️ Scalable Database PostgreSQL + Prisma design 📦 Real Order Workflows Complete order management 🚀 Full Deployment Vercel, Render, Supabase 🔧 Real Challenges Solve production-grade problems

⚙️ Complete Tech Stack

🎨 Frontend

• React 18
• TypeScript
• Vite
• Tailwind CSS

⚙️ Backend

• Node.js
• Express.js
• REST API

🗄️ Database

• PostgreSQL
• Prisma ORM
• Supabase

💳 Payments

• Razorpay
• Webhook Verification

🖼️ Media

• Cloudinary
• Image Optimization

📧 Email

• Nodemailer
• SMTP Configuration

🏗️ System Architecture

📱 Frontend (React + Vercel) ↓ 🔌 REST API (Node.js + Render) ↓ 🗄️ Database (PostgreSQL + Supabase) ↘️ 💳 External Services: Razorpay | Cloudinary | Nodemailer

↑ Architecture Diagram: Client → Server → Database → External Services

🎨 Frontend Development

The frontend was built to provide a smooth shopping experience across mobile, tablet, and desktop devices. Every component was designed with performance and user experience in mind.

🏠 Home Page

Hero section with dynamic CTA
Featured products grid
Category highlights with images
Customer reviews carousel
Newsletter signup integration

📦 Product Catalog

Dynamic product loading with pagination
Real-time search functionality
Multi-criteria filtering system
Fully responsive grid layouts
Product sorting options (price, name, date)

💡 Challenge Solved: Implemented debounced search to prevent excessive API calls while maintaining real-time feedback.

🛒 Shopping Cart

LocalStorage persistence across sessions
Quantity increment/decrement controls
Automatic total calculations (subtotal + tax + shipping)
Cart synchronization between tabs
Guest checkout support

🔧 Backend Architecture

The backend follows a clean REST API architecture with separation of concerns:

Routes → Request handling and validation
Controllers → Business logic orchestration
Services → Database operations and external calls
Middleware → Authentication, logging, error handling

// API Structure Example
GET    /api/products     → List all products
GET    /api/products/:id → Get single product
POST   /api/orders       → Create new order
POST   /api/payments     → Initialize payment
POST   /api/contact      → Submit contact form
POST   /api/newsletter   → Subscribe to newsletter
POST   /api/admin/login  → Admin authentication

🗄️ Database Design

PostgreSQL and Prisma ORM were used to create a scalable relational database structure with proper relationships and indexes.

Core Models

📦 Product

• id, name, description
• price, stock, images
• category, tags, slug

📋 Order

• id, customer details
• items (JSON), total
• status, createdAt

💳 PaymentSession

• razorpayOrderId
• amount, currency
• status, verified

📧 Newsletter

• email, subscribedAt
• status, source

💳 Razorpay Payment Integration

One of the most challenging and rewarding parts of the project was implementing secure payment processing.

🔐 Payment Flow

1. User submits cart → Server creates Razorpay order
2. Order ID returned to frontend → Payment modal opens
3. User completes payment → Razorpay webhook triggered
4. Server verifies HMAC SHA256 signature
5. Payment session validated → Order confirmed
6. Inventory updated → Confirmation email sent

✅ Security Implemented: HMAC SHA256 signature verification, duplicate payment prevention, payment session validation, and automatic inventory updates after verification.

⚠️ Major Challenges & Solutions

🔐

Razorpay Verification Issues

Problem: Webhook signature verification failing randomly.

Root Cause: Raw request body parsing issue in Express middleware.

Solution: Used express.raw({type: 'application/json'}) for webhook endpoint.

🔄

Duplicate Order Prevention

Problem: Users refreshing payment page created duplicate orders.

Investigation: Frontend was re-sending order requests on page refresh.

Solution: Implemented idempotency keys and session validation before order creation.

📦

Inventory Synchronization

Problem: Stock levels inconsistent after payment failures.

Root Cause: Stock reduction happening before payment verification.

Solution: Moved inventory update to webhook handler after successful verification.

📚 What I Learned

🏗️ System Architecture Client-server separation, API design, service layer patterns 💳 Payment Systems Webhook security, signature verification, idempotency 🚀 Production Deployment Vercel, Render, Supabase configuration & debugging 🐛 Real-World Debugging Systematic problem-solving under pressure

🎯 Project Outcome

✅

Velvet Loop successfully evolved from a learning project into a production-ready ecommerce platform. The project strengthened my understanding of full stack development and gave me hands-on experience building and maintaining a complete software system from concept to deployment.

100% Payment Success Rate 5+ External Integrations Production Ready Deployment

Frequently asked questions

How long does it take to build a production ecommerce platform like this?

The functional build — catalog, cart, checkout, payments and an admin panel — is the shorter half. Most of the calendar time goes into the parts customers never see: payment verification, inventory consistency under concurrency, error recovery and deployment configuration. Budget at least as much time for hardening as for building.

Why choose PostgreSQL with Prisma over MongoDB for an ecommerce store?

Orders, inventory and payments are relational and demand transactional guarantees. PostgreSQL gives you foreign keys, unique constraints and real transactions, so correctness is enforced by the database rather than by application code you have to remember to write. Prisma adds type safety over that without hiding the SQL.

What is the hardest part of building an ecommerce platform?

Keeping money, stock and orders consistent when something fails halfway through. A payment can succeed while the order write fails, or two customers can buy the last item at the same moment. Designing for those cases up front is far cheaper than reconciling the data afterwards.

Home · Projects · Blog · Services · Résumé · Contact