# Decoda - App

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.

![React](https://img.shields.io/badge/React-19-blue)
![Blockly](https://img.shields.io/badge/Blockly-12.3-orange)
![Vite](https://img.shields.io/badge/Vite-7.1-purple)
![Bundle](https://img.shields.io/badge/Bundle-5.89kB-green)

## Sobre o Projeto

Decoda é uma plataforma educacional inspirada no [Blockly Games](https://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

```bash
# 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

```bash
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:

```bash
cd ../docs
pnpm install
pnpm start
```

Acesse em: http://localhost:3000

---

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