O PetControl é uma aplicação web construída em Next.js para cadastro e gerenciamento de pets disponíveis para adoção. O sistema permite listar, cadastrar, editar, visualizar e remover pets por meio de uma interface intuitiva e integrada a uma API REST.
🔗 Disponível em produção: https://petcontrol-app.onrender.com
- Cadastro de pets com validação de formulários
- Listagem paginada de pets em formato de cards
- Visualização detalhada das informações de cada pet
- Edição de pets cadastrados
- Exclusão de pets com confirmação via modal
- Feedback visual para estados de carregamento e erros
- Interface responsiva e componentizada
- Testes automatizados para componentes, hooks e fluxos principais
| Tecnologia | Versão | Categoria |
|---|---|---|
| Next.js | 16 | Framework |
| React | 19 | UI |
| TypeScript | 5 | Linguagem |
| Tailwind CSS | 4 | Estilo |
| shadcn/ui | — | Componentes |
| Axios | 1 | HTTP Client |
| TanStack Query | 5 | Estado assíncrono |
| React Hook Form | 7 | Formulários |
| Zod | 3 | Validação |
| Jest | 30 | Testes — Runner |
| Testing Library | 16 | Testes — UI |
| ESLint | 9 | Linting |
| Prettier | 3 | Formatação |
- Node.js 22+
- npm
# Clone o repositório
git clone https://github.com/db-petcontrol/petcontrol-app.git
# Acesse a pasta do projeto
cd petcontrol-app
# Instale as dependências
npm installNenhuma configuração extra é necessária. O Axios já tem http://localhost:8080 como fallback padrão quando nenhuma variável de ambiente está definida:
// src/lib/api.config.ts
const BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8080"Basta garantir que o backend Spring Boot está rodando em localhost:8080 e iniciar o servidor de desenvolvimento:
npm run devAcesse http://localhost:3000.
O arquivo .env.example contém a URL da API em produção. Para usá-la, basta copiá-lo para .env:
cp .env.example .env# .env.example / .env
NEXT_PUBLIC_API_URL=https://petcontrol-api-h7vz.onrender.comAtenção: a API no Render pode levar alguns segundos para responder na primeira requisição (cold start do plano gratuito).
NEXT_PUBLIC_API_URL definida (.env presente) → usa a URL configurada (Render)
NEXT_PUBLIC_API_URL ausente (sem .env) → fallback para localhost:8080
npm run dev # Inicia o servidor de desenvolvimento (Turbopack)
npm run build # Build para produção
npm run start # Inicia o servidor de produção
npm run lint # Executa o ESLint
npm run format # Formata o código com Prettier
npm run format:check # Verifica formatação sem alterar arquivos
npm run typecheck # Verifica erros de tipo TypeScript
npm run test # Executa testes em modo watch
npm run test:ci # Executa testes com relatório de coverage (CI)Feito com apoio de ☕ por 👩💻 Gabriela de Castro Laurindo e Rachel Pizane Maia