Back to Projects

Flora Vintage

E-Commerce Platform

A curated vintage clothing marketplace with a "quiet luxury" design language. Full e-commerce functionality including product management, Stripe checkout, lookbooks, a journal, and an admin dashboard — all built from scratch.

Next.js 14 Supabase Stripe Cloudinary Claude AI Tailwind CSS TypeScript
Flora Vintage E-Commerce Interface

Project Overview

Flora Vintage is a fully custom e-commerce platform designed for curated vintage clothing. Rather than relying on a pre-built storefront like Shopify, the entire system was built from scratch to achieve a specific aesthetic and workflow tailored to a single-owner boutique.

The architecture uses Next.js App Router with server components for fast page loads, Supabase (PostgreSQL) for all persistent data, Stripe Checkout for payments, and Cloudinary for image hosting. A custom admin dashboard lets the owner manage products, orders, lookbooks, journal posts, stockists, and events.

The design system follows a "quiet luxury" approach — restrained typography using Cormorant Garamond and Inter, muted color palettes, and generous whitespace that lets the product photography take center stage.

Key Features

A complete e-commerce system designed for a curated vintage boutique

One-of-a-Kind Commerce

Each vintage piece is unique. Products use a status model — draft, in stock, out of stock — where Stripe webhooks automatically mark items as sold after purchase. No cart or inventory count needed.

Stripe Checkout

Server-side price validation ensures prices always come from the database, never the client. Webhook handlers process successful charges and refunds, updating order and product status automatically.

Cloudinary Media

All product, lookbook, and journal images are hosted on Cloudinary with unsigned upload presets. Client-side uploads use CldUploadWidget with automatic optimization and responsive delivery.

Claude AI Descriptions

Product descriptions are generated by Claude Sonnet, which analyzes uploaded product images alongside metadata like era, brand, and condition. A curated system prompt enforces the brand's "spare and direct" voice — no superlatives, no clichés — producing consistent, editorial-quality copy with a single click.

Supabase Auth & RLS

Cookie-based authentication via @supabase/ssr protects all admin routes through Next.js middleware. Row Level Security policies ensure public queries only return in-stock products while admins can manage everything.

Admin Dashboard

A complete back-office with inline-editable table cells for quick updates. Server components handle filtering and sorting via URL search params — no client-side state management needed.

Technology Deep Dive

The tools and libraries that power Flora Vintage

Frontend

Next.js 14 (App Router)

Server components, API routes, and middleware-based auth protection

TypeScript

Strict mode with centralized type definitions for all domain models

Tailwind CSS

Custom "quiet luxury" design tokens: Cormorant Garamond + Inter typography

Backend Services

Supabase (PostgreSQL)

All persistent data with Row Level Security and cookie-based auth via @supabase/ssr

Stripe

Checkout sessions, webhook processing for orders, and refund handling

Cloudinary

Image hosting with unsigned upload presets and automatic optimization

AI & Developer Experience

Claude AI (Anthropic SDK)

Vision-powered product description generation with curated brand voice prompts

Tiptap

Headless rich text editor for journal posts and product descriptions

Vercel

Preview and production deployments with branch-based workflow

Interested in Learning More?

Feel free to reach out if you'd like to discuss the technical decisions, architecture choices, or implementation details behind Flora Vintage.