Beauty Secret
Salon Management Platform
A production-grade full-stack SaaS application for a luxury beauty salon in Bucharest, Romania. End-to-end: real-time booking, Stripe payments, role-based dashboards, internationalization, and comprehensive test coverage — built with AI-augmented development workflows.
What I Built & Why
A real-world, client-facing platform that serves three distinct user roles, processes real payments, and runs in production at www.b-secret.com.
The Problem
A beauty salon with 4 employees, 177+ services across 8 categories, and customers booking via WhatsApp and phone calls. No centralized system for availability, payments, scheduling, or employee performance tracking. Zero online presence for SEO discoverability.
The Solution
A full-stack platform with a public-facing booking experience, real-time dashboards for three roles (customer, employee, admin), integrated Stripe payments with deposit support, a loyalty rewards program, and SEO-optimized category landing pages — all internationalized in English and Romanian.
Technology Stack
How It All Fits Together
A serverless architecture built for real-time reactivity, type safety end-to-end, and production-grade security.
App Router + RSC
102 Components
Dark/Light Themes
JWT + RBAC
i18n Routing
Auth + Locale
Real-time Serverless DB
Queries + Mutations
Webhook Endpoints
Payments + Webhooks
Embed + Directions
Gallery Feed
Direct Contact
Edge Network
Serverless Backend
Auth Infrastructure
Database Schema — 16 Tables
Convex serverless database with real-time reactive queries, automatic cache invalidation, and WebSocket-driven live updates. All prices stored in cents for precision.
| Table | Purpose | Key Features |
|---|---|---|
categories | Service categories (8 types) | Slugs, display order, i18n names |
services | 177+ beauty treatments | Per-unit pricing, duration, gender tags |
employees | Team members (4 active) | Bio, specialties, commission config |
employeeAvailability | Weekly schedules | Day-of-week + HH:mm time ranges |
employeeScheduleOverrides | Day-offs & custom hours | Date-specific overrides |
customers | Booking customers | Email/phone dedup, loyalty points |
appointments | Booking records | Status machine, conflict detection |
payments | Stripe transactions | Deposit (30%) or full, refund tracking |
reviews | 5-star ratings | Tied to completed appointments |
giftCards | Gift card system | Code generation, balance, expiry |
loyaltyTiers | 4-tier rewards | Points thresholds, auto-advancement |
loyaltyHistory | Point transactions | Earn/redeem with appointment links |
salaryPayments | Payroll records | Commission + salary tracking |
expenses | Operating costs | Categorized, monthly aggregation |
changeLogs | Audit trail | Before/after values, performer |
salonSettings | Global config | Hours, lead time, slot intervals |
Application Routes — 38 Pages
Public Customer-Facing
- • Landing page (7 sections)
- • Service browsing & category pages
- • 8 SEO category landing pages
- • Sign-in / Sign-up (Clerk)
Protected Customer Dashboard
- • Appointments (upcoming & past)
- • Loyalty tier & points history
- • Profile management
- • Booking preferences
Protected Employee Dashboard
- • Today's schedule & calendar
- • Earnings & performance
- • Availability management
- • Achievements & reviews
Admin Full Management Suite — 12 Sub-pages
What the Platform Does
5-Step Booking Wizard
A guided flow that walks customers through service selection, employee preference, date/time picking with real-time availability, customer details, and a summary with payment options.
Smart Availability Engine
- ✓Dynamic slot computation per service duration
- ✓Employee weekly schedules + day-off overrides
- ✓Conflict detection prevents double-booking
- ✓60-minute lead time enforcement
- ✓30-day max advance booking window
- ✓15-minute slot intervals
- ✓Guest booking (no sign-in required)
- ✓Instant booking prefill for quick re-booking
External Services & How They Connect
Convex — Real-Time Database
- • 16 tables with optimized indexes for query patterns
- • 157+ server functions (queries, mutations, actions)
- • WebSocket-driven reactive queries (auto-updating UI)
- • HTTP actions for webhook endpoints
- • Convex validators for schema-level type safety
- • Built-in file storage for uploads
- • Server-side auth integration with Clerk JWT verification
Stripe — Payment Processing
- • Checkout session creation (booking + gift card flows)
- • Flexible payment: 30% deposit or full amount
- • Webhook handler: checkout.session.completed, charge.refunded
- • Signature verification on all webhooks
- • Product catalog sync script
- • Custom salon branding on checkout pages
- • Appointment auto-confirmation on payment success
Clerk — Auth & Identity
- • 3-level RBAC: customer, employee, admin
- • JWT metadata-based role storage
- • Combined middleware (Clerk auth + next-intl routing)
- • Server-side role gating (requirePageRole())
- • Client-side soft checks (softRequireRole())
- • Convex server-side JWT verification
- • Phone verification + autofill support
Maps, Social & Messaging
- • Google Maps embed with styled border, glow, loading shimmer
- • Address click → native map picker (Google Maps, Waze, Apple Maps)
- • Geo URI deep links for mobile, HTTPS fallback for desktop
- • Instagram gallery integration
- • WhatsApp floating action button for direct salon contact
- • Vercel Analytics & Speed Insights
Payment Flow — End to End
Completes Booking
Creates Appointment (PENDING)
Creates Stripe Checkout Session
30% Deposit or Full Payment
checkout.session.completed
Verifies Signature & Processes
Record Payment + Confirm Appointment + Award Loyalty Points
Building with Claude Code
This project demonstrates fluency in AI-augmented software development, using Claude Code as a development partner across the entire lifecycle.
CLAUDE.md — AI Agent Configuration
A comprehensive 310-line configuration file that serves as the "brain" for Claude Code — documenting the entire architecture, database schema, routing structure, component organization, data access patterns, authentication flow, and testing strategy. This enables the AI agent to make context-aware decisions across the full stack.
Structured CLAUDE.md Sections
The configuration includes: project purpose, implemented features, remaining roadmap, CLI commands, architecture decisions, Convex module reference table, routing structure, data access patterns, booking system logic, auth flow, i18n config, component organization, styling system, testing strategy, and a key files reference table.
How AI Was Leveraged
Architecture & Schema Design
Collaborative design of the 16-table database schema, index optimization strategy, and the reactive query architecture. The AI agent reasoned about normalization trade-offs, Convex-specific patterns, and real-time query performance.
Feature Implementation
Complex features like the availability slot algorithm, conflict detection, loyalty tier computation, and Stripe webhook handling were developed iteratively with Claude Code, leveraging its ability to reason about edge cases and time-based logic.
Testing & SEO Regression
The 53-test SEO regression suite and comprehensive E2E test strategy across 17 device profiles were designed and implemented with AI assistance, ensuring coverage of critical SEO signals and responsive layout integrity.
Security Hardening
Content Security Policy configuration, HSTS preload setup, dual CSP sync strategy (next.config.ts + vercel.json), and role-based access control patterns were developed with AI guidance on production security best practices.
i18n & Unicode Handling
Bilingual support with next-intl, 500+ translation strings, diacritics-aware search using Unicode NFD normalization, and Sacramento font character normalization for Romanian characters (comma-below to cedilla mapping).
Iterative UI Polish
Glass-morphism design system, GSAP animations, responsive breakpoint tuning across commit iterations, and mobile-first layout fixes — reflecting the rapid iteration cycle enabled by AI-augmented development.
CLAUDE.md Configuration Structure
The project's CLAUDE.md file acts as persistent context for the AI agent. Here's how it's organized to maximize AI effectiveness:
Testing Strategy
Unit Tests — 193 Cases
Vitest
E2E Tests — 221 Scenarios
Playwright
Cross-browser end-to-end tests running across 17 device profiles, covering every user role and critical path in the application.
| Spec | Scenarios | Coverage |
|---|---|---|
public | 47 | Public pages, SEO, navigation |
customer | 38 | Booking flow, loyalty, profile |
employee | 42 | Schedule, earnings, availability |
admin | 56 | Dashboard, CRM, analytics |
functional | 38 | Cross-cutting concerns, i18n |
DEVICE PROFILES
Security & Compliance
Security Headers
- ✓Content-Security-Policy
- ✓HSTS
- ✓X-Frame-Options: DENY
- ✓X-Content-Type-Options: nosniff
- ✓Referrer-Policy
- ✓Permissions-Policy
Application Security
- ✓Role-Based Access
- ✓JWT Verification
- ✓Webhook Signatures
- ✓Dual CSP Sync
- ✓Audit Trail
- ✓Error Boundaries
CSP Domain Allowlist
Content-Security-Policy: // Strict policy with domain allowlist default-src 'self'; script-src 'self' 'unsafe-inline' clerk.accounts.dev *.convex.cloud; connect-src 'self' *.convex.cloud api.stripe.com clerk.accounts.dev; frame-src api.stripe.com maps.google.com; img-src 'self' data: blob: *.clerk.com; style-src 'self' 'unsafe-inline';
Hover over highlighted domains to see their purpose. Dual CSP configuration syncs between next.config.ts headers and vercel.json overrides.
Architecture Trade-Offs & Rationale
Convex Over Prisma/Drizzle
Soft vs. Strict Role Checks
Time-as-Minutes for Slot Computation
Dual CSP Configuration Strategy
Locale as Route Segment
Prices in Cents
Convex Module Architecture
22 backend modules with 157+ server functions powering the entire application.
| Module | Functions | Purpose |
|---|---|---|
adminDashboard | 23+ | Revenue stats, pending appointments, staff metrics |
employeeDashboard | 11+ | Today's schedule, weekly appointments, earnings |
customerDashboard | 7+ | Appointment history, loyalty points, tier status |
employees | 21+ | CRUD, role assignment, availability mutations |
services | 6+ | Service catalog management with category filtering |
categories | 7+ | Category CRUD and slug-based lookups |
appointments | 8+ | Booking CRUD with conflict detection |
availability | 2+ | Smart slot computation with overrides |
stripe | 10+ | Checkout sessions, branding, metadata |
http | 1 | Stripe webhook endpoint router |
payments | 3+ | Payment tracking and status management |
reviews | 3+ | Rating aggregation and listing |
giftCards | 4+ | Code generation, balance, redemption |
customers | 4+ | CRUD with email/phone deduplication |
salaryPayments | 4+ | Payroll and commission tracking |
loyaltyTiers | 2+ | Tier definitions and point thresholds |
loyaltyHistory | 2+ | Point transaction history |
profileChangeRequests | 4+ | Employee profile edit approval workflow |
salonSettings | 2+ | Global settings singleton |
expenses | 2+ | Operating cost management |
seed | 1 | Database seeding (177 services, 4 employees, 4 tiers) |
helpers/* | 6+ | Auth, conflicts, pricing, loyalty, changelog, dedup |