Uma plataforma educacional de programação visual desenvolvida em React, combinando Blockly, Phaser e tours interativos para ensinar lógica de programação através de jogos.

Sobre o Projeto

Decoda é uma plataforma educacional inspirada no Blockly Games do Google, expandida com recursos modernos e jogos adicionais. A plataforma combina programação visual (Blockly) com jogos interativos para ensinar conceitos fundamentais de programação.

Jogos Disponíveis

Automato - Navegação em labirinto com lógica de movimentação
Bird - Jogo de coleta com física e animações
Semáforo - Controle de trânsito e sequências lógicas
Turtle - Desenho programático (Logo graphics)
Motoca - Jogo de esquiva e timing
Emoji Match - Jogo de memória e correspondência
Detector de Sentimentos - Análise de texto com IA
Playground - Editor livre para experimentação

Características

Programação Visual: Editor Blockly com blocos customizados
Tours Guiados: Sistema completo de onboarding com Shepherd.js
Responsivo: Interface adaptada para desktop e mobile
Persistência: Salvamento automático do progresso
Otimizado: Bundle inicial de apenas 5.89 kB (98.4% de redução)

🚀 Desenvolvimento

Pré-requisitos

Node.js 20 ou superior
pnpm

Instalação e Execução

# Clone o repositório
git clone https://git.mtst.tec.br/rui.moraes/plataforma-edu.git
cd plataforma-edu/app

# Instale as dependências
pnpm install

# Execute em modo de desenvolvimento
pnpm run dev

# Acesse no navegador
http://localhost:5173

📄 Scripts Disponíveis

pnpm dev          # Executa aplicação em desenvolvimento (porta 5173)
pnpm build        # Build de produção
pnpm preview      # Preview do build de produção
pnpm test         # Executa testes com Vitest
pnpm lint         # Verifica código com ESLint

🏗️ Tecnologias

React 19 - Framework UI com lazy loading
Blockly 12.3 - Editor de programação visual
Phaser 3.90 - Engine para jogos 2D
Shepherd.js 14.5 - Tours guiados interativos
Vite 7.1 - Build tool otimizado
TailwindCSS 3.4 - Estilização utilitária

📊 Performance

Lazy Loading: Componentes carregados sob demanda
Code Splitting: Vendors separados (Blockly 3.5 MB, Phaser 850 KB)
Tree Shaking: Imports otimizados de blockly/core
Image Optimization: Compressão automática com Sharp

Resultado: Bundle inicial reduzido de 3.870 MB para 5.89 kB (98.4% de redução)

📚 Documentação

A documentação completa do projeto está em /docs na raiz do repositório.

Para rodar a documentação localmente:

cd ../docs
pnpm install
pnpm start

Acesse em: http://localhost:3000

Desenvolvido com ❤️ para educação em programação