Construa um Web App para Salão de Unhas: Agendamentos, Pagamentos e Histórico

Defina metas, usuários e escopo

Antes de escolher ferramentas ou desenhar telas, fique claro sobre o que o salão quer resolver. A maioria dos salões de unhas não precisa de “tudo” no primeiro dia — eles precisam de um sistema que elimine atritos diários.

Comece pelos problemas a resolver

Anote os problemas recorrentes que sua equipe reclama e transforme-os em metas. Os comuns incluem:

• Dupla reserva por lidar com notas em papel, DMs e telefonemas
• Pagamentos perdidos ou inconsistentes (dinheiro vs. cartão, gorjetas não registradas, depósitos esquecidos)
• Notas de clientes perdidas (alergias, formatos preferidos, “nunca me agende com X”, etc.)

Seja específico: “Parar double-bookings” é melhor que “Melhorar o agendamento”.

Identifique os usuários (e o que cada um precisa)

Um web app para salão de unhas normalmente atende quatro grupos:

• Proprietário/gerente: quer visibilidade (vendas, não comparecimentos, desempenho da equipe) e controle (preços, políticas)
• Recepção: precisa de agendamento rápido, reagendamento fácil e um calendário diário limpo
• Técnicos de unhas: precisam da própria agenda e notas do cliente — sem acesso a configurações administrativas sensíveis
• Clientes: querem agendamento self-service, confirmações e uma forma simples de reagendar

Projete pensando no momento mais ocupado: um cliente sem hora chegando junto com dois telefonemas e o checkout acontecendo ao mesmo tempo.

Defina o escopo: necessidade vs. desejável

Para a primeira versão, priorize:

• Cardápio de serviços + durações + preços
• Agendamento/reagendamento + configurações de política de não comparecimento
• Noções básicas de pagamentos (depósito opcional) + recibos
• Perfis de clientes + notas do CRM de histórico de serviços

Desejáveis para depois: assinaturas/memberships, inventário, multi-local, automação avançada de marketing.

Escolha métricas de sucesso que você vai acompanhar

Escolha resultados mensuráveis, como:

• Menos não comparecimentos (por exemplo, diminuir 20% após adicionar depósitos/lembretes)
• Checkout mais rápido (por exemplo, média abaixo de 60 segundos)
• Mais rebookings (por exemplo, aumentar a taxa “reservar novamente” dentro de 30 dias)

Essas métricas mantém o build focado e ajudam a decidir o que melhorar em seguida.

Mapeie as funcionalidades centrais para um salão de unhas

Antes de escrever uma única linha de código, mapeie as funcionalidades que seu web app deve suportar no dia um — e o que pode esperar. Isso mantém o sistema de agendamento simples, reduz o tempo de treinamento e evita que o aumento de escopo atrase o lançamento.

1) Agendamentos (o coração do agendamento online para salões)

Comece com um fluxo que funcione para clientes e para a recepção:

• Agendamento online: escolher serviço → escolher profissional (opcional) → selecionar horário → confirmar
• Walk-ins: adicionar rápido com campos mínimos (nome + serviço + profissional + hora de início)
• Reagendamentos e cancelamentos: alterações com um clique, atualizações de status automáticas e um registro claro de quem alterou o quê
• Configurações de política de não comparecimento: depósitos obrigatórios, janela de cancelamento e se repetidos não comparecimentos precisam de aprovação manual

Garanta que as reservas impeçam double-bookings e considerem a duração do serviço e o tempo de buffer (por exemplo, limpeza entre clientes).

2) Pagamentos (rastreio de pagamentos do salão sem dor)

Pagamentos não precisam ser complicados, mas devem ser consistentes:

• Rastrear pagamentos por cartão e em dinheiro por agendamento
• Suportar depósitos (especialmente para serviços longos) e aplicá-los no fechamento
• Capturar gorjetas separadamente da receita de serviço para relatórios limpos
• Gerar recibos e faturas (email e imprimível)
• Opcional: cartões presente (emitir, resgatar, saldo)

