🐾 Pet Shop - Sistema de Agendamentos

Sistema de agendamento para pet shop desenvolvido com Next.js 16, permitindo gerenciar consultas e serviços para pets de forma simples e intuitiva.

📋 Funcionalidades

• ✅ Visualização de agendamentos por data
• ✅ Criação de novos agendamentos
• ✅ Edição de agendamentos existentes
• ✅ Cancelamento de agendamentos
• ✅ Agrupamento por período (Manhã, Tarde, Noite)
• ✅ Validação de horários disponíveis
• ✅ Interface responsiva (Mobile e Desktop)

🛠️ Tecnologias Utilizadas

• Framework: Next.js 16 com App Router
• Linguagem: TypeScript
• Estilização: Tailwind CSS 4
• Banco de Dados: PostgreSQL 17
• ORM: Prisma 7
• Componentes UI: Radix UI
• Formulários: React Hook Form + Zod
• Ícones: Lucide React
• Date Picker: React Day Picker
• Utilitários de Data: date-fns
• Notificações: Sonner

📦 Pré-requisitos

• Node.js (versão 18 ou superior)
• Docker e Docker Compose
• pnpm, npm ou yarn

🚀 Como Executar

1. Clone o repositório

git clone <url-do-repositorio>
cd 02-pet-shop

2. Instale as dependências

pnpm install
# ou
npm install
# ou
yarn install

3. Configure as variáveis de ambiente

Crie um arquivo .env na raiz do projeto:

DATABASE_URL="postgresql://docker:docker@localhost:5432/petshop"

4. Inicie o banco de dados

docker-compose up -d

5. Execute as migrations do Prisma

npx prisma migrate dev

6. Inicie o servidor de desenvolvimento

pnpm dev
# ou
npm run dev
# ou
yarn dev

Acesse http://localhost:3000 no seu navegador.

📁 Estrutura do Projeto

src/
├── app/                    # App Router (páginas e rotas)
│   ├── actions.ts          # Server Actions
│   ├── layout.tsx          # Layout principal
│   └── page.tsx            # Página inicial
├── components/             # Componentes React
│   ├── appointment-card/   # Card de agendamento
│   ├── appointment-form/   # Formulário de agendamento
│   ├── date-picker/        # Seletor de data
│   ├── header/             # Cabeçalho
│   ├── logo/               # Logo do pet shop
│   ├── period-section/     # Seção de período (manhã/tarde/noite)
│   └── ui/                 # Componentes UI base (shadcn/ui)
├── generated/              # Código gerado pelo Prisma
├── lib/                    # Utilitários e configurações
├── styles/                 # Estilos globais
├── types/                  # Tipos TypeScript
└── utils/                  # Funções utilitárias

🗄️ Modelo de Dados

model Appointment {
  id          String   @id @default(cuid())
  tutorName   String   // Nome do tutor
  petName     String   // Nome do pet
  phone       String   // Telefone de contato
  description String   // Descrição do serviço
  scheduleAt  DateTime // Data e hora do agendamento
}

⏰ Horários de Funcionamento

Os agendamentos só podem ser feitos nos seguintes períodos:

Período	Horário
🌅 Manhã	9h às 12h
☀️ Tarde	13h às 18h
🌙 Noite	19h às 21h

📜 Scripts Disponíveis

Script	Descrição
pnpm dev	Inicia o servidor de desenvolvimento
pnpm build	Gera o build de produção
pnpm start	Inicia o servidor de produção
pnpm lint	Executa o linter (ESLint)
pnpm format	Formata o código (Prettier)
pnpm validate:typecheck	Verifica tipos TypeScript

🐳 Docker

O projeto utiliza Docker para o banco de dados PostgreSQL:

services:
  postgres:
    image: postgres:17
    container_name: petshop-db
    ports:
      - '5432:5432'
    environment:
      POSTGRES_USER: docker
      POSTGRES_PASSWORD: docker
      POSTGRES_DB: petshop

Comandos úteis

# Iniciar o container
docker-compose up -d

# Parar o container
docker-compose down

# Ver logs
docker-compose logs -f postgres

🔧 Prisma

# Gerar o cliente Prisma
npx prisma generate

# Executar migrations
npx prisma migrate dev

# Abrir o Prisma Studio
npx prisma studio

# Resetar o banco de dados
npx prisma migrate reset

📱 Responsividade

O sistema foi desenvolvido com design responsivo, adaptando-se para:

• 📱 Mobile: Interface otimizada para dispositivos móveis
• 💻 Desktop: Layout expandido com mais informações visíveis