Sistema de Agendamento Inteligente — MVP Acadêmico para Processos de Negócio
FilaFácil é um sistema web de agendamento de atendimentos com controle de fila, voltado para trabalhos acadêmicos de Processos de Negócio. Permite que usuários agendem horários e que administradores gerenciem o fluxo completo de atendimento.
- ✅ Cadastro de usuário
- ✅ Login com e-mail e senha
- ✅ Logout
- ✅ Sessão persistente (Firebase Auth)
- ✅ Visualizar dashboard com estatísticas
- ✅ Criar novo agendamento
- ✅ Visualizar horários disponíveis em tempo real
- ✅ Cancelar agendamento
- ✅ Editar nome no perfil
- ✅ Aprovar agendamentos pendentes
- ✅ Rejeitar agendamentos
- ✅ Finalizar atendimentos
- ✅ Visualizar lista completa com filtros
- ✅ Total de agendamentos
- ✅ Pendentes / Aprovados / Concluídos
- ✅ Acesso rápido às funcionalidades
filafacil/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── AppointmentCard.jsx # Card reutilizável de agendamento
│ │ ├── AppointmentCard.css
│ │ ├── Navbar.jsx # Barra de navegação
│ │ ├── Navbar.css
│ │ └── LoadingSpinner.jsx # Indicador de carregamento
│ ├── contexts/
│ │ └── AuthContext.jsx # Contexto de autenticação
│ ├── firebase/
│ │ └── config.js # Configuração do Firebase
│ ├── pages/
│ │ ├── Splash.jsx / .css # Tela de entrada
│ │ ├── Login.jsx # Login
│ │ ├── Register.jsx # Cadastro
│ │ ├── Auth.css # CSS compartilhado das páginas de auth
│ │ ├── Home.jsx / .css # Dashboard
│ │ ├── NewAppointment.jsx / .css # Novo agendamento
│ │ ├── MyAppointments.jsx / .css # Meus agendamentos
│ │ ├── AdminPanel.jsx / .css # Painel admin
│ │ ├── Profile.jsx / .css # Perfil do usuário
│ │ └── NotFound.jsx / .css # Página 404
│ ├── routes/
│ │ ├── AppRoutes.jsx # Definição de rotas
│ │ └── PrivateRoute.jsx # Proteção de rotas
│ ├── services/
│ │ ├── authService.js # Login, Cadastro, Logout
│ │ ├── appointmentService.js # CRUD de agendamentos
│ │ └── userService.js # Atualização de perfil
│ ├── styles/
│ │ ├── global.css # Design system completo
│ │ └── spinner.css # Loading spinner
│ ├── App.jsx
│ └── main.jsx
├── .env.example
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md
- Node.js 18+ instalado
- Conta no Firebase (gratuita)
- Git instalado
git clone https://github.com/seu-usuario/filafacil.git
cd filafacilnpm installcp .env.example .envEdite o arquivo .env com suas credenciais do Firebase (veja abaixo).
npm run devAcesse: http://localhost:3000
- Acesse console.firebase.google.com
- Clique em "Adicionar projeto"
- Nome:
filafacil→ Avançar → Criar projeto
- No menu lateral: Authentication → Começar
- Aba "Sign-in method"
- Habilite "E-mail/senha" → Salvar
- No menu lateral: Firestore Database → Criar banco de dados
- Selecione "Modo de teste" (para desenvolvimento)
- Escolha a região (ex:
us-east1) → Concluído
- No menu lateral: ⚙️ Configurações do projeto
- Role até "Seus apps" → clique em
</> - Nome do app:
filafacil-web→ Registrar app - Copie as credenciais do
firebaseConfig
VITE_FIREBASE_API_KEY=AIzaSy...
VITE_FIREBASE_AUTH_DOMAIN=filafacil.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=filafacil
VITE_FIREBASE_STORAGE_BUCKET=filafacil.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abc123Após criar uma conta normal no app, acesse o Firestore Console:
- Coleção
users→ encontre seu documento - Edite o campo
rolede"user"para"admin"
No Firestore → Regras, cole:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
allow read: if request.auth != null;
}
match /appointments/{appointmentId} {
allow read: if request.auth != null;
allow create: if request.auth != null;
allow update: if request.auth != null;
}
}
}
| Campo | Tipo | Descrição |
|---|---|---|
id |
string | UID do Firebase Auth |
nome |
string | Nome completo |
email |
string | E-mail do usuário |
role |
string | "user" ou "admin" |
createdAt |
timestamp | Data de criação |
| Campo | Tipo | Descrição |
|---|---|---|
id |
string | ID gerado automaticamente |
userId |
string | UID do usuário |
nomeCliente |
string | Nome do cliente |
horario |
string | Formato "YYYY-MM-DDTHH:MM" |
status |
string | pendente, aprovado, cancelado, finalizado |
createdAt |
timestamp | Data de criação |
- Suba o projeto para um repositório GitHub
- Acesse vercel.com → New Project
- Importe o repositório
- Em Environment Variables, adicione todas as variáveis do
.env - Clique em Deploy → ✅ Pronto!
npm install -g vercel
vercel login
vercel --prodSiga as instruções e configure as variáveis de ambiente quando solicitado.
npm run build
# Pasta "dist/" gerada — faça upload em qualquer hospedagem estáticaUsuário cria agendamento → status: "pendente"
↓
Admin aprova → status: "aprovado"
Admin rejeita → status: "cancelado"
↓
Admin finaliza → status: "finalizado"
Usuário pode cancelar quando: "pendente" ou "aprovado"
npm run dev # Servidor de desenvolvimento (porta 3000)
npm run build # Build para produção (pasta dist/)
npm run preview # Preview do build local| Tecnologia | Versão | Uso |
|---|---|---|
| React | 18.x | Interface |
| Vite | 5.x | Bundler |
| Firebase Auth | 10.x | Autenticação |
| Firestore | 10.x | Banco de dados |
| React Router DOM | 6.x | Roteamento |
| CSS puro | — | Estilização |
- Firebase projeto criado
- Authentication habilitado (E-mail/senha)
- Firestore criado em modo de teste
- Arquivo
.envpreenchido -
npm installexecutado -
npm run devrodando em localhost:3000 - Conta criada e login funcionando
- Agendamento criado com sucesso
- Usuário promovido a admin no Firestore
- Painel admin acessível
- Deploy na Vercel com variáveis de ambiente
Projeto desenvolvido como MVP acadêmico para a disciplina de Processos de Negócio.
Licença: MIT "# teste"