First Class Unique Boutique
A luxury fashion storefront where elegance meets code — curated collections, cart and checkout with Stripe, Paystack, and Flutterwave, and a live chat concierge.
Overview
The product
First Class Unique Boutique is a premium fashion e-commerce experience built around one promise: where luxury meets comfort. A hero slider, shop-by-category grids, and featured, new, and popular product rails showcase curated looks, while a persistent cart with size and color variants, JWT-secured accounts with wishlists, and a multi-provider checkout — Stripe, Paystack, and Flutterwave — turn browsing into a complete commerce flow. A live chat widget keeps the concierge feel on every screen.
Stripe + Paystack + Flutterwave
Payments
Persistent, variant-aware
Cart
JWT + wishlist
Accounts
40+ shadcn components
UI Kit
The problem
Luxury retail needed a storefront that matched its brand
A fashion boutique with a premium identity had no way to sell online with the same polish as its physical experience — no curated product discovery, no reliable checkout for Nigerian customers, and no way to build a relationship beyond the sale.
- No online storefront — sales depended entirely on in-person visits
- Payment methods that ignored local reality — global processors only, no Paystack or Flutterwave
- No cart persistence, accounts, wishlists, or order tracking for repeat customers
The solution
An e-commerce experience with luxury-grade polish
I built the storefront as a fast React + Vite app with a shadcn-based design system. Curated rails — hero slider, categories, featured, new arrivals, popular — drive discovery, while a localStorage-persisted cart with size/color variants handles selection. A JWT-authenticated account layer adds wishlists and order history, and a Node/Express + SQLite API orchestrates orders with Stripe, Paystack, and Flutterwave, so every customer pays the way that suits them.
- Curated product discovery across hero, category, and collection rails
- Persistent cart with size and color variants plus a JWT-secured account layer
- Multi-provider checkout — Stripe, Paystack, and Flutterwave — built for Nigerian buyers
Architecture
The system behind First Class Unique Boutique
A classic commerce split: a polished Vite frontend for discovery and cart, and an Express API handling auth, wishlists, orders, and payment orchestration against SQLite.
- 01
Storefront
React 18 · ViteHero slider, category grids, and product rails with a shadcn design system.
- 02
Cart & Accounts
React Context · JWTPersistent cart with size/color variants; auth, wishlist, and profile flows.
- 03
Commerce API
Express · SQLiteProducts, orders, order items, and wishlist endpoints with JWT protection.
- 04
Checkout
Stripe · Paystack · FlutterwaveMulti-provider payment orchestration for global and local customers.
- 05
Concierge
Chat widgetA live chat widget keeps support one tap away on every screen.
Tech stack
Tools that earned their place
Frontend
- React 18
- TypeScript
- Vite
- Tailwind CSS v4
UI
- shadcn/ui
- Radix UI
- Recharts
Backend
- Express
- SQLite
- JWT
Payments
- Stripe
- Paystack
- Flutterwave
UX
- Cart persistence
- Live chat
Features
What it does, and why it matters
Curated product rails
Hero slider, shop-by-category, featured, new arrivals, and popular product sections.
Persistent cart
Size- and color-aware cart backed by localStorage — it survives refreshes and sessions.
Accounts & wishlists
JWT-secured registration and login with wishlists and order history.
Multi-provider checkout
Stripe for global cards, Paystack and Flutterwave for Nigerian customers.
Live chat concierge
An in-app chat widget that keeps the boutique's personal touch online.
Challenges
What nearly broke the system
One cart, many variants
Items differ by size and color, so the same product could appear as several distinct line items. I keyed cart entries by id + size + color so quantity updates and removals never merge or misplace variants.
Payments that respect the customer
Global-only checkout would have alienated local buyers. I integrated Stripe alongside Paystack and Flutterwave so customers pay however they're used to paying.
Polish without a backend team
The storefront needed premium feel with minimal ops. I kept the API lean — Express + SQLite — and pushed everything discoverable into the static-first frontend.
Lessons learned
What shipping taught me
Commerce UX is discovery plus trust — curated rails and multi-provider payments are the two halves of the same sale.
Variant-aware carts are a data-model problem: key by id + size + color before you touch the UI.
Local payment rails (Paystack, Flutterwave) are product features, not integrations.
Impact
Why this actually matters
First Class Unique Boutique takes a luxury brand online without diluting it — a polished storefront for discovery, accounts and wishlists for retention, and payment rails that work for Nigerian customers first.
- Curated discovery turns casual visitors into browsers — and browsers into buyers
- Persistent carts and accounts make returning and completing purchases effortless
- Stripe + Paystack + Flutterwave mean no customer is turned away at checkout
Gallery
Inside the product
Storefront
Hero slider and curated rails that make discovery feel editorial.
Checkout
Multi-provider payment flow with Stripe, Paystack, and Flutterwave.
Concierge
Live chat widget keeping support one tap away.