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.
