Beauty Secret
Platformă de Management Salon
O aplicație SaaS full-stack de nivel producție pentru un salon de frumusețe de lux din București, România. End-to-end: rezervări în timp real, plăți Stripe, tablouri de bord bazate pe roluri, internaționalizare și acoperire completă de teste — construită cu fluxuri de dezvoltare augmentate cu AI.
Ce Am Construit și De Ce
O platformă reală, orientată spre clienți, care deservește trei roluri distincte de utilizatori, procesează plăți reale și rulează în producție la www.b-secret.com.
Problema
Un salon de frumusețe cu 4 angajați, peste 177 de servicii în 8 categorii, și clienți care rezervau prin WhatsApp și apeluri telefonice. Niciun sistem centralizat pentru disponibilitate, plăți, programare sau urmărirea performanței angajaților. Zero prezență online pentru descoperire SEO.
Soluția
O platformă full-stack cu o experiență de rezervare publică, tablouri de bord în timp real pentru trei roluri (client, angajat, admin), plăți Stripe integrate cu suport pentru avans, un program de recompense de loialitate și pagini de destinație de categorie optimizate SEO — toate internaționalizate în engleză și română.
Stiva Tehnologică
Cum Se Îmbină Totul
O arhitectură serverless construită pentru reactivitate în timp real, siguranță de tip end-to-end și securitate de nivel producție.
App Router + RSC
102 Componente
Teme Dark/Light
JWT + RBAC
Rutare i18n
Auth + Limbă
BD Serverless Timp Real
Interogări + Mutații
Endpoint-uri Webhook
Plăți + Webhook-uri
Embed + Direcții
Feed Galerie
Contact Direct
Rețea Edge
Backend Serverless
Infrastructură Auth
Schema Bazei de Date — 16 Tabele
Bază de date serverless Convex cu interogări reactive în timp real, invalidare automată a cache-ului și actualizări live prin WebSocket. Toate prețurile stocate în bani pentru precizie.
| Tabel | Scop | Caracteristici Cheie |
|---|---|---|
categories | Categorii de servicii (8 tipuri) | Slug-uri, ordine afișare, nume i18n |
services | Peste 177 de tratamente de frumusețe | Prețuri per unitate, durată, etichete gen |
employees | Membri echipă (4 activi) | Biografie, specializări, configurare comision |
employeeAvailability | Programe săptămânale | Zi din săptămână + intervale orare HH:mm |
employeeScheduleOverrides | Zile libere & ore personalizate | Suprascrieri specifice datei |
customers | Clienți pentru rezervări | Deduplicare email/telefon, puncte loialitate |
appointments | Înregistrări de rezervare | Mașină de stare, detectare conflicte |
payments | Tranzacții Stripe | Avans (30%) sau integral, urmărire rambursare |
reviews | Evaluări cu 5 stele | Legate de programările finalizate |
giftCards | Sistem carduri cadou | Generare cod, sold, expirare |
loyaltyTiers | Recompense pe 4 niveluri | Praguri de puncte, avansare automată |
loyaltyHistory | Tranzacții de puncte | Câștigare/răscumpărare cu link-uri programare |
salaryPayments | Înregistrări salarizare | Urmărire comision + salariu |
expenses | Costuri operaționale | Categorizate, agregare lunară |
changeLogs | Pistă de audit | Valori înainte/după, executant |
salonSettings | Configurare globală | Ore, timp de avans, intervale slot |
Rute Aplicație — 38 Pagini
Public Orientat spre Client
- • Pagină principală (7 secțiuni)
- • Navigare servicii & pagini de categorie
- • 8 pagini de destinație SEO categorie
- • Conectare / Înregistrare (Clerk)
Protejat Tablou de Bord Client
- • Programări (viitoare & trecute)
- • Nivel loialitate & istoric puncte
- • Gestionare profil
- • Preferințe de rezervare
Protejat Tablou de Bord Angajat
- • Programul zilei & calendar
- • Câștiguri & performanță
- • Gestionare disponibilitate
- • Realizări & recenzii
Admin Suită Completă de Management — 12 Sub-pagini
Ce Face Platforma
Wizard de Rezervare în 5 Pași
Un flux ghidat care îndrumă clienții prin selecția serviciului, preferința angajatului, alegerea datei/orei cu disponibilitate în timp real, detaliile clientului și un rezumat cu opțiuni de plată.
Motor Inteligent de Disponibilitate
- ✓Calculare dinamică a sloturilor per durată serviciu
- ✓Programe săptămânale angajați + suprascrieri zile libere
- ✓Detectarea conflictelor previne dubla rezervare
- ✓Aplicare timp de avans de 60 minute
- ✓Fereastră maximă de rezervare anticipată de 30 zile
- ✓Intervale de sloturi de 15 minute
- ✓Rezervare ca vizitator (fără conectare necesară)
- ✓Pre-completare instantanee pentru re-rezervare rapidă
Servicii Externe & Cum Se Conectează
Convex — Bază de Date Timp Real
- • 16 tabele cu indecși optimizați pentru paternuri de interogare
- • Peste 157 funcții server (interogări, mutații, acțiuni)
- • Interogări reactive bazate pe WebSocket (UI auto-actualizat)
- • Acțiuni HTTP pentru endpoint-uri webhook
- • Validatori Convex pentru siguranța tipurilor la nivel de schemă
- • Stocare fișiere integrată pentru încărcări
- • Integrare auth server-side cu verificare JWT Clerk
Stripe — Procesare Plăți
- • Creare sesiuni checkout (fluxuri rezervare + card cadou)
- • Plată flexibilă: avans 30% sau suma integrală
- • Handler webhook: checkout.session.completed, charge.refunded
- • Verificare semnătură pe toate webhook-urile
- • Script sincronizare catalog produse
- • Branding personalizat salon pe paginile checkout
- • Auto-confirmare programare la succesul plății
Clerk — Auth & Identitate
- • RBAC pe 3 niveluri: client, angajat, admin
- • Stocare roluri bazată pe metadate JWT
- • Middleware combinat (auth Clerk + rutare next-intl)
- • Restricționare roluri server-side (requirePageRole())
- • Verificări soft client-side (softRequireRole())
- • Verificare JWT Convex server-side
- • Verificare telefon + suport auto-completare
Hărți, Social & Mesagerie
- • Embed Google Maps cu border stilizat, strălucire, shimmer de încărcare
- • Click adresă → selector hărți nativ (Google Maps, Waze, Apple Maps)
- • Deep link-uri Geo URI pentru mobil, fallback HTTPS pentru desktop
- • Integrare galerie Instagram
- • Buton acțiune flotant WhatsApp pentru contact direct salon
- • Vercel Analytics & Speed Insights
Flux de Plată — End to End
Completează Rezervarea
Creează Programare (ÎN AȘTEPTARE)
Creează Sesiune Stripe Checkout
Avans 30% sau Plată Integrală
checkout.session.completed
Verifică Semnătura & Procesează
Înregistrează Plata + Confirmă Programarea + Acordă Puncte Loialitate
Construind cu Claude Code
Acest proiect demonstrează fluență în dezvoltarea software augmentată cu AI, folosind Claude Code ca partener de dezvoltare pe întregul ciclu de viață.
CLAUDE.md — Configurare Agent AI
Un fișier de configurare cuprinzător de 310 linii care servește drept creierul pentru Claude Code — documentând întreaga arhitectură, schema bazei de date, structura de rutare, organizarea componentelor, paternurile de acces la date, fluxul de autentificare și strategia de testare. Aceasta permite agentului AI să ia decizii conștiente de context pe întreaga stivă.
Secțiuni Structurate CLAUDE.md
Configurarea include: scopul proiectului, funcționalități implementate, foaie de parcurs rămasă, comenzi CLI, decizii de arhitectură, tabel de referință module Convex, structura de rutare, paternuri de acces la date, logica sistemului de rezervare, flux de autentificare, configurare i18n, organizarea componentelor, sistemul de stilizare, strategia de testare și un tabel de referință fișiere cheie.
Cum a Fost Folosit AI-ul
Arhitectură & Design Schemă
Design colaborativ al schemei bazei de date cu 16 tabele, strategie de optimizare a indecșilor și arhitectura de interogări reactive. Agentul AI a raționat despre compromisuri de normalizare, paternuri specifice Convex și performanța interogărilor în timp real.
Implementare Funcționalități
Funcționalități complexe precum algoritmul de sloturi de disponibilitate, detectarea conflictelor, calculul nivelurilor de loialitate și gestionarea webhook-urilor Stripe au fost dezvoltate iterativ cu Claude Code, folosind capacitatea sa de a raționa despre cazuri limită și logică bazată pe timp.
Testare & Regresie SEO
Suita de regresie SEO cu 53 de teste și strategia cuprinzătoare de teste E2E pe 17 profile de dispozitive au fost proiectate și implementate cu asistență AI, asigurând acoperirea semnalelor SEO critice și integritatea layout-ului responsive.
Întărire Securitate
Configurarea Content Security Policy, setup-ul HSTS preload, strategia de sincronizare duală CSP (next.config.ts + vercel.json) și paternurile de control al accesului bazat pe roluri au fost dezvoltate cu ghidare AI pe cele mai bune practici de securitate în producție.
i18n & Gestionare Unicode
Suport bilingv cu next-intl, peste 500 de șiruri de traducere, căutare conștientă de diacritice folosind normalizare Unicode NFD și normalizare caractere font Sacramento pentru caractere românești (mapare virgulă-dedesubt la sedilă).
Rafinare Iterativă UI
Sistem de design glass-morphism, animații GSAP, ajustare breakpoint-uri responsive pe iterații de commit-uri și corecții layout mobile-first — reflectând ciclul rapid de iterare permis de dezvoltarea augmentată cu AI.
Structura Configurării CLAUDE.md
Fișierul CLAUDE.md al proiectului acționează ca context persistent pentru agentul AI. Iată cum este organizat pentru a maximiza eficacitatea AI:
Strategie de Testare
Teste Unitare — 193 Cazuri
Vitest
Teste E2E — 221 Scenarii
Playwright
Teste end-to-end cross-browser rulând pe 17 profile de dispozitive, acoperind fiecare rol de utilizator și cale critică din aplicație.
| Specificație | Scenarii | Acoperire |
|---|---|---|
public | 47 | Pagini publice, SEO, navigare |
customer | 38 | Flux rezervare, loialitate, profil |
employee | 42 | Program, câștiguri, disponibilitate |
admin | 56 | Tablou de bord, CRM, analiză |
functional | 38 | Preocupări transversale, i18n |
PROFILE DISPOZITIVE
Securitate & Conformitate
Anteturi de Securitate
- ✓Content-Security-Policy
- ✓HSTS
- ✓X-Frame-Options: DENY
- ✓X-Content-Type-Options: nosniff
- ✓Referrer-Policy
- ✓Permissions-Policy
Securitate Aplicație
- ✓Acces Bazat pe Roluri
- ✓Verificare JWT
- ✓Semnături Webhook
- ✓Sincronizare CSP Duală
- ✓Pistă de Audit
- ✓Granițe de Eroare
Lista de Domenii Permise CSP
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';
Treceți cu mouse-ul peste domeniile evidențiate pentru a vedea scopul lor. Configurarea duală CSP sincronizează între anteturile next.config.ts și suprascerierile vercel.json.
Compromisuri Arhitecturale & Rațiune
Convex În Locul Prisma/Drizzle
Verificări de Rol Soft vs. Stricte
Timp-ca-Minute pentru Calculul Sloturilor
Strategie Duală de Configurare CSP
Limbă ca Segment de Rută
Prețuri în Bani
Arhitectura Modulelor Convex
22 module backend cu peste 157 funcții server care alimentează întreaga aplicație.
| Modul | Funcții | Scop |
|---|---|---|
adminDashboard | 23+ | Statistici venituri, programări în așteptare, metrici personal |
employeeDashboard | 11+ | Programul zilei, programări săptămânale, câștiguri |
customerDashboard | 7+ | Istoric programări, puncte loialitate, status nivel |
employees | 21+ | CRUD, asignare roluri, mutații disponibilitate |
services | 6+ | Gestionare catalog servicii cu filtrare pe categorie |
categories | 7+ | CRUD categorii și căutări bazate pe slug |
appointments | 8+ | CRUD rezervări cu detectare conflicte |
availability | 2+ | Calcul inteligent sloturi cu suprascrieri |
stripe | 10+ | Sesiuni checkout, branding, metadate |
http | 1 | Router endpoint webhook Stripe |
payments | 3+ | Urmărire plăți și gestionare status |
reviews | 3+ | Agregare evaluări și listare |
giftCards | 4+ | Generare cod, sold, răscumpărare |
customers | 4+ | CRUD cu deduplicare email/telefon |
salaryPayments | 4+ | Urmărire salarizare și comisioane |
loyaltyTiers | 2+ | Definiții niveluri și praguri de puncte |
loyaltyHistory | 2+ | Istoric tranzacții puncte |
profileChangeRequests | 4+ | Flux de aprobare editare profil angajat |
salonSettings | 2+ | Singleton setări globale |
expenses | 2+ | Gestionare costuri operaționale |
seed | 1 | Populare bază de date (177 servicii, 4 angajați, 4 niveluri) |
helpers/* | 6+ | Auth, conflicte, prețuri, loialitate, jurnal schimbări, dedup |