Royal Top Beauty is a production client build for a professional salon offering lashes, aesthetics, and skin treatments. The public site drives discovery and bookings; staff run day-to-day operations from a protected admin area.

The work spans two codebases: a Next.js 16 App Router frontend and a separate Express 5 REST API backed by MongoDB. Auth is JWT + server-side sessions (not Firebase Auth). Consent signatures are stored in Firebase Storage.

The homepage combines hero imagery, a bento “why choose us” grid, inspiration gallery, live service catalog (fetched from the API), testimonials, FAQ with JSON-LD, location map, and book CTAs.

Booking flow (/book) is a four-step wizard: pick services by category or search → choose date, 30-minute slot, and professional → enter contact details → confirmation. Drafts persist in localStorage so users can resume. Site search and navbar CTAs deep-link into booking with a pre-selected service.

Admins sign in at /account (optional email OTP) and land on a dashboard with booking trends (Recharts), stat cards, and recent requests.

• Bookings — filter by status (NEW, CONTACTED, CONFIRMED, REJECTED), create walk-ins, view reserved slots, send confirmation emails on approve
• Services & categories — CRUD with drag-and-drop ordering (@dnd-kit)
• Consent forms — medical questionnaire, canvas signature pad, PNG export; signatures uploaded to Firebase then linked to bookings
• Sessions — list and revoke active logins per device

The royaltopbeauty-backend service exposes REST endpoints under /api:

• POST /api/bookings/request — public online booking with reference codes (RTB-2026-000001)
• GET /api/bookings/reserved-slots — blocks 30-min slots from confirmed bookings by total treatment duration
• GET /api/services & /api/categories — cached catalog (5-min in-memory TTL + warmup)
• POST /api/consents — admin consent records linked to bookings
• POST /api/users/sign-in — JWT in httpOnly cookie + MongoDB Session rows

Transactional email (nodemailer / Cloudflare) notifies admins on new requests and customers on confirmation. Security: Helmet, CORS whitelist, rate limiting, bcrypt passwords, OTP hashing.

Frontend server actions call NEXT_PUBLIC_API_URL with the jwt cookie forwarded on protected routes. GSAP powers the mobile staggered menu; scroll reveals use IntersectionObserver. SEO includes sitemap, robots, manifest, and structured data.

Stack split: React 19 + Radix UI + Tailwind v4 on the client; Express + Mongoose + session-tracked JWT on the server.