VibeCart
AI-powered e-commerce with auth, cart, orders, and CI/CD deployed on Render + Vercel.
Overview
VibeCart is a production-grade, full-stack e-commerce platform built end-to-end in a TypeScript monorepo. It includes a React/Tailwind storefront, an Express/PostgreSQL API, role-based access control, a full checkout flow, and a CI/CD pipeline deployed on Render and Vercel.
The Problem
Most beginner e-commerce tutorials skip the hard parts — auth that actually works, a real database schema, admin control, and a deployment pipeline that doesn't break on push. I wanted to build something I could ship, not just demo.
What I Built
- 1Customer-facing storefront with product catalog, search, cart, wishlist, and protected checkout using React, Vite, TypeScript, and Tailwind CSS.
- 2REST API built with Express, Prisma ORM, and PostgreSQL (Supabase) covering 20+ models: users, products, variants, orders, payments, shipments, reviews, and promotions.
- 3Complete JWT authentication system with access tokens, DB-backed refresh tokens, token revocation, email verification via Resend, bcrypt password hashing, CORS, and Helmet.
- 4Role-based access control with a separate admin dashboard for product, order, and user management.
- 5CI/CD pipeline with GitHub Actions — lint, typecheck, test on every PR, auto-deploy to Render (API) and Vercel (frontend).
- 6Sentry error tracking and Pino structured logging across the backend.
- 7Shared TypeScript types between frontend and API via a monorepo workspace package.
Key Technical Decisions
20+ model Prisma schema
Covers the full commerce domain: product variants, inventory, order line items, payment records, shipment tracking, customer reviews, and promotional discounts — all with referential integrity.
Controller–service architecture
Every API route delegates to a service layer with Zod validation on every endpoint. Standardized API response contracts across all routes ensure the frontend always knows the shape of the data.
Dual deployment pipeline
GitHub Actions builds and tests on every push. Render handles the Express API (auto-deploy on main merge) and Vercel handles the frontend — zero manual deployments.
Outcome
A fully functional e-commerce platform covering auth, catalog, cart, checkout, admin, CI/CD, and observability — the kind of scope most tutorial projects skip. Demonstrated ability to architect and ship a real product end-to-end.
What I Learned
Designing a proper auth flow from scratch (access + refresh + revocation + email verification) was more complex than expected. Building the Prisma schema to handle order state transitions cleanly required multiple iterations.