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

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

O melhor da tecnologia está no nosso canal no WhatsApp

Entre Agora

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