Building Glovera: A Premium Dual-Niche Beauty Platform from Scratch

Glovera is not just a salon booking app. It's a complete commercial ecosystem — a luxury salon management suite and a professional beauty boutique living under one roof, deployed at glovera.beauty.

This is a breakdown of how it was architected, built, and shipped.

---

The Brief

The client needed a platform that could do two things simultaneously:

1. The Studio — Allow clients to browse, book, and manage luxury beauty treatments. Stylists needed portfolio pages, a service management dashboard, and real-time booking with payment.
2. The Boutique — A fully functional e-commerce shop for premium haircare and beauty products, with cart management, wishlists, Paystack checkout, and product detail pages.

The constraint: both had to feel like a single, cohesive premium brand — not two separate apps bolted together.

---

Stack Decisions

Frontend:  React 18 + TypeScript + Vite
Styling:   TailwindCSS + shadcn/ui + Framer Motion + GSAP
Backend:   Supabase (PostgreSQL, Auth, Storage, Realtime)
State:     Zustand (global cart/wishlist) + React Query (server state)
Payments:  Paystack
AI:        Google Gemini API + Anthropic Claude API

Why Vite over Next.js?

Glovera is a client-rendered SPA with a Supabase backend. There's no need for SSR — all data is fetched client-side after auth. Vite gives us instant HMR, near-zero cold start, and a dramatically simpler deployment surface. Next.js would have added complexity without benefit here.

Why Supabase?

Supabase gave us PostgreSQL with Row Level Security, Auth with email/OAuth, file storage for product images and stylist portfolios, and real-time subscriptions for live updates — all with a clean TypeScript client. For a project of this scope, building a custom backend would have taken 3x longer.

---

The Architecture

The app is organized by domain, not by file type:

src/
├── pages/           # Route-level components (20 pages)
├── components/      # Feature components organized by domain
│   ├── home/        # Landing page sections
│   ├── services/    # Booking, service cards, VIP pane
│   ├── shop/        # Product cards, filters, cart
│   ├── dashboard/   # Admin panels
│   ├── booking/     # Multi-step booking wizard
│   └── layout/      # Navbar, Footer, Layout wrapper
├── contexts/        # React Context (Auth, Cart, Wishlist)
├── hooks/           # Custom hooks (useServices, useProducts, etc.)
├── stores/          # Zustand global stores
└── integrations/    # Supabase client

This structure means every developer knows exactly where to look. Features don't sprawl across arbitrary folders.

---

The Hardest Part: The VIP Dual-Pane Services Page

The services page was the most complex UI challenge. The requirement was a "high-fashion editorial" experience — not a standard card grid.

The solution: a two-pane layout where the left pane is a sticky preview canvas with an auto-rotating slideshow, and the right pane is a scrollable, hoverable list of treatments. Hovering any treatment on the right updates the left pane in real-time.

// The active service drives the entire left pane
const [hoveredService, setHoveredService] = useState<Service | null>(null);

// Auto-slideshow cycles through 4 images every 4.5s
useEffect(() => {
  const interval = setInterval(() => {
    setActiveImageIndex(prev => (prev + 1) % 4);
  }, 4500);
  return () => clearInterval(interval);
}, [hoveredService]);

The result feels alive — it's the kind of UI that makes users pause and explore.

---

AI-Powered Style Recommender

Glovera includes a style recommender that takes user inputs (hair type, lifestyle, goals, concerns) and returns personalized service and product recommendations.

The integration uses both Google Gemini and Anthropic Claude — with a fallback chain so if one API is unavailable, the other kicks in. The recommendations are streamed back in real-time with a typewriter effect.

This wasn't a gimmick feature. It genuinely increases conversion by helping indecisive clients commit to a specific treatment package rather than abandoning the page.

---

E-Commerce: Cart, Wishlist, and Paystack

The shop required a full e-commerce feature set:

• Cart — Zustand-powered global cart that persists across page navigation
• Wishlist — Toggle-based wishlist synced to Supabase for logged-in users
• Product Detail pages — Magnifying lens zoom, Instagram-style progress image indicators, related product panels, and a community discussion section
• Checkout — Multi-step booking wizard that bundles services and products, then hands off to Paystack for payment

The Paystack integration handles both one-time payments and plans for subscription-based services.

---

Full Admin Dashboard

Every piece of content on the site is managed through a custom admin dashboard:

Section	Capabilities
Services	Create, edit, reorder, set prices and durations
Products	Upload images to Supabase Storage, manage inventory
Blog/Journal	Rich markdown editor with live preview
Gallery	Drag-and-drop image ordering via @dnd-kit
Bookings	View, confirm, cancel appointments
Analytics	Revenue tracking and booking summaries

The dashboard uses Row Level Security (RLS) policies in Supabase — admin routes are protected at the database level, not just the UI level.

---

SEO: The Complete Stack

For a beauty brand, SEO is not optional. We implemented a complete SEO strategy across all 20 pages:

In index.html (global):

• Full Open Graph meta tags
• Twitter card meta tags
• JSON-LD structured data for the SoftwareApplication
• PWA manifest and apple-touch-icon
• Google Fonts preloaded with rel="preload"

Per-page (via react-helmet-async):

<SEO
  title="Luxury Salon VIP Treatment Menu"
  description="Browse our exclusive treatment menu..."
  schema={{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "...",
    "url": "https://www.glovera.beauty/services"
  }}
/>

In /public:

• robots.txt — guides crawlers, disallows /dashboard and /admin
• sitemap.xml — all 8 static routes with priorities
• llms.txt — structured context for AI crawlers and LLMs

The SEO component accepts a schema prop that injects JSON-LD automatically — no manual script tags needed in each page file.

---

Performance Choices

• Framer Motion for most animations (exit/enter transitions, stagger effects)
• GSAP for the hero scroll-triggered animations (where Framer's spring physics weren't precise enough)
• Lenis for buttery smooth scroll behavior across the entire app
• React Query for server state with aggressive caching — service and product lists are fetched once and cached
• Supabase Realtime for the discussion section on product pages — new comments appear instantly without polling

---

What I'd Do Differently

More aggressive code splitting. The admin dashboard is bundled with the public-facing app. In a production deployment, I'd split the admin into a separate route chunk to reduce the initial bundle size for regular visitors.

Image optimization pipeline. Currently product images are raw uploads to Supabase Storage. A Cloudflare Images or imgix integration would handle responsive sizes and WebP conversion automatically.

---

The Result

Glovera is live at glovera.beauty. It handles:

• Real-time bookings with Paystack payments
• Full product e-commerce with cart and wishlist
• AI-powered style recommendations
• A complete content management system
• A blog/journal platform
• Gallery management with drag-and-drop ordering
• A stylist portfolio system

All of this from a single Vite React application, backed by Supabase.

The codebase is clean, well-structured, and built to be handed off — or extended with new features without archaeology.