Beauty Secret
Platformă de Management Salon
O platformă SaaS full-stack de nivel producție pentru un salon de frumusețe de lux din București, România. Peste 113K linii de cod alimentând rezervări în timp real, plăți Stripe, automatizare SMS Twilio & email SendGrid, formulare digitale consimțământ laser, gestionare inventar, 14 cron jobs automatizate, 4 integrări webhook, program de loialitate pe 4 niveluri și tablouri de bord bazate pe roluri pentru 3 tipuri de utilizatori — construită cu fluxuri de dezvoltare augmentate cu AI pe 468 commit-uri.
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 10 categorii (inclusiv epilare definitivă cu laser), și clienți care rezervau prin WhatsApp și apeluri telefonice. Niciun sistem centralizat pentru disponibilitate, plăți, programare, urmărirea inventarului sau performanței angajaților. Formulare de consimțământ laser pe hârtie, fără mementouri automatizate și 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, plăți Stripe (online + QR în magazin), automatizare SMS Twilio & email SendGrid cu 9 tipuri de mementouri, formulare digitale de consimțământ laser cu semnare QR, gestionare inventar (448 produse), program de loialitate pe 4 niveluri, campanii de marketing multi-canal, 14 cron jobs automatizate ș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
203 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
Mesagerie SMS
Campanii Email
Embed + Direcții
Feed Galerie
Contact Direct
Rețea Edge
Backend Serverless
Infrastructură Auth
Schema Bazei de Date — 38 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 (10 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 |
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 + googleReviews | Evaluări cu 5 stele + sincronizare Google Reviews | Recenzii interne + Places API la fiecare 6h |
giftCards | Sistem carduri cadou | Generare cod, sold, expirare |
loyaltyTiers + Transactions + Benefits | Sistem loialitate pe 4 niveluri | Niveluri, tranzacții, beneficii, notificări, expirare |
scheduledReminders | Mementouri programate | 9 tipuri: confirmare, 24h, 2h, depozit, post-vizită |
smsCampaigns + smsMessages | Campanii de marketing | SMS/email/ambele, filtrare audiență, urmărire livrare |
inventoryItems + History | Gestionare inventar | 448 produse, 4 categorii, restockeuri, rapoarte costuri |
laserConsentForms + TreatmentSheets | Formulare digitale laser | Consimțământ + fișe tratament, semnare QR, PDF-uri |
promotions + promoRedemptions | Sistem promoții | Procent/fix, prima vizită, o dată per client |
depositRequests | Cereri de depozit | Pending/plătit/expirat, URL Stripe via SMS/email |
changeLogs | Pistă de audit | Valori înainte/după, executant |
salonSettings | Configurare globală | Ore, timp de avans, intervale slot |
Rute Aplicație — 51 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 — 16 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
- • 38 tabele cu indecși optimizați pentru paternuri de interogare
- • Peste 300 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
Twilio — Mesagerie SMS
- • Notificări SMS pentru confirmare rezervare, memento, anulare
- • 9 tipuri de mementouri: confirmare, 24h, 2h, consultație, depozit, post-vizită
- • Optimizarea costurilor SMS: mesaje scurte, deduplicare, rutare inteligentă
- • Normalizare telefon românesc → format E.164
- • Callback-uri status livrare cu verificare semnătură HMAC-SHA1
- • Logică de reîncercare cu attemptCount, maxAttempts, urmărire errorCode
- • Ton cald și personal SMS cu emoji (profesional pentru cereri de depozit)
SendGrid — Automatizare Email
- • 13 tipuri de șabloane email (peste 1000 linii): confirmare, memento, bun venit, anulare
- • Șabloane bilingve complet traduse (EN/RO) cu detectare automată a limbii
- • Urmărirea livrării: events delivered, bounce, dropped, spamreport
- • Categorii tematice de șabloane cu previzualizare admin
- • Trimitere în loturi: 50/sec cu delay de 1s între loturi
- • Active brand centralizate: constante, culori, logo-uri
- • Peste 150 șiruri de internaționalizare email bilingve
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, Recenzii & Social
- • 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
- • Sincronizare Google Reviews via Places API (la fiecare 6h)
- • Feed Instagram live: masonry, cache Convex, sincronizare orară
- • Buton acțiune flotant WhatsApp + Vercel Analytics
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 590 linii care servește drept creierul pentru Claude Code — documentând întreaga arhitectură, schema bazei de date cu 38 tabele, harta modulelor Convex cu 37 fișiere, 14 cron jobs, 4 endpoint-uri webhook, structura de rutare, sistemul de mesagerie, formularele laser, inventarul, programul de loialitate și configurarea deployment-ului. Aceasta permite agentului AI să ia decizii conștiente de context pe întreaga stivă.
Secțiuni Structurate CLAUDE.md
Configurarea include: scopul proiectului, peste 25 de secțiuni de funcționalități implementate (rezervări, calendar, plăți, depozite, loialitate, promoții, carduri cadou, recenzii, galerie, gestionare personal, inventar, formulare laser, mesagerie, onboarding clienți, GDPR), foaie de parcurs rămasă, comenzi CLI, arhitectură cu harta modulelor Convex (37 fișiere), 21 module helper, organizarea componentelor (203 componente) și tabel de referință fișiere cheie.
Cum a Fost Folosit AI-ul
Arhitectură & Design Schemă
Design colaborativ al schemei bazei de date cu 38 tabele, strategie de optimizare a indecșilor, programarea a 14 cron jobs, arhitectura a 4 endpoint-uri webhook și paternurile de interogări reactive. Agentul AI a raționat despre compromisuri de normalizare, paternuri specifice Convex și performanța interogărilor în timp real pe peste 300 funcții server.
Implementare Funcționalități
Funcționalități complexe precum algoritmul de sloturi de disponibilitate, detectarea conflictelor, calculul nivelurilor de loialitate, gestionarea webhook-urilor Stripe, rutarea SMS Twilio, șabloanele email SendGrid (13 tipuri, peste 1000 linii), formularele digitale de consimțământ laser cu semnare QR, gestionarea inventarului și sistemul de campanii multi-canal au fost dezvoltate iterativ cu Claude Code.
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 Stripe
- ✓Verificare HMAC-SHA1 Twilio
- ✓Verificare HMAC-SHA256 Svix Clerk
- ✓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
Mesagerie Dual-Canal Twilio + SendGrid
Semnare Consimțământ Laser Bazată pe QR
Arhitectura Modulelor Convex
37 module Convex + 21 helpere partajate cu peste 300 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 / employeeDocuments | 21+ | CRUD, asignare roluri, mutații disponibilitate |
services / categories | 13+ | Gestionare catalog servicii cu filtrare pe categorie |
appointments | 8+ | CRUD rezervări cu detectare conflicte |
availability | 2+ | Calcul inteligent sloturi cu suprascrieri |
stripe / payments | 13+ | Sesiuni checkout, branding, metadate |
http | 4 | 4 endpoint-uri webhook: Stripe, Twilio, SendGrid, Clerk |
messaging / messagingActions | 10+ | Trimitere SMS Twilio + email SendGrid |
smsCampaigns | 8+ | Campanii multi-canal, audiență, previzualizare, statistici |
reminders | 6+ | 9 tipuri de mementouri, programare conștientă de grup |
loyaltyTiers / Transactions / Benefits / Notifications | 12+ | Loialitate completă: niveluri, tranzacții, beneficii, notificări |
reviews / googleReviews | 6+ | Agregare evaluări și listare |
giftCards | 4+ | Generare cod, sold, răscumpărare |
customers / clerkSync | 8+ | CRUD cu deduplicare email/telefon |
customerOnboarding / Actions | 6+ | Flux invitare clienți, GDPR, onboarding amânat |
inventory / inventoryDashboard | 8+ | 448 produse, 4 categorii, restockeuri, rapoarte costuri |
laserConsentForms / TreatmentSheets / Tokens | 10+ | Formulare consimțământ, fișe tratament, tokeni QR, generare PDF |
promotions | 4+ | CRUD promoții, reducere prima vizită, o dată per client |
depositRequests / Mutations | 4+ | Cereri depozit: URL Stripe via SMS/email, cron expirare |
closingTaskRotation | 3+ | Rotație echitabilă sarcini închidere bazată pe contorizare |
profileChangeRequests | 4+ | Flux de aprobare editare profil angajat |
profileTranslation | 2+ | Traducere automată biografii/motto-uri angajați RO→EN |
salaryPayments / expenses | 6+ | Urmărire salarizare și comisioane |
instagram | 3+ | Reîmprospătare token IG + sincronizare posturi (orar) |
crons | 14 | 14 sarcini programate (campanii, recenzii, loialitate, plăți) |
salonSettings | 2+ | Singleton setări globale |
seed | 1 | Populare bază de date (177 servicii, 4 angajați, 4 niveluri) |
helpers/* (21 modules) | 40+ | Auth, conflicte, prețuri, loialitate, jurnal schimbări, dedup |