🦖 DigiVerse - Digital Monsters Universe

Uma plataforma moderna e completa para explorar o universo Digimon

🚀 Demonstração • ✨ Características • 📦 Instalação • 📚 Documentação

---

📖 Índice

• Sobre o Projeto
• Demonstração
• Arquitetura
• Começando
• Docker Deploy
• Documentação
• Scripts Disponíveis
• Contribuindo
• Licença

🎯 Sobre o Projeto

O DigiVerse é um monorepo que fornece uma experiência completa para explorar o universo Digimon:

• API REST completa para dados de Digimon (209+ Digimons, evoluções, tipos, atributos)
• Aplicação Web moderna com design glassmorphism e filtros inline compactos
• Sistema de Autenticação com JWT e refresh tokens
• Infraestrutura Docker pronta para produção

✨ Características Principais

Backend

• 🚀 Performance: Cache Redis, otimizações de query com Prisma
• 🔒 Segurança: JWT com refresh tokens, rate limiting (100 req/min), validação Zod
• 📊 Observabilidade: Logs estruturados com Pino, health checks
• 🎨 Documentação: Swagger/OpenAPI 3.0 completo em /docs
• 🐳 DevOps: Docker multi-stage builds, docker-compose
• 🧪 Qualidade: Testes unitários e de integração (12 tests), ESLint, Prettier

Frontend Web

• 🎭 Design System: Glassmorphism com efeitos de vidro e neon
• 📱 Responsivo: Otimizado para mobile, tablet e desktop
• 🔍 Busca e Filtros: Sistema de filtros inline compactos com expand/collapse
• ⚡ Performance: TanStack Query para cache e estado do servidor
• 🎨 UI/UX: TailwindCSS com design tokens customizados
• 🌐 SEO: Meta tags dinâmicas com React Helmet Async
• 🔐 Auth Flow: Login/Register com proteção de rotas

🏗️ Arquitetura

digiverse/
├── packages/
│   ├── backend/          # API REST (Fastify + Prisma + PostgreSQL)
│   ├── web/              # App Web (React + Vite + TailwindCSS)
│   └── mobile/           # Apps Mobile (React Native - em breve)
├── docs/                 # Documentação adicional
├── CODE_OF_CONDUCT.md   # Código de conduta
└── README.md            # Este arquivo

Stack Tecnológica

Backend

• Runtime: Node.js 18+
• Framework: Fastify 5.6
• ORM: Prisma 6.17
• Database: PostgreSQL 15
• Cache: Redis 7
• Validação: Zod
• Testes: Jest
• Logs: Pino

Frontend (Web)

• Framework: React 19
• Build: Vite 7
• Linguagem: TypeScript 5.6
• Styling: TailwindCSS 3.4
• State: TanStack Query (React Query)
• Routing: React Router v7
• Forms: React Hook Form + Zod
• HTTP: Axios com interceptors

📸 Demonstração

Telas da Aplicação Web

Home Page com Filtros Compactos	Detalhes do Digimon

Filtros Expandidos	Login

Features Destacados

• Filtros Inline Compactos: Sistema de filtros que ocupa 75% menos espaço quando colapsado
• Dropdowns com Portal API: Z-index absoluto (z-9999) para renderização sem conflitos
• Glassmorphism: Efeitos de vidro com backdrop-blur e gradientes sutis
• Busca em Tempo Real: Pesquisa instantânea com debounce
• Responsivo: Layout adaptável para qualquer tamanho de tela

🚀 Começando

Pré-requisitos

• Node.js >= 18.0.0
• pnpm >= 8.0.0
• Docker e Docker Compose (opcional, mas recomendado)

Instalação

1. Clone o repositório:

git clone https://github.com/CAFernandes/API-REST-Digimon.git
cd API-REST-Digimon

2. Instale as dependências:

pnpm install

3. Configure as variáveis de ambiente:

# Backend
cp packages/backend/.env.example packages/backend/.env
# Edite packages/backend/.env com suas configurações

4. Inicie os serviços de infraestrutura (PostgreSQL + Redis):

pnpm docker:backend:up

5. Execute as migrações do banco de dados:

cd packages/backend
pnpm prisma:migrate
pnpm db:seed  # Popula o banco com dados de exemplo

6. Inicie o servidor de desenvolvimento:

# Backend
pnpm backend:dev

# Web (em outro terminal)
pnpm web:dev

🎉 Pronto! A API estará rodando em http://localhost:3000 e o frontend em http://localhost:5173

🐳 Docker Deploy

O DigiVerse oferece suporte completo ao Docker, permitindo executar frontend e backend de forma independente.

Quick Start com Docker

# 1. Configurar variáveis de ambiente
cp .env.example .env
# Edite .env com suas configurações

