Site para organizar objetivos, planos, marcos e sonhos numa linha do tempo — com zoom por dia, semana, mês, trimestre e ano, filtros por status e categoria, visão de tabela e um painel separado para sonhos de longo prazo.
O código é público; os dados não. Tudo o que você cadastra fica no seu navegador e nunca sai dele. Quem clonar este repositório começa com uma base de exemplo e monta a sua própria.
Abra a URL do GitHub Pages, comece a cadastrar e pronto. A base fica no localStorage do seu
navegador, naquele dispositivo. Exporte um JSON de tempos em tempos como backup (Ajustes →
Exportar JSON).
- Clique em Use this template → Create a new repository (ou faça um fork).
- Em Settings → Pages, escolha Source: GitHub Actions. O workflow em
.github/workflows/deploy.ymlpublica a cada push namain. - Abra o seu site e substitua os itens de exemplo pelos seus.
npm install
npm run dev # http://localhost:5173
npm run build # gera dist/
npm run preview # serve o dist/| Onde | O que é | Vai para o Git? |
|---|---|---|
localStorage do navegador |
sua base de trabalho, salva a cada alteração | não |
timeline-AAAA-MM-DD.json (export) |
backup que você baixa quando quiser | não (está no .gitignore) |
public/data/timeline.json |
base inicial opcional, se você quiser versionar em outro lugar | não (está no .gitignore) |
public/data/timeline.example.json |
exemplo do formato, sem nada pessoal | sim |
A ordem de carregamento na primeira abertura é: localStorage → public/data/timeline.json
→ base de exemplo embutida.
Três caminhos, do mais simples ao mais completo:
- Backup manual — exporte o JSON pela aba Ajustes e guarde onde preferir (Drive, Dropbox, um repositório privado). Para restaurar em outro dispositivo: Ajustes → Importar JSON.
- Repositório privado só de dados — crie um repo privado com o seu
timeline.jsone copie o arquivo parapublic/data/antes de rodar o build local. O.gitignoredeste projeto já impede que ele seja commitado aqui por acidente. - Fork privado — se você não faz questão de manter o código público, um fork privado deixa
commitar
public/data/timeline.jsonsem expor nada (remova a linha correspondente do.gitignore).
⚠️ Se você publicar o site com umpublic/data/timeline.jsondentro, o arquivo fica acessível por URL para qualquer pessoa. Só faça isso se o conteúdo puder ser público.
Timeline — visão principal. Barras com início e fim, marcos como losangos, raias agrupadas por categoria, linha de "hoje", zoom em cinco níveis (Dia, Semana, Mês, Trimestre, Ano). Arraste uma barra para mover a tarefa; arraste as pontas para mudar início ou fim; clique para editar.
Marcos dentro de tarefas — um marco pode ser um ponto de checagem de uma tarefa, e aí ele
divide a linha com ela em vez de ocupar uma raia própria. Dá para criá-los de três jeitos:
na própria tarefa (o editor tem uma seção "Marcos da tarefa", com título, data e status por
linha), pelo +◆ que aparece ao passar o mouse na linha da tarefa, ou escolhendo a tarefa no
campo "Tarefa" ao editar um marco avulso. Um marco vinculado herda a categoria da tarefa,
anda junto quando você arrasta a barra inteira (esticar só uma ponta não mexe nos marcos) e,
se a tarefa for excluída, volta a ser um marco avulso em vez de sumir.
Tabela — os mesmos itens em lista ordenável por tipo, título, status, categoria, início, fim e quantidade de dias, com exportação para CSV.
Sonhos — objetivos futuros sem data obrigatória, em quatro colunas de horizonte (curto, médio, longo prazo e "algum dia"), com prioridade de 1 a 5 e ano-alvo opcional.
Ajustes — status e categorias são dados, não código: crie, renomeie, recolora, reordene ou remova. Nada quebra ao excluir — os itens afetados migram para o primeiro status, ou ficam "Sem categoria". Aqui também ficam exportação, importação e limpeza da base.
Busca por texto, status (múltipla escolha), categoria (múltipla escolha, incluindo "Sem categoria"), recorte de período e alternância entre tarefas e marcos. Sem seleção = mostra tudo. As preferências de visualização (aba, zoom, agrupamento, tema claro/escuro) ficam salvas entre sessões.
A interface usa a paleta Catppuccin: Latte no modo claro e
Mocha no escuro. Os tons ficam em variáveis CSS (--ctp-*) no topo de src/index.css e
as escalas de cor do Tailwind apontam para elas, então trocar de flavor (Frappé, Macchiato…)
é só substituir os valores dessas variáveis.
Datas são sempre AAAA-MM-DD e o intervalo é inclusivo (05/01 a 05/01 = 1 dia). horizon
aceita curto, medio, longo ou algum-dia. O taskId do marco é opcional: com ele, o
marco é desenhado na linha daquela tarefa; ausente ou null, é um marco avulso com linha
própria. Na importação, campos ausentes ganham um valor padrão e referências quebradas viram
"sem categoria" (ou marco avulso, no caso do taskId) em vez de derrubar a página — dá para
montar o JSON na mão ou gerar a partir de uma planilha sem medo.
src/
types.ts modelo de dados
lib/dates.ts aritmética de datas (sem dependências)
lib/storage.ts carga, gravação, importação e normalização
lib/seed.ts base de exemplo e status/categorias padrão
lib/filters.ts regras de filtragem
state/database.tsx estado global e operações de escrita
components/timeline/scale.ts escala e ticks dos cinco níveis de zoom
components/timeline/TimelineView.tsx
components/TableView.tsx DreamsView.tsx SettingsView.tsx
Stack: React 19, TypeScript, Vite e Tailwind CSS 4. Sem backend, sem contas, sem rastreio.
MIT — veja LICENSE.
{ "version": 1, "meta": { "title": "Minha timeline", "owner": "", "updatedAt": "..." }, "statuses": [{ "id": "st-x", "name": "Em andamento", "color": "#04a5e5", "done": false }], "categories": [{ "id": "cat-x", "name": "Carreira", "color": "#7287fd" }], "tasks": [{ "id": "task-x", "title": "…", "description": "…", "start": "2026-01-05", "end": "2026-01-31", "statusId": "st-x", "categoryId": "cat-x", "progress": 40 }], "milestones": [{ "id": "ms-x", "title": "…", "date": "2026-06-30", "statusId": "st-x", "categoryId": "cat-x", "taskId": "task-x" }], "dreams": [{ "id": "dream-x", "title": "…", "horizon": "longo", "targetYear": 2031, "priority": 5, "statusId": "st-x", "categoryId": "cat-x" }] }