CRUD Dungeon
Um RPG top-down onde cada ação do player é uma operação CRUD real em um banco MySQL. Construir uma casa? INSERT. Evoluir? UPDATE. Aprender SQL nunca foi tão divertido.
A mágica educacional
Cada ferramenta do player tem mapeamento explícito para o verbo HTTP correspondente e a palavra-chave SQL gerada no backend. O painel CRUD Live mostra essa correspondência em tempo real — o aluno vê o jogo virar query.
Constrói uma casa nova no tile à frente do player.
Evolui a casa para o próximo nível visual (1→2→3).
Apaga a casa do banco — animação de queda inclusa.
Lê os dados da casa (SELECT WHERE id = ?).
CRUD Live · Tela dividida
Um HUD flutuante sobre o canvas com 5 painéis observáveis: Database View, Activity Log, Network Log, SQL Console e Stats Cards. O player joga e debuga ao mesmo tempo.
> INSERT INTO objetos
(tipo, pos_x, pos_y) VALUES
('servidor', 20, 14);
✓ 1 row affected · 12ms
Backend hardened
Apesar de ser um jogo, a API segue padrões production-grade: tokens CSRF, rate limiting, validação por schema com Zod, sanitização de input e prepared statements no mysql2.
Engine sob medida
Construído sobre Kaplay (HTML5 game engine), com grid 40×28 tiles, câmera com zoom 1.5×, sprites multi-nível para evolução das casas e SFX customizado por evento.
Tutorial + Quiz
Onboarding em 7 etapas guiadas (name → intro → move → create → read → update → delete) e um quiz final que valida o aprendizado dos 4 verbos CRUD antes de liberar o modo livre.
Stack completa
Frontend
- Next.js 16 (App Router)
- React 19
- Tailwind v4
- Framer Motion
Game
- Kaplay 3001
- Canvas 2D
- Custom SFX
Backend
- MySQL · mysql2
- Route Handlers
- Zod schemas
Cloud · State
- AWS · Vercel
- Zustand · React Query
- localStorage