🎸 Guitar Gym

CS50x Final Project

Video Demo: ▶️ Assistir Demonstração no YouTube
Live App: 🔗 ocimarjr.pythonanywhere.com

---

📖 Sobre o Projeto

Criei o Guitar Gym simplesmente porque eu realmente precisava dele. Como estudante de guitarra, enfrentava uma situação chata o tempo todo: sentava para treinar uma técnica (como palhetada alternada), anotava a velocidade (BPM) num pedaço de papel qualquer e prometia a mim mesmo que superaria aquele recorde no dia seguinte. Mas a vida acontecia, eu perdia o papel e, na semana seguinte, não lembrava de mais nada. Eu não sabia se estava evoluindo ou estagnado. Percebi que, sem monitorar meu progresso, eu não estava estudando de verdade; estava apenas "brincando" com a guitarra.

Decidi então unir música e programação para fazer deste o meu projeto final do CS50. O Guitar Gym não é apenas um bloco de notas; é uma "estação de treino". O objetivo era facilitar minha vida. Eu faço login, escolho um exercício e pronto. Ligo o metrônomo integrado (sem precisar abrir outros apps no celular) e o cronômetro marca meu tempo automaticamente. Ao final da sessão, salvo tudo e vejo o gráfico subir. É simples, mas mudou completamente minha disciplina.

📂 Arquivos e Funcionalidades

Construí o "cérebro" do site usando Flask (Python) porque queria algo seguro para armazenar o banco de dados e logins, mantendo a parte visual rápida com JavaScript.

• app.py: O arquivo principal que controla tudo.
  • Login e Segurança: Gerencia quem entra e sai. Por segurança, as senhas são transformadas em códigos (hashes) para que ninguém possa lê-las.
  • Sessão: Usei flask_session para que o site lembre quem você é enquanto navega pelas páginas.
  • Salvar sem travar: A parte mais legal foi criar a rota /save_history. Diferente de formulários comuns, essa rota aceita dados diretamente do JavaScript. Isso me permite salvar minha sessão de treino sem a página recarregar e parar meu fluxo.
• guitar.db: Meu banco de dados. Criei três tabelas conectadas:
  • users: Armazena contas e senhas.
  • exercises: Armazena os exercícios que cada pessoa cria.
  • history: O diário de bordo. Conecta o usuário ao exercício, criando um histórico para cada pessoa.
• helpers.py: Um arquivo auxiliar contendo a função @login_required. Isso garante que ninguém possa entrar na página de treino digitando o endereço diretamente sem estar logado.
• Design de Tela (static/ e templates/):
  • practice.js: Foi onde mais trabalhei. Eu precisava de um metrônomo perfeito. Descobri que usar arquivos MP3 causa atraso (lag) com o tempo. Então, estudei a Audio API do navegador e escrevi um código que gera o som "beep" usando matemática. Isso garante que o tempo seja exato.
  • styles.css: Fiz um "Dark Mode" com detalhes em amarelo e laranja. Queria um visual "Rock Gym". Além disso, músicos estudam muito à noite, e uma tela branca cansa os olhos.
  • history.html: Dados são inúteis se não os vemos. Usei a biblioteca Chart.js aqui. O site pega meus dados e desenha um gráfico de linha. Ver a linha subir me dá energia para praticar no dia seguinte.

🚧 Desafios e Decisões

Não foi fácil, e tive que resolver alguns problemas chatos:

1. O erro ao deletar exercícios: Quando tentei criar o botão "Excluir Exercício", o site quebrou. O banco de dados não me deixava apagar um exercício que já tinha histórico salvo (é uma trava de segurança). A solução foi lógica: escrevi um código que primeiro apaga o histórico daquele exercício e só então apaga o exercício em si.
2. O navegador teimoso (Cache): Enquanto criava o site, o navegador insistia em usar versões antigas do meu código JavaScript. Eu mudava o metrônomo, atualizava a página e nada acontecia. Sofri um pouco até aprender a forçar a atualização da página para ver as mudanças na hora.
3. Feito para Celular (Mobile-First): Eu toco guitarra em pé ou longe do computador. Um site que só funciona em tela grande não serviria para mim. Usei Bootstrap 5 para garantir que os botões fossem grandes e fáceis de apertar na tela do celular apoiado em uma estante de partitura.

🔮 Ideias para o Futuro

Tenho orgulho desta versão, mas tenho planos. No futuro, queria criar uma função "Social" para desafiar amigos a alcançar uma velocidade. Também pensei em "Redefinição de Senha via Email", mas, por enquanto, foquei no principal: a ferramenta de treino.

🙏 Agradecimentos

Usei IA (Gemini) como um "tutor particular" para me ajudar quando o código quebrava ou o layout não alinhava. Além disso, como inglês não é minha língua nativa, usei a IA para ajudar a traduzir e melhorar este texto para torná-lo mais claro. Mas a lógica de negócio, o banco de dados e a vontade de resolver um problema real de músico foram 100% meus.

---

📖 Description

I created Guitar Gym simply because I really needed it. As a guitar student, I faced an annoying situation all the time: I would sit down to practice a technique (like alternate picking), write down the speed (BPM) on a random piece of paper, and promise myself I would beat that record the next day. But life happened, I’d lose the paper, and by the next week, I couldn't remember anything. I didn't know if I was improving or stuck. I realized that without tracking my progress, I wasn't really studying; I was just playing around with the guitar.

So, I decided to combine music and programming to make this my CS50 final project. Guitar Gym isn't just a notepad; it is a "practice station." The goal was to make my life easier. I log in, pick an exercise, and that's it. I turn on the built-in metronome (no need to open other apps on my phone), and the timer tracks my time automatically. At the end of the session, I save everything and watch the graph go up. It’s simple, but it completely changed my discipline.

📂 Files and Features

I built the "brain" of the site using Flask (Python) because I wanted something secure to store the database and logins, while keeping the visual part fast using JavaScript.

• app.py: The main file that controls everything.
  • Login and Security: It handles who enters and leaves. For security, passwords are turned into codes (hashes) so no one can read them.
  • Session: I used flask_session so the site remembers who you are while you navigate the pages.
  • Saving without freezing: The coolest part was creating the /save_history route. Unlike common forms, this route accepts data directly from JavaScript. This allows me to save my practice session without the page reloading and stopping my flow.
• guitar.db: My database. I created three connected tables:
  • users: Stores accounts and passwords.
  • exercises: Stores the exercises each person creates.
  • history: The logbook. It connects the user to the exercise, creating a history for each person.
• helpers.py: A helper file containing the @login_required function. This ensures no one can enter the practice page by typing the address directly without being logged in.
• The Screen Design (static/ and templates/):
  • practice.js: This is where I worked the most. I needed a perfect metronome. I found out that using MP3 files causes lag over time. So, I studied the browser's Audio API and wrote code that generates the "beep" sound using math. This ensures the timing is exact.
  • styles.css: I made a "Dark Mode" with yellow and orange details. I wanted a "Rock Gym" look. Plus, musicians study a lot at night, and a white screen tires the eyes.
  • history.html: Data is useless if we don't see it. I used the Chart.js library here. The site takes my data and draws a line graph. Seeing the line go up gives me energy to practice the next day.

🚧 Challenges and Decisions

It wasn't easy, and I had to solve some annoying problems:

1. The error when deleting exercises: When I tried to create the "Delete Exercise" button, the site broke. The database wouldn't let me delete an exercise that already had saved history (it's a security lock). The solution was logical: I wrote code that first deletes the history of that exercise and only then deletes the exercise itself.
2. The stubborn browser (Cache): While creating the site, the browser insisted on using old versions of my JavaScript code. I would change the metronome, refresh the page, and nothing happened. I struggled a bit until I learned to force the page update to see changes immediately.
3. Made for Mobile (Mobile-First): I play guitar standing up or away from the computer. A site that only works on a big screen wouldn't work for me. I used Bootstrap 5 to ensure the buttons were big and easy to press on a phone screen resting on a music stand.

🔮 Ideas for the Future

I'm proud of this version, but I have plans. In the future, I wanted to create a "Social" function to challenge friends to reach a speed. I also thought about "Password Reset via Email," but for now, I focused on the main thing: the training tool.

🙏 Acknowledgements

I used AI (Gemini) as a "private tutor" to help me when the code broke or the layout didn't align. Additionally, since English is not my native language, I used AI to help translate and improve this text to make it clearer. But the business logic, the database, and the will to solve a real musician's problem were 100% mine.

📖 Descrizione

Ho creato Guitar Gym semplicemente perché ne avevo davvero bisogno. Come studente di chitarra, affrontavo sempre una situazione fastidiosa: mi sedevo per praticare una tecnica (come la plettrata alternata), annotavo la velocità (BPM) su un pezzo di carta a caso e mi promettevo di battere quel record il giorno successivo. Ma poi perdevo il foglio e, la settimana dopo, non ricordavo più nulla. Non sapevo se stavo migliorando o se ero bloccato. Ho capito che, senza tracciare i miei progressi, non stavo studiando davvero; stavo solo "giocando" con la chitarra.

Così, ho deciso di unire musica e programmazione per farne il mio progetto finale del CS50. Guitar Gym non è solo un blocco note; è una "stazione di pratica". L'obiettivo era facilitarmi la vita. Faccio il login, scelgo un esercizio ed è fatta. Accendo il metronomo integrato (senza bisogno di aprire altre app sul telefono) e il timer traccia il mio tempo automaticamente. Alla fine della sessione, salvo tutto e guardo il grafico salire. È semplice, ma ha cambiato completamente la mia disciplina.

📂 File e Funzionalità

Ho costruito il "cervello" del sito usando Flask (Python) perché volevo qualcosa di sicuro per archiviare il database e i login, mantenendo la parte visiva veloce usando JavaScript.

• app.py: Il file principale che controlla tutto.
  • Login e Sicurezza: Gestisce chi entra e chi esce. Per sicurezza, le password vengono trasformate in codici (hash) in modo che nessuno possa leggerle.
  • Sessione: Ho usato flask_session affinché il sito ricordi chi sei mentre navighi tra le pagine.
  • Salvataggio senza blocchi: La parte più bella è stata creare la rotta /save_history. A differenza dei moduli comuni, questa rotta accetta dati direttamente da JavaScript. Questo mi permette di salvare la mia sessione di pratica senza ricaricare la pagina e interrompere il mio flusso.
• guitar.db: Il mio database. Ho creato tre tabelle collegate:
  • users: Memorizza account e password.
  • exercises: Memorizza gli esercizi creati da ogni persona.
  • history: Il diario di bordo. Collega l'utente