Mesmo que integre um provedor de pagamentos depois, desenhe o fluxo para que todo agendamento possa ser marcado como “pago”, “parcialmente pago” ou “não pago”.

3) Histórico de clientes/CRM (o motor de retenção)

Um CRM leve de histórico de clientes deve mostrar, de relance:

• Linha do tempo de visitas (datas, serviços, profissional)
• Preferências (forma, notas de cor, alergias/sensibilidades)
• Add-ons comuns e compras repetidas
• Opcional: anexos de fotos para referência (antes/depois ou inspiração de design)

4) Operações (o que os proprietários realmente usam diariamente)

Complete o núcleo com um editor do cardápio de serviços e preços, escala básica de funcionários e notas internas. Notas de inventário opcionais são úteis, mas mantenha leves a menos que esteja construindo um gerenciamento completo de estoque.

Desenhe um modelo de dados simples (o que você precisa armazenar)

Um app de salão de unhas vive ou morre pela limpeza do modelo de dados. Se mantiver o modelo simples e consistente, agendamento, pagamentos e histórico do cliente ficam mais fáceis de construir — e de confiar.

As entidades centrais (tabelas) que você realmente precisa

Comece com o essencial, só adicione mais quando sentir dor real:

• Customers: as pessoas que agendam serviços
• Staff: técnicos e usuários de recepção/admin
• Services: seu cardápio (manicure em gel, preenchimento de acrílico, add-on de nail art, etc.)
• Appointments: o trabalho agendado
• Payments: depósitos, pagamentos finais, gorjetas e reembolsos
• Locations (opcional): útil se tiver várias unidades ou salas

Campos-chave que evitam caos diário

Alguns campos carregam a maior parte do valor operacional:

• Service: name, price, duration_minutes, e buffer time (ex.: 10 minutos para limpeza). O buffer mantém o calendário realista.
• Appointment: start_time, end_time (ou calculado a partir da duração do serviço + buffer), status (booked/checked-in/completed/no-show/canceled), customer_id, staff_id, e location_id.
• Payment: amount, type (deposit/final/tip/refund), method (card/cash), além de impostos, descontos e um link para o agendamento.

Vinculando registros: modele o comportamento do mundo real

Torne normal que um agendamento tenha múltiplos pagamentos. Exemplo: um depósito de $20 online, depois $45 na loja, depois $10 de gorjeta — e um reembolso se algo mudar.

Isso significa que sua tabela Payments deve permitir várias linhas por appointment_id, não um único campo “status de pagamento” no agendamento.

Noções básicas de trilha de auditoria (accountability)

Mesmo em um salão pequeno, você vai querer saber o que mudou.

Armazene updated_at e updated_by em Appointments no mínimo. Se quiser uma trilha de auditoria mais forte, adicione um log AppointmentChanges com: appointment_id, changed_by, changed_at e um curto change_summary (ex.: “Hora movida 14:00 → 14:30”). Isso ajuda a resolver disputas sobre não comparecimentos, depósitos e edições de última hora.

Construa o fluxo de agendamento e calendário

Seu fluxo de agendamento é o coração do web app: transforma “quero unhas” em um horário confirmado no calendário sem troca de mensagens desnecessária.

Comece com regras claras de agendamento

Antes de desenhar telas, defina as regras que o calendário deve impor:

• Duração do serviço: cada serviço precisa de um tempo padrão, com add-ons opcionais que o estendam.
• Combinação de habilidades dos profissionais: só mostrar técnicos que podem realizar o serviço selecionado.
• Horário de funcionamento e intervalos: bloquear almoço, tempo de limpeza e dias não úteis para que clientes não vejam slots impossíveis.
• Tempo de buffer: adicionar um buffer configurável (ex.: 10 minutos) entre agendamentos para limpeza e preparação.

Prevenir conflitos (mesmo com cliques simultâneos)

A prevenção de conflitos deve ocorrer em dois pontos:

1. Enquanto navega pelos horários: só exibir horários de início que não se sobreponham a agendamentos existentes e respeitem buffers.
2. Na confirmação: re-checar a disponibilidade imediatamente antes de salvar. Duas pessoas podem selecionar o mesmo slot — seu servidor deve rejeitar a segunda reserva de forma clara e solicitar outro horário ao cliente.

Fluxo voltado ao cliente

Mantenha simples e previsível:

Escolher serviço → escolher horário → escolher técnico (opcional) → confirmar.

Se o cliente não se importa com o profissional, o padrão “Qualquer técnico disponível” deve aumentar as opções de horário.

Fluxo de calendário para a equipe

A equipe precisa de velocidade. Forneça um calendário dia/semana onde eles possam:

• criar um agendamento em poucos cliques (serviço + cliente + horário)
• arrastar para reagendar (com as mesmas regras de conflito)
• editar rapidamente (notas, add-ons, status de depósito)

Um bom próximo passo é conectar integrações depois (veja /blog/integrations-calendar-messaging-payments), mas consolide o fluxo principal primeiro.

Implementar pagamentos, depósitos, gorjetas e recibos

Pagamentos é onde o app deixa de ser só um calendário e vira uma ferramenta de negócio. O objetivo: reduzir não comparecimentos, acelerar o checkout e manter registros limpos.

Depósitos (proteção contra não comparecimentos)

Decida quando um depósito é exigido e torne isso previsível para os clientes:

• Quando exigir: gatilhos comuns são “novo cliente”, “horários de pico”, “agendamentos acima de 60–90 minutos” ou “serviços de alto custo”.
• Quanto: valor fixo (ex.: R$ 15–30) ou porcentagem (ex.: 20–50%). Mantenha consistente por categoria de serviço.
• Como se aplica: armazene o depósito como um pagamento no agendamento e subtraia automaticamente do total no fechamento.

Adicione também uma configuração para a janela de cancelamento (ex.: 24 horas). Se o depósito for perdido, registre esse resultado explicitamente (não como um “reembolso”).

Fluxo de checkout (serviços → add-ons → gorjeta → descontos)

No fechamento, pré-preencha o que foi agendado, mas permita edições rápidas:

1. Serviços realizados (do cardápio)
2. Add-ons (nail art, chrome, reparo, extensão extra)
3. Descontos (código promocional, fidelidade, comp do gerente) com motivo obrigatório
4. Gorjeta (botões sugeridos: 15/20/25% + personalizado)
5. Pagamentos divididos (dinheiro + cartão) se o salão precisar

Recibos (digitais + imprimíveis)

Ofereça recibo por email/SMS e uma visualização imprimível para a recepção. Inclua: data/hora do agendamento, serviços detalhados, gorjeta, desconto, imposto, depósito aplicado e saldo restante.

Reembolsos e ajustes (amigável à auditoria)

Nunca sobrescreva pagamentos. Crie um registro de ajuste vinculado ao pagamento original (reembolso, reembolso parcial, void, correção de cobrança) com timestamp, membro da equipe e motivo. Isso mantém os totais precisos e facilita resolver disputas.

Crie perfis de clientes e histórico de serviços

Perfis de clientes fazem o app parecer pessoal em vez de apenas uma ferramenta de agendamento. Um bom perfil ajuda a equipe a entregar resultados consistentes, identificar padrões (como não comparecimentos frequentes) e fazer os clientes se sentirem lembrados — sem depender de bilhetes adesivos ou da memória de alguém.

O que armazenar no perfil do cliente

Mantenha o básico leve, mas útil:

• Contato: nome, telefone, email (para confirmar agendamentos e enviar recibos)
• Aniversário (opcional): só se houver uso claro (ex.: ofertas de aniversário)
• Alergias e sensibilidades: produtos a evitar, reações cutâneas, problemas com fragrâncias
• Preferências: técnico favorito, duração preferida, “sem gel”, “quadrado curto”, etc.

Torne campos opcionais realmente opcionais. O perfil mais rápido é criado automaticamente após o primeiro agendamento.

Construa um histórico de serviços fácil de escanear

A visualização de histórico deve responder: “O que fizemos da última vez?” e “Quanto esse cliente costuma gastar?” Inclua:

• Agendamentos passados: data/hora, técnico, status (concluído/cancelado/não compareceu)
• Serviços realizados: nome do serviço, add-ons, duração
• Resumo de pagamentos: total pago, depósito usado, gorjetas, reembolsos
• Sinais de comportamento: contador de não comparecimentos e data do último não comparecimento

Um pequeno cabeçalho “de relance” (total gasto, visitas, última visita) economiza tempo da equipe.

Modelos de notas (para manter consistência)

Notas em texto livre podem virar uma bagunça. Ofereça modelos rápidos como:

• “Cor do esmalte:”
• “Formato:”
• “Comprimento:”
• “Áreas sensíveis:”
• “Produtos usados:”

Modelos aceleram a entrada e mantêm as notas legíveis entre a equipe.

Controles de privacidade para notas e fotos

Nem todo membro da equipe precisa ver tudo. Adicione controles baseados em função como:

• Recepção: contato + histórico de agendamentos
• Técnicos: preferências, alergias, notas de serviço
• Gerentes/admin: acesso total, incluindo flags de não comparecimento e totais de gasto

Se armazenar fotos, marque claramente quem pode visualizá-las e forneça uma opção simples de exclusão quando solicitado.

Configure papéis de equipe e permissões

Um app de salão precisa de níveis de acesso diferentes para que as pessoas certas façam suas tarefas — sem que todos vejam receita, ferramentas de estorno ou notas privadas. Papéis claros também facilitam o treinamento porque o app se comporta de forma consistente para cada pessoa.

Defina os papéis centrais

Um conjunto prático inicial é:

• Proprietário/Admin: acesso total, incluindo configurações, pagamentos, estornos e exportações
• Gerente: opera o dia a dia sem tocar controles financeiros de alto risco
• Recepcionista: faz agendamentos, reagendamentos, confirmações e walk-ins
• Técnico: foca na própria agenda e nos detalhes do cliente necessários para realizar o serviço

O que cada papel pode (e não pode) fazer

Mantenha permissões ligadas a tarefas reais:

• Editar agenda: proprietário/admin, gerente, recepcionista. Técnicos podem solicitar mudanças ou mover apenas seus próprios agendamentos (opcional).
• Ver receita e relatórios: proprietário/admin; gerente pode ver totais resumidos; recepção e técnicos tipicamente não.
• Acessar notas de clientes: recepção e técnicos podem ver notas relacionadas ao serviço (alergias, preferências). Limite a edição de notas sensíveis a gerente/admin.
• Processar estornos / excluir registros: restrinja a proprietário/admin (ou gerente com aprovação extra).

Login rápido e seguro para a equipe no salão

Se a recepção usa um tablet compartilhado, adicione um PIN ou alternador de login por toque. Cada pessoa ainda tem conta única; o PIN apenas acelera o login. Auto-lock após inatividade evita acessos acidentais.

Registro de atividade para responsabilização

Registre ações sensíveis com quem, o quê, quando e de qual dispositivo — especialmente estornos, voids, sobrescritas de preço, exclusão de agendamentos e edição de tickets concluídos. Torne o log legível para proprietários e pesquisável por cliente, data e funcionário.

Adicione painel administrativo e relatórios

Um painel admin é a tela inicial para proprietários e gerentes: um lugar para ver o que está acontecendo hoje, o que precisa de atenção e se o negócio está no caminho. Mantenha simples — rápido de carregar, legível em tablet e focado em ações.

Visão diária (operações)

Comece com uma visão diária que responda: “O que precisamos fazer agora?” Inclua:

• Agenda do dia por horário e técnico, com filtros rápidos (equipe, serviço, status)
• Walk-ins: botão leve para adicionar walk-in que insere no próximo slot disponível
• Saldo não pago: destaque agendamentos concluídos mas não totalmente pagos
• Chegadas tardias: flag visível (ex.: 5–10 minutos de atraso) e prompt de nota para a recepção

Essa tela deve permitir ações com um clique: marcar chegada, reagendar, estornar/void ou enviar lembrete.

Relatórios que proprietários realmente usam

Evite gráficos exagerados. Forneça um pequeno conjunto de relatórios confiáveis e mantenha o seletor de período consistente em todo lugar.

Relatórios essenciais:

• Receita por dia (com opção de decomposição: serviços, gorjetas, impostos)
• Serviços mais vendidos (o que vende, o que está em tendência)
• Utilização da equipe (horas agendadas vs. horas disponíveis)

Insights de clientes (para reduzir lacunas e não comparecimentos)

Adicione um painel de insights de clientes fácil de entender:

• Taxa de retorno (novos vs. recorrentes)
• Taxa de rebooking (quantos voltam dentro de X dias)
• Taxa de não comparecimento (e como muda após lembretes/depósitos)

Exportações e resumos para impressão

Rotinas de contabilidade e fechamento ainda precisam de arquivos e papel. Ofereça:

• Exportação CSV para contabilidade (vendas diárias, repasses, impostos)
• Resumos simples para impressão (agenda do dia, totais de fim de dia)

Se precisar de inspiração para um layout limpo, mantenha a navegação do painel consistente com o resto do app (ex.: /admin/reports, /admin/schedule).

Escolha uma stack técnica adequada para um pequeno negócio

A melhor stack é aquela que o salão pode pagar para rodar e sua equipe consegue manter. Priorize confiabilidade, atualizações simples e baixos custos mensais em vez de arquitetura sofisticada.

Web app mobile-first vs. app para tablet focado na recepção

Se a maioria dos agendamentos vem de um link no Instagram/Google, vá mobile-first: páginas rápidas, botões grandes e um fluxo de reserva que funcione em telas pequenas.

Se o salão agenda principalmente no balcão, considere tablet-first para a equipe: visualizações de calendário maiores, busca rápida de clientes e menos toques.

Muitos salões fazem ambos: um site de agendamento mobile-friendly para clientes e uma tela admin otimizada para a equipe.

Opções de backend: monólito simples vs. API + frontend

Para um pequeno negócio, um monólito simples (uma base de código que serve páginas e lida com o banco) geralmente é mais fácil e barato. É mais rápido de construir, mais simples de deployar e mais fácil de depurar.

Uma API + frontend separado é útil se já souber que precisará de app móvel depois, múltiplas localidades ou parceiros externos. Caso contrário, costuma adicionar complexidade cedo.

Escolha de banco: relacional para agendamentos e pagamentos

Use um banco relacional (como PostgreSQL ou MySQL). Agendamentos, escalas, depósitos, gorjetas, reembolsos e recibos são dados conectados. Um banco relacional facilita aplicar regras (evitar double-booking) e gerar relatórios precisos.

Noções básicas de hospedagem: staging vs. produção, backups, monitoramento de erros

Configure dois ambientes: staging (testar mudanças) e production (ao vivo). Automatize backups diários e pratique restaurá-los.

Adicione monitoramento de erros para saber de falhas antes dos clientes (ex.: erros no checkout ou sync do calendário). Mesmo uma configuração simples deve incluir checagens de uptime, logs e um jeito de reverter.

Se quiser um checklist prático, mantenha uma página interna como /blog/launch-checklist para “o que verificar antes de atualizar”.

Um caminho mais rápido se quiser lançar sem pipeline completo de dev

Se o objetivo é validar o fluxo rapidamente (regras de agendamento, depósitos, recibos, papéis de equipe) antes de investir meses em engenharia customizada, uma plataforma low-code como Koder.ai pode ajudar a obter uma versão funcional mais rápido.

Koder.ai permite construir web apps via interface orientada por chat, com React no frontend e Go + PostgreSQL no backend. Também suporta exportação de código-fonte, hospedagem e deploy, domínios customizados e snapshots com rollback — útil enquanto você itera em um fluxo de agendamento e pagamentos ao vivo. Se depois você superar a primeira versão, pode manter o código e continuar o desenvolvimento por conta própria.