Como criei um Diário de Estudos com Git, YouTube e Backup Inteligente

• Publicado em: Commit to Learn
• 262 visualizações

Um projeto pessoal para transformar commits em capítulos de uma jornada de aprendizado.

Criar uma rotina de estudos versionada pode ser uma forma poderosa de manter a consistência e documentar sua evolução. Neste artigo, compartilho como construí uma timeline interativa usando apenas HTML, JavaScript e a API pública do GitHub — com direito a backup automático em JSON!

A ideia

A proposta é simples e poderosa: usar o Git como uma ferramenta para documentar a jornada de aprendizado. Cada commit representa um estudo, uma conquista ou um novo conhecimento adquirido — e, quando possível, acompanha um link para um vídeo no YouTube ou um artigo que complementa aquele registro.

A motivação por trás disso vai além da organização: é sobre ver os “quadradinhos verdes” do GitHub sendo preenchidos todos os dias, como pequenas provas visuais de progresso. Essa visão concreta da evolução ao longo do tempo ajuda a manter a disciplina, a consistência e até serve como um combustível emocional — afinal, não há nada mais satisfatório do que olhar para o gráfico de contribuições e saber que cada pixel ali é um passo no seu crescimento.

Assim nasceu o projeto “Commit to Learn”: um diário de estudos versionado com Git, onde cada commit conta uma parte da história.

🛠️ O que foi construído

📁 Estrutura do projeto

• timeline.html — Página HTML que lê os commits diretamente da API do GitHub e monta uma linha do tempo.
• timeline.css — Estilo para deixar a timeline bonitinha e legível.
• README.md — Apresentação do projeto e instruções de uso.

⚙️ Como funciona

1. A página HTML usa JavaScript para consumir a API pública do GitHub.
2. Cada commit é exibido na timeline, com:
   • O texto do commit
   • A data em que foi feito
   • Um ícone e link, se houver vídeo ou artigo no commit
3. O commit deve seguir o padrão:

feat: Título do aprendizado | https://link-do-video-ou-artigo

A timeline automaticamente mostra o ícone do YouTube ou de artigo, dependendo do link.

🧪 Exemplo de commit:

git commit -m "feat: CSS Grid tutorial reading | https://css-tricks.com/snippets/css/complete-guide-grid/"

🧠 Por que isso é útil?

• Você acompanhando sua evolução de forma visual e prática
• Compartilha sua jornada com outras pessoas de forma inspiradora
• Usa o Git de uma maneira criativa, indo além do código
• Serve como portfólio vivo do seu aprendizado

🔐 E se meu projeto for apagado?

Foi aí que entrou uma necessidade real: e se o repositório for excluído por acidente? Para resolver isso, implementei a geração do commits.json como backup. Isso garante que meus registros possam ser restaurados ou migrados para outra plataforma, se necessário.

✨ Extras que foram incluídos

• Ícones personalizados para vídeos e artigos
• Datas exibidas na timeline para mostrar a sequência
• Possibilidade futura de adicionar tags, filtros e gamificação

🚀 Próximos passos

• Adicionar filtros por tema (CSS, JS, etc.)
• Gerar quiz com base nos vídeos/artigos estudados (usando IA 🤖)
• Criar um app em React com experiência ainda mais interativa

📝 Conclusão

Esse projeto mostra que estudar pode ser divertido, organizado e criativo.
Ao transformar commits em capítulos, você transforma o Git em uma máquina do tempo do conhecimento.

Se quiser criar o seu próprio, o repositório está aqui:
🔗 github.com/jamesrmoro/study-timeline