portfolio react typescript supabase game-dev

Spell Decipher: Arquitetando um Jogo Web de Decifração de Palavras com React, TypeScript e Supabase

Desenvolvimento de um puzzle game interativo com tema místico, gerenciamento rigoroso de estado no frontend, integração de banco de dados reativo e deploy contínuo na Vercel.

Desenvolver jogos web interativos que combinem aprendizado de vocabulário e entretenimento requer manter alto desempenho, reatividade em tempo real e um fluxo de estado previsível para gerenciar rodadas, pontuações e cronômetros sem engasgos de interface.

O Spell Decipher foi projetado para entregar essa experiência: um jogo de enigma e decifração de palavras com estética de feitiçaria, no qual o jogador revela termos ocultos contra o relógio, acompanhado de feedback visual instantâneo e ranking em tempo real.

🎯 O Problema de Gamificação vs. A Solução Arquitetural

Desafio de Game Design & Web	Solução Implementada no Spell Decipher
Gerenciamento complexo do estado da partida (palavras, vidas e tempo)	Máquina de estados estritamente tipada em TypeScript com validação previsível por turno
Persistência de dados e ranking global de jogadores	Integração com Supabase Backend-as-a-Service para autenticação e sincronização de high scores
Falta de imersão e feedback tátil/visual ao digitar	Interface temática com Tailwind CSS, teclados virtuais customizados e animações de resposta instantânea
Atrasos na entrega de atualizações e novas mecânicas	Pipeline automatizado de CI/CD via Vercel com checagem estática de tipos antes do deploy

🛠️ Highlights da Stack & Decisões Técnicas

A arquitetura focou em desacoplamento da lógica de jogo da camada de apresentação, além de garantir persistência segura dos dados.

1. Modelo de Domínio e Estado da Partida (TypeScript)

Contratos estritos que definem o estado do jogo, dificuldades dos desafios e a estrutura dos feitiços a serem decifrados:

export type GameStatus = 'idle' | 'playing' | 'won' | 'game_over';
export type SpellDifficulty = 'novice' | 'apprentice' | 'archmage';

export interface SpellChallenge {
  id: string;
  scrambledWord: string;
  solutionWord: string;
  clue: string;
  category: string;
  difficulty: SpellDifficulty;
}

export interface PlayerSession {
  status: GameStatus;
  currentScore: number;
  manaLives: number;
  timeRemaining: number;
  currentChallengeIndex: number;
}

2. Persistência de Dados em Nuvem (Supabase)

Utilização de cliente reativo do Supabase para consultas rápidas ao banco de dados relacional e controle de liderança no ranking (Leaderboard).

3. Componentização Reativa & Deploy Continuo (Vercel)

Estrutura modular de componentes em React com estilos utilitários do Tailwind CSS, compilada e disponibilizada globalmente através da infraestrutura Serverless da Vercel.

🔀 Engenharia na Prática: Git Flow Disciplinado

Gerenciamento de código estruturado em branches isoladas para funcionalidades, ajustes e homologação de releases:

main                    [v1.0.0] (Produção / Vercel)
  ▲
  │ (Release Merge)
release/v1.0.0
  ▲
  │
develop ──────────────────────────────────────────────►
  ▲                      ▲                      ▲
  │                      │                      │
feature/spell-engine   feature/supabase-db    chore/ui-theme

main: Código estável em produção conectado automaticamente ao pipeline da Vercel.
develop: Branch de integração contínua das novas mecânicas.
feature/*: Branches dedicadas ao motor de feitiços, integração com Supabase e UI.

Spell Decipher: Arquitetando um Jogo Web Interativo de Decifração de Palavras com React e TypeScript