Loading repository data…
Joaoof / repository
Este repositório contém o front-end de um sistema de agendamento moderno e responsivo, projetado especificamente para barbearias. A aplicação foi desenvolvida utilizando Next.js com TypeScript, proporcionando uma experiência de usuário rápida e segura em dispositivos móveis e desktop.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Selected from shared topics, language and repository description—not editorial ratings.
gabrielnobrel /
Uma aplicação de agendamento para barbearias construída com Next.js e TypeScript. Este repositório contém a interface, autenticação e integração com banco de dados via Prisma.
41/100 healthEste repositório contém o front-end de um sistema de agendamento moderno e responsivo, projetado especificamente para barbearias. A aplicação foi desenvolvida utilizando Next.js com TypeScript, proporcionando uma experiência de usuário rápida e segura em dispositivos móveis e desktop.
O sistema simula uma arquitetura completa com múltiplos perfis de acesso: Cliente, Administrador da Barbearia e Super Administrador, cada um com sua interface e permissões específicas.
O principal objetivo do projeto é fornecer uma plataforma robusta para:
BottomNavigation) ou desktop (DesktopSidebar).O design segue a paleta de cores Dark Mode com ênfase em tons de azul e cinza escuro, utilizando o framework de utilidades Tailwind CSS.
A tela de login e registro é a porta de entrada para a aplicação, com um design de duas colunas no desktop e empilhado no mobile, destacando a ilustração da barbearia.
A página inicial no mobile apresenta uma visão resumida e funcional para o cliente:
Header: Saudação personalizada e data atual.
Horários: Exibição do status da barbearia (Aberto/Fechado).
Próximo Horário: Destaque para o agendamento mais próximo.
Navegação: Barra de navegação inferior (BottomNavigation) com atalho para agendamento (Plus button).
A seção de agendamentos permite ao cliente visualizar e gerenciar seus horários com filtros por Período, Situação e Barbeiro.
O painel de administrador (BarbershopDashboard) é um ambiente em dark mode focado em métricas essenciais para o negócio:
Este projeto foi construído sobre uma pilha de tecnologias modernas e robustas, garantindo alta performance, escalabilidade e manutenibilidade.
| Tecnologia | Versão | Descrição |
|---|---|---|
| Next.js | 15.2.4 | Framework React para produção, com Server Components e roteamento. |
| React | ^19 | Biblioteca JavaScript para a construção da interface. |
| TypeScript | ^5 | Linguagem estendida que adiciona tipagem estática ao JavaScript. |
| Tailwind CSS | ^3.4.17 | Framework CSS utility-first para estilização rápida e responsiva. |
O projeto utiliza a filosofia shadcn/ui, baseada em componentes headless do Radix UI e estilizados com Tailwind CSS.
class-variance-authority (cva) e clsx/tailwind-merge: Utilizados para construção de componentes dinâmicos e fusão inteligente de classes CSS.lucide-react.react-hook-form e @hookform/resolvers: Gerenciamento eficiente de formulários e validação de dados.zod: Definição de schemas de validação e tipagem.AuthProvider) e dados da aplicação (AppProvider).react-day-picker: Componente de calendário para seleção de datas.embla-carousel-react: Implementação de carrossel para a seleção de barbeiros.vaul: Utilizado para o componente Drawer, ideal para interações móveis.O projeto segue a estrutura padrão do Next.js App Router, organizada para facilitar a separação de responsabilidades.
.
├── app/
│ ├── (auth)/ # Telas de Autenticação (Login/Register)
│ ├── admin/ # Dashboard de Administrador da Barbearia
│ ├── agendamentos/ # Listagem de Agendamentos do Cliente
│ ├── favoritos/ # Página de Favoritos (Em construção)
│ ├── perfil/ # Página de Perfil (Em construção)
│ ├── servicos/ # Listagem de Serviços
│ ├── super-admin/ # Dashboard de Super Administrador
│ ├── globals.css # Arquivo global de estilos (Tailwind/CSS Variables)
│ ├── layout.tsx # Layout principal (AuthGuard, Providers)
│ └── page.tsx # Dashboard do Cliente (Página Inicial)
├── components/
│ ├── admin/
│ │ └── barbershop-dashboard.tsx # Painel de Admin da Barbearia
│ ├── auth/ # Componentes de Login, Registro e Guards
│ │ ├── auth-guard.tsx # Guarda de rotas de autenticação
│ │ └── role-guard.tsx # Guarda de rotas por nível de permissão
│ ├── booking/ # Fluxo de agendamento (Seleção de Barbeiro/Service)
│ ├── desktop/
│ │ └── desktop-sidebar.tsx # Navegação fixa para desktop
│ ├── mobile/ # Componentes específicos para mobile (e.g., BottomNavigation)
│ ├── notifications/ # Componentes de notificação (e.g., SuccessToast)
│ └── ui/ # Biblioteca de componentes Shadcn/ui
├── contexts/
│ ├── app-context.tsx # Contexto de estado de Barbeiros, Serviços e Agendamentos
│ └── auth-context.tsx # Contexto de estado e lógica de Autenticação
├── hooks/
│ └── use-mobile.tsx # Lógica de detecção de dispositivo móvel
├── lib/
│ ├── api.ts # Tipos de dados e simulação de API REST
│ └── utils.ts # Funções de utilidade (cn - tailwind class merge)
├── public/
│ └── images/ # Ativos de imagem (logos, avatares, ilustrações)
├── services/
│ ├── auth-service.ts # Lógica de autenticação (Login/Register/Logout com Mocks)
│ └── role-service.ts # Definição de roles, permissões e dados mockados de barbearias
├── styles/
│ └── globals.css # Arquivo de estilos para a aplicação
└── tailwind.config.ts # Configuração do Tailwind CSS
Siga estas etapas para configurar e executar o projeto em seu ambiente de desenvolvimento.
Certifique-se de que você tem as seguintes ferramentas instaladas:
Clone o repositório:
git clone [URL_DO_REPOSITORIO]
cd front-barbearia
Instale as dependências (utilizando pnpm):
pnpm install
Ou, se preferir usar npm:
npm install
Variáveis de Ambiente:
Crie um arquivo .env.local na raiz do projeto. Embora o projeto utilize dados mockados internamente, ele está configurado para uma futura integração com uma API.
# .env.local
# URL base para a API (Mock ou real)
NEXT_PUBLIC_API_URL="http://localhost:3001/api"
Nota: A ausência desta variável fará a aplicação usar "http://localhost:3001/api" como padrão.
Inicie o Servidor de Desenvolvimento:
pnpm dev
O aplicativo estará disponível em http://localhost:3000.
Os scripts de execução estão definidos no package.json:
| Script | Comando | Descrição |
|---|---|---|
dev | next dev | Inicia o servidor de desenvolvimento em modo hot-reloading. |
build | next build | Constrói a aplicação para produção, gerando os artefatos no diretório .next/. |
start | next start | Inicia o servidor Next.js em modo de produção (deve ser executado após pnpm build). |
lint | next lint | Executa o linter para verificar problemas de código. |
A aplicação implementa autenticação baseada em Contexto (AuthContext) e simula diferentes níveis de acesso (UserRole).
| Role | Descrição | Rota Principal |
|---|---|---|
CLIENT | Usuário padrão que agenda serviços. | / |
BARBER_ADMIN | Administrador de uma barbearia específica (Gerencia agendamentos, vê métricas) | /admin |
SUPER_ADMIN | Administrador do sistema (Gerencia todas as barbearias, vê métricas totais) | /super-admin |
A tela de login (LoginForm) lista as credenciais mockadas para acesso rápido aos diferentes perfis:
joao@email.com / 123456carlos@barbeariacentral.com / 123456admin@sistema.com / 123456O sistema também oferece a opção de Continuar sem login, ativando o perfil isGuest, que restringe o acesso às funcionalida