Felipe Gazolla.
← Projetos
out 2025

Barbearia.

Agenda comercial com fluxo público de agendamento e painel do negócio.

  • Servicos
  • Operacao

As demos são interativas no desktop — no celular, veja a prévia logo abaixo.

Três visões navegáveis (painel admin, portal do piloto e site público), com dados fictícios

Problema

Barbearias precisam de agendamento público simples e gestão interna de horários, serviços e clientes.

Solução

Fluxo público de agendamento e painel para gerenciar horários, serviços e clientes (front público + admin).

Meu papel

Concepção e modelagem dos fluxos de agenda.

Resultado

Projeto secundário; demo opcional no backlog.

Stack da demo

Next.jsTypeScriptSCSS ModulesDados fictícios

Como funciona.

Descrição do produto real (frontend + backend). A demo embutida acima é a versão de demonstração dele, com dados fictícios.

Sistema de agendamento online para barbearias, multi-tenant, com duas faces: uma página pública de agendamento por barbearia (escolha de serviço, profissional, data/horário e confirmação por código no WhatsApp) e um painel administrativo (agenda, clientes, serviços, horários de trabalho, folgas e notificações). O frontend Next.js consome uma API em Next + Drizzle ORM sobre MySQL, com a disponibilidade calculada por profissional a partir de horários, folgas e buffers, confirmação por OTP e notificações via WhatsApp.

Arquitetura

  • Duas faces no mesmo produto: página pública de agendamento por slug da barbearia (/b/{slug}) e painel administrativo protegido.
  • Frontend em Next.js 16 (App Router, React 19) consumindo uma API em Next + Drizzle ORM sobre MySQL.
  • Multi-tenant por Business (barbearia): usuários ADMIN/BARBER, serviços, profissionais, clientes e agendamentos isolados por negócio, cada um com sua página pública (PublicPage) e timezone.
  • Disponibilidade calculada por profissional a partir de horários de trabalho (WorkingHour), folgas/bloqueios (TimeOff) e buffers de serviço; reserva temporária do horário (BookingHold) durante a confirmação para evitar conflito.
  • Antiabuso no agendamento público: verificação por OTP (VerificationCode), captcha e limites por IP e por telefone/dia.
  • Integrações: OTP e notificações via WhatsApp (Evolution API), convites de calendário em iCal (ical-generator) e e-mail transacional (Resend). Auth JWT com bcrypt; valores em centavos e datas com timezone (date-fns-tz); OpenAPI via zod-to-openapi.

Módulos

  • Página pública: agendamento em passos (serviço → profissional → data/horário → confirmação)
  • Confirmação por código (OTP) enviado no WhatsApp
  • Agenda: visão por profissional com status do agendamento
  • Clientes: cadastro, histórico e marcações (flags)
  • Serviços: duração, buffer e preço — inclusive preço por profissional
  • Horários de trabalho por profissional e dia da semana
  • Folgas e bloqueios de agenda
  • Pagamentos: PIX, dinheiro ou cartão por agendamento
  • WhatsApp: conexão da instância e notificações automáticas

Destaques de engenharia

  • Disponibilidade real calculada por profissional (horários + folgas + buffers + duração do serviço).
  • Fluxo público antiabuso: OTP por WhatsApp, captcha e limites por IP e por telefone.
  • Reserva temporária de horário (BookingHold) para evitar conflito durante a confirmação.
  • Multi-tenant: cada barbearia com sua página pública, timezone e equipe própria.
  • Integrações: WhatsApp (Evolution API), convites iCal e e-mail transacional (Resend).
  • Datas com timezone correto (date-fns-tz) e valores monetários em centavos.

Stack do produto real

Frontend
Next.js 16React 19TypeScriptTailwind CSSRadix UISWRReact Hook FormZodZustanddate-fns-tz
Backend
Next.js (API)Drizzle ORMMySQLZodzod-to-openapi
Auth e antiabuso
JWTbcryptOTPcaptcharate-limit
Integrações
WhatsApp (Evolution API)iCal (ical-generator)ResendPino