Roadmap Full-Stack · Painel de estudos

Painel para orquestrar o Roadmap Full-Stack V2: trilha por categorias, progresso, aulas em abas, exercícios, revisões espaçadas, mapa mental, projetos e diário.

Feito com HTML, CSS e JavaScript puro (ES modules, sem framework e sem build).

Funcionalidades

• Painel — progresso geral e por categoria, "continuar estudando", semana, constância (mapa de calor), revisões do dia e próximo simulado.
• Trilha — Front-End, Back-End, TypeScript e Full Stack, separados por tecnologia (JavaScript, React, Node, Banco de dados…). Status de cada módulo segue as dependências do roadmap (bloqueado → disponível → em andamento → portão aprovado).
• Aula em aba (#/modulo/F03) — cada módulo abre em uma aba interna com: visão geral, checklist de conteúdo, exercícios, dicas (explicações fundamentais, erros frequentes, comandos do mentor), materiais e documentação oficial, revisão, portão, notas e a ficha completa.
• Exercícios — os 229 exercícios das fichas com status, nível de dica (0–3), tempo e filtros. Métricas do doc 07: % sem dica e dica média.
• Revisões espaçadas — D+1 → D+3 → D+7 → D+21 → D+60; errou, volta para o D+1. Tarefas de cada etapa vêm da seção 9 da ficha.
• Mapa mental — árvore por categoria e grafo de dependências, com zoom, arrastar e clique para abrir a aula.
• Projetos P1–P6 — requisitos, regras de negócio, marcos e critérios de aceitação como checklist.
• Diário — diário de bugs (com padrões por fundamento), revisão semanal e sessões de foco.
• Timer de foco (50 + 10 min), busca global (Ctrl+K), tema escuro/claro, backup em JSON.

O progresso fica no localStorage do navegador. Use Configurações → Exportar backup para levar a outro dispositivo.

Rodar localmente

python3 -m http.server 8000   # ou: npx serve .

Abra http://localhost:8000. (Abrir o index.html direto pelo arquivo não funciona: o navegador bloqueia fetch e módulos em file://.)

Atualizar o conteúdo

Os arquivos originais do roadmap ficam em roadmap/. Editou uma ficha?

node scripts/build-data.mjs   # gera data/roadmap.json

Faça commit do data/roadmap.json. Para mudar a organização das categorias, edite js/taxonomy.js.

Estrutura

index.html            shell (sidebar, topo, abas)
css/tokens.css        paleta e temas
css/app.css           componentes e animações
js/app.js             rotas (hash), abas, busca, timer, tema
js/model.js           dados + status/progresso/dependências
js/store.js           estado no localStorage
js/srs.js             revisão espaçada
js/md.js              renderer de Markdown
js/views/*.js         telas
scripts/build-data.mjs  roadmap/*.md → data/roadmap.json
roadmap/              fichas originais (RODMAP-V2)

Deploy

Site estático: na Vercel, importe o repositório com Framework preset: Other, sem build command e com a raiz como diretório de saída.