Aplicação web para gerenciamento de agendamentos de serviços de pet shop por data e horário.
O Mundo Pet permite criar, visualizar e cancelar agendamentos de atendimento de um pet shop. A agenda é exibida por períodos do dia (manhã, tarde e noite), com atualização automática após cada ação.
- Cadastro de agendamento com: tutor, pet, telefone, serviço, data e hora
- Listagem de agendamentos por data selecionada
- Separação automática por período do dia
- Bloqueio de horários já ocupados
- Bloqueio de horários passados
- Bloqueio de agendamento aos domingos
- Cancelamento de agendamento com confirmação
- JavaScript (ES Modules)
- HTML e CSS
- Day.js
- JSON Server
- Webpack
- Babel
- Instale as dependências:
npm install- Inicie a API local (JSON Server):
npm run server- Em outro terminal, inicie o ambiente de desenvolvimento:
npm run dev- Acesse no navegador a URL exibida pelo Webpack Dev Server.
npm run server: sobe a API local emhttp://localhost:3333npm run dev: inicia o servidor de desenvolvimentonpm run build: gera build de produção
Endpoint principal:
GET /appointments
Campos do agendamento:
idpettutortelephoneservicewhen
Este projeto consolida prática em:
- Integração de front-end com API REST simulada
- Organização de código em módulos com separação de responsabilidades
- Manipulação de datas e horários com Day.js
- Regras de disponibilidade de agenda (conflito, horário passado e dia fechado)
- Renderização dinâmica e atualização de estado no DOM após criar ou cancelar agendamentos
- Tratamento de erros em operações de API, com retorno de status para evitar quebra de fluxo
- Validação de formulário no front-end, incluindo máscara de telefone, controle de datas inválidas e bloqueio de horários indisponíveis
- Feedback visual ao usuário por meio de alertas, estados de interação e confirmação de ações críticas
Felipe Mendes
- Portfolio: https://felipemasdev.github.io/Portfolio-Dev/
- LinkedIn: https://www.linkedin.com/in/felipe-mendes-a-s-dev/
- E-mail: felipe.mas.dev@gmail.com