# 2. Build e iniciar todos os serviços
pnpm docker:build
pnpm docker:up

# 3. Acessar aplicação
# Frontend: http://localhost:80
# Backend: http://localhost:3000
# Swagger: http://localhost:3000/docs

Arquitetura Docker

┌────────────────────────────────────────────┐
│         digiverse_network (bridge)         │
│                                            │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
│  │   web    │  │ backend  │  │ postgres │  │
│  │  :80     │←→│  :3000   │←→│  :5432   │  │
│  │ (Nginx)  │  │(Fastify) │  │          │  │
│  └──────────┘  └──────────┘  └──────────┘  │
│                      ↓                     │
│                 ┌──────────┐               │
│                 │  redis   │               │
│                 │  :6379   │               │
│                 └──────────┘               │
└────────────────────────────────────────────┘

Vantagens do Setup Docker

• ✅ Frontend Independente: Pode rodar mesmo com backend em manutenção
• ✅ Multi-stage Builds: Imagens otimizadas (~150MB para web, ~200MB para backend)
• ✅ Health Checks: Monitoramento automático de saúde dos serviços
• ✅ Volumes Persistentes: Dados preservados entre reinicializações
• ✅ Auto-restart: Recuperação automática de falhas

📚 Documentação Completa: docs/DOCKER_DEPLOY.md ⚡ Quick Start: docs/DOCKER_QUICKSTART.md

📚 Documentação

Documentação por Pacote

• Backend Documentation - Guia completo da API

  • Endpoints disponíveis
  • Autenticação e segurança
  • Schemas e validações
  • Deploy e Docker

• Web Documentation - Guia do frontend web

  • Estrutura de componentes
  • Gerenciamento de estado
  • Build e deploy

• Mobile Documentation - Em desenvolvimento

Documentação Adicional

• Swagger/OpenAPI - Documentação interativa da API (após iniciar o backend)
• DOCKER_DEPLOY.md - Guia completo de deploy com Docker
• DOCKER_QUICKSTART.md - Quick start Docker em 3 passos
• CONTRIBUTING.md - Guia para contribuidores (250+ linhas)
• CHANGELOG.md - Histórico de mudanças do projeto
• CODE_OF_CONDUCT.md - Código de conduta da comunidade
• Z_INDEX_GUIDE.md - Guia de hierarquia z-index
• ProjectPlan.md - Roadmap e planejamento do projeto

🛠️ Scripts Disponíveis

Backend

pnpm backend:dev          # Inicia servidor em modo desenvolvimento
pnpm backend:build        # Build para produção
pnpm backend:start        # Inicia servidor de produção
pnpm backend:test         # Executa testes
pnpm backend:lint         # Verifica código com ESLint
pnpm backend:format       # Formata código com Prettier

Web

pnpm web:dev             # Inicia dev server
pnpm web:build           # Build para produção
pnpm web:preview         # Preview do build de produção

Docker

Orquestração Completa (Frontend + Backend + Infraestrutura)

pnpm docker:build         # Build de todas as imagens (web + backend)
pnpm docker:up            # Inicia todos os serviços
pnpm docker:down          # Para todos os serviços
pnpm docker:logs          # Visualiza logs de todos os serviços
pnpm docker:rebuild       # Rebuild completo e reinicialização
pnpm docker:clean         # Remove containers e volumes (⚠️ apaga dados)

Frontend Específico

pnpm docker:web:build     # Build apenas do frontend
pnpm docker:web:up        # Inicia apenas o frontend (Nginx)
pnpm docker:web:down      # Para o frontend
pnpm docker:web:logs      # Logs do frontend

Backend Específico (Legacy)

pnpm docker:backend:build # Build da imagem Docker do backend
pnpm docker:backend:up    # Inicia containers (PostgreSQL + Redis)
pnpm docker:backend:down  # Para containers do backend
pnpm docker:backend:logs  # Visualiza logs do backend

📚 Guia Completo: Veja docs/DOCKER_DEPLOY.md para instruções detalhadas de deploy

Utilidades

pnpm lint:all            # Lint em todos os pacotes
pnpm format:all          # Formata todos os pacotes
pnpm test:all            # Testes em todos os pacotes
pnpm clean               # Limpa node_modules e builds

🤝 Contribuindo

Contribuições são sempre bem-vindas! Por favor, leia nosso Guia de Contribuição e o Código de Conduta antes de enviar um Pull Request.

Como Contribuir

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'feat: Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Caio Alberto Fernandes

• Email: [email protected]
• GitHub: @CAFernandes

🙏 Agradecimentos

• Comunidade Digimon
• Todos os contribuidores
• Fastify Team
• Prisma Team

---

Feito com ❤️ e ☕ por Caio Fernandes