Felipe Gazolla.
← Projects
Oct 2025

Barbershop.

Commercial scheduling with a public booking flow and a business panel.

  • Services
  • Operations

Demos are interactive on desktop — on mobile, see the preview just below.

Three navigable views (admin panel, driver portal and public site), with fictitious data

Problem

Barbershops need simple public booking and internal management of schedules, services and clients.

Solution

A public booking flow and a panel to manage schedules, services and clients (public front + admin).

My role

Conception and modeling of the scheduling flows.

Outcome

A secondary project; optional demo in the backlog.

Demo stack

Next.jsTypeScriptSCSS ModulesFictitious data

How it works.

Description of the real product (frontend + backend). The demo embedded above is its demonstration version, with fictitious data.

An online booking system for barbershops, multi-tenant, with two faces: a public per-barbershop booking page (choice of service, professional, date/time and confirmation by code on WhatsApp) and an admin panel (schedule, clients, services, working hours, time off and notifications). The Next.js frontend consumes an API in Next + Drizzle ORM over MySQL, with availability calculated per professional from working hours, time off and buffers, OTP confirmation and notifications via WhatsApp.

Architecture

  • Two faces in the same product: a public booking page by barbershop slug (/b/{slug}) and a protected admin panel.
  • Frontend in Next.js 16 (App Router, React 19) consuming an API in Next + Drizzle ORM over MySQL.
  • Multi-tenant per Business (barbershop): ADMIN/BARBER users, services, professionals, clients and bookings isolated per business, each with its own public page (PublicPage) and timezone.
  • Availability calculated per professional from working hours (WorkingHour), time off/blocks (TimeOff) and service buffers; temporary slot reservation (BookingHold) during confirmation to avoid conflicts.
  • Anti-abuse on public booking: OTP verification (VerificationCode), captcha and limits per IP and per phone/day.
  • Integrations: OTP and notifications via WhatsApp (Evolution API), calendar invites in iCal (ical-generator) and transactional email (Resend). JWT auth with bcrypt; values in cents and dates with timezone (date-fns-tz); OpenAPI via zod-to-openapi.

Modules

  • Public page: step-by-step booking (service → professional → date/time → confirmation)
  • Confirmation by code (OTP) sent on WhatsApp
  • Schedule: per-professional view with booking status
  • Clients: registration, history and flags
  • Services: duration, buffer and price — including price per professional
  • Working hours per professional and day of the week
  • Time off and schedule blocks
  • Payments: PIX, cash or card per booking
  • WhatsApp: instance connection and automatic notifications

Engineering highlights

  • Real availability calculated per professional (working hours + time off + buffers + service duration).
  • Anti-abuse public flow: OTP via WhatsApp, captcha and limits per IP and per phone.
  • Temporary slot reservation (BookingHold) to avoid conflicts during confirmation.
  • Multi-tenant: each barbershop with its own public page, timezone and team.
  • Integrations: WhatsApp (Evolution API), iCal invites and transactional email (Resend).
  • Dates with the correct timezone (date-fns-tz) and monetary values in cents.

Real product stack

Frontend
Next.js 16React 19TypeScriptTailwind CSSRadix UISWRReact Hook FormZodZustanddate-fns-tz
Backend
Next.js (API)Drizzle ORMMySQLZodzod-to-openapi
Auth & anti-abuse
JWTbcryptOTPcaptcharate-limit
Integrations
WhatsApp (Evolution API)iCal (ical-generator)ResendPino