Beauty Secret
Salon Management Platform
A production-grade full-stack SaaS platform for a luxury beauty salon in Bucharest, Romania. 113K+ lines of code powering real-time booking, Stripe payments, Twilio SMS & SendGrid email automation, laser consent digital forms, inventory management, 14 automated cron jobs, 4 webhook integrations, a 4-tier loyalty program, and role-based dashboards for 3 user types — built with AI-augmented development workflows across 468 commits.
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 10 categories (including laser hair removal), and customers booking via WhatsApp and phone calls. No centralized system for availability, payments, scheduling, inventory tracking, or employee performance. Paper-based laser consent forms, no automated reminders, and zero online presence for SEO discoverability.
The Solution
A full-stack platform with a public-facing booking experience, real-time dashboards for three roles, Stripe payments (online + in-store QR), Twilio SMS & SendGrid email automation with 9 reminder types, digital laser consent forms with QR signing, inventory management (448 products), a 4-tier loyalty program, multi-channel marketing campaigns, 14 automated cron jobs, 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
203 Components
Dark/Light Themes
JWT + RBAC
i18n Routing
Auth + Locale
Real-time Serverless DB
Queries + Mutations
Webhook Endpoints
Payments + Webhooks
SMS + Status Callbacks
Email + Campaigns
Embed + Directions
Gallery Feed
Direct Contact
Edge Network
Serverless Backend
Auth Infrastructure
Database Schema — 38 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 |
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 + googleReviews | 5-star ratings | Tied to completed appointments |
giftCards | Gift card system | Code generation, balance, expiry |
loyaltyTiers + Transactions + Benefits | 4-tier loyalty system | Tiers, transactions, benefits, notifications, expiry |
scheduledReminders | Scheduled reminders | 9 types: confirmation, 24h, 2h, deposit, post-visit |
smsCampaigns + smsMessages | Marketing campaigns | SMS/email/both, audience filtering, delivery tracking |
inventoryItems + History | Inventory management | 448 products, 4 categories, restock, cost reports |
laserConsentForms + TreatmentSheets | Laser digital forms | Consent + treatment sheets, QR signing, PDF snapshots |
promotions + promoRedemptions | Promotions system | Percent/flat, first-visit, one-time per customer |
depositRequests | Deposit requests | Pending/paid/expired, Stripe URL via SMS/email |
changeLogs | Audit trail | Before/after values, performer |
salonSettings | Global config | Hours, lead time, slot intervals |
Application Routes — 51 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 — 16 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
- • 38 tables with optimized indexes for query patterns
- • 300+ 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, expired, charge.refunded
- • Signature verification on all webhooks
- • Product catalog sync script
- • Custom salon branding on checkout pages
- • Appointment auto-confirmation on payment success
Twilio — SMS Notifications
- • 9 reminder types: confirmation, 24h, 2h, consultation, deposit, post-visit
- • HMAC-SHA1 webhook signature verification (Web Crypto)
- • SMS cost optimization: short messages, dedup guards, group-aware
- • Retry logic with attemptCount, maxAttempts, errorCode tracking
- • Delivery tracking via status callbacks → real-time activity feed
- • Phone normalization: Romanian → E.164 format
- • Consent-aware sending: respects smsConsent per customer
SendGrid — Email Campaigns
- • 13 branded email templates (1,000+ lines, bilingual)
- • Types: booking, reminder, cancellation, welcome, birthday, flash sale, loyalty
- • Multi-channel campaigns: SMS/email/both with audience filtering
- • Email i18n: 150+ bilingual strings for template rendering
- • Delivery tracking: delivered, bounce, dropped, spamreport webhooks
- • Batched sending: 50/sec with 1s delay between batches
- • Admin template preview gallery with themed categories
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 & Reviews
- • Google Maps embed with styled border, glow, loading shimmer
- • Google Reviews sync via Places API (6-hour cron)
- • Live Instagram feed (magazine masonry, hourly sync, token auto-refresh)
- • WhatsApp floating action button for direct salon contact
- • Geo URI deep links for mobile, HTTPS fallback for desktop
- • 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 590-line configuration file that serves as the "brain" for Claude Code — documenting the entire architecture, 38-table database schema, 37 Convex module map, 14 cron jobs, 4 webhook endpoints, routing structure, messaging system, laser forms, inventory, loyalty program, and deployment configuration. This enables the AI agent to make context-aware decisions across the full stack.
Structured CLAUDE.md Sections
The configuration includes: project purpose, 25+ implemented feature sections (booking, calendar, payments, deposits, loyalty, promotions, gift cards, reviews, gallery, staff management, inventory, laser forms, messaging, customer onboarding, GDPR), remaining roadmap, CLI commands, architecture with Convex module map (37 files), 21 helper modules, component organization (203 components), and key files reference table.
How AI Was Leveraged
Architecture & Schema Design
Collaborative design of the 38-table database schema, index optimization strategy, 14 cron job scheduling, 4 webhook endpoint architecture, and the reactive query patterns. The AI agent reasoned about normalization trade-offs, Convex-specific patterns, and real-time query performance across 300+ server functions.
Feature Implementation
Complex features like the availability slot algorithm, conflict detection, loyalty tier computation, Stripe webhook handling, Twilio SMS routing, SendGrid email templates (13 types, 1000+ lines), laser consent digital forms with QR signing, inventory management, and multi-channel campaign system were developed iteratively with Claude Code.
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
- ✓Stripe Webhook Signatures
- ✓Twilio HMAC-SHA1 Verification
- ✓Clerk Svix HMAC-SHA256 Verification
- ✓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
Twilio + SendGrid Dual-Channel Messaging
QR-Based Laser Consent Signing
Convex Module Architecture
37 Convex modules + 21 shared helpers with 300+ 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 / employeeDocuments | 21+ | CRUD, role assignment, availability mutations |
services / categories | 13+ | Service catalog management with category filtering |
appointments | 8+ | Booking CRUD with conflict detection |
availability | 2+ | Smart slot computation with overrides |
stripe / payments | 13+ | Checkout sessions, branding, metadata |
http | 4 | 4 webhook endpoints: Stripe, Twilio, SendGrid, Clerk |
messaging / messagingActions | 10+ | Twilio SMS + SendGrid email sending |
smsCampaigns | 8+ | Multi-channel campaigns, audience, preview, stats |
reminders | 6+ | 9 reminder types, group-aware scheduling |
loyaltyTiers / Transactions / Benefits / Notifications | 12+ | Full loyalty: tiers, transactions, benefits, notifications |
reviews / googleReviews | 6+ | Rating aggregation and listing |
giftCards | 4+ | Code generation, balance, redemption |
customers / clerkSync | 8+ | CRUD with email/phone deduplication |
customerOnboarding / Actions | 6+ | Customer invitation flow, GDPR, deferred onboarding |
inventory / inventoryDashboard | 8+ | 448 products, 4 categories, restock, cost reports |
laserConsentForms / TreatmentSheets / Tokens | 10+ | Consent forms, treatment sheets, QR tokens, PDF generation |
promotions | 4+ | Promo CRUD, first-visit discount, one-time per customer |
depositRequests / Mutations | 4+ | Deposit requests: Stripe URL via SMS/email, expiry cron |
closingTaskRotation | 3+ | Fair count-based closing task rotation |
profileChangeRequests | 4+ | Employee profile edit approval workflow |
profileTranslation | 2+ | Auto-translate employee RO→EN bios/mottos |
salaryPayments / expenses | 6+ | Payroll and commission tracking |
instagram | 3+ | IG token refresh + post sync (hourly) |
crons | 14 | 14 scheduled jobs (campaigns, reviews, loyalty, payments) |
salonSettings | 2+ | Global settings singleton |
seed | 1 | Database seeding (177 services, 4 employees, 4 tiers) |
helpers/* (21 modules) | 40+ | Auth, conflicts, pricing, loyalty, changelog, dedup |