Video Demo:
Live App: 🔗 ocimarjr.pythonanywhere.com
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.
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_sessionpara 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/etemplates/):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.
Não foi fácil, e tive que resolver alguns problemas chatos:
- 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.
- 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.
- 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.
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.
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.
🇺🇸 Click here for English version
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.
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_sessionso the site remembers who you are while you navigate the pages. - Saving without freezing: The coolest part was creating the
/save_historyroute. 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_requiredfunction. This ensures no one can enter the practice page by typing the address directly without being logged in.- The Screen Design (
static/andtemplates/):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.
It wasn't easy, and I had to solve some annoying problems:
- 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.
- 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.
- 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.
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.
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.
🇮🇹 Clicca qui per la versione in Italiano
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.
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_sessionaffinché 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 all'esercizio, creando una cronologia per ogni persona.
helpers.py: Un file di supporto che contiene la funzione@login_required. Questo garantisce che nessuno possa entrare nella pagina di pratica digitando direttamente l'indirizzo senza aver effettuato il login.- Design dello Schermo (
static/etemplates/):practice.js: È dove ho lavorato di più. Avevo bisogno di un metronomo perfetto. Ho scoperto che l'uso di file MP3 causa ritardi nel tempo. Quindi, ho studiato la Audio API del browser e ho scritto un codice che genera il suono "beep" usando la matematica. Questo assicura che il tempo sia esatto.styles.css: Ho creato una "Dark Mode" con dettagli in giallo e arancione. Volevo un look "Rock Gym". Inoltre, i musicisti studiano molto di notte e uno schermo bianco stanca gli occhi.history.html: I dati sono inutili se non li vediamo. Ho usato la libreria Chart.js qui. Il sito prende i miei dati e disegna un grafico a linee. Vedere la linea salire mi dà energia per praticare il giorno successivo.
Non è stato facile e ho dovuto risolvere alcuni problemi fastidiosi:
- L'errore nell'eliminazione degli esercizi: Quando ho provato a creare il pulsante "Elimina Esercizio", il sito si rompeva. Il database non mi permetteva di eliminare un esercizio che aveva già una cronologia salvata (è un blocco di sicurezza). La soluzione è stata logica: ho scritto un codice che prima cancella la cronologia di quell'esercizio e solo dopo elimina l'esercizio stesso.
- Il browser testardo (Cache): Mentre creavo il sito, il browser insisteva nell'usare vecchie versioni del mio codice JavaScript. Modificavo il metronomo, aggiornavo la pagina e non succedeva nulla. Ho faticato un po' finché non ho imparato a forzare l'aggiornamento della pagina per vedere le modifiche immediatamente.
- Fatto per Mobile (Mobile-First): Suono la chitarra in piedi o lontano dal computer. Un sito che funziona solo su uno schermo grande non andrebbe bene per me. Ho usato Bootstrap 5 per assicurarmi che i pulsanti fossero grandi e facili da premere sullo schermo di un telefono appoggiato su un leggio.
Sono orgoglioso di questa versione, ma ho dei piani. In futuro, vorrei creare una funzione "Social" per sfidare gli amici a raggiungere una velocità. Ho pensato anche al "Ripristino Password via Email", ma per ora mi sono concentrato sulla cosa principale: lo strumento di allenamento.
Ho usato l'IA (Gemini) come un "tutor privato" per aiutarmi quando il codice si rompeva o il layout non si allineava. Inoltre, poiché l'inglese non è la mia lingua madre, ho usato l'IA per aiutare a tradurre e migliorare questo testo per renderlo più chiaro. Ma la logica aziendale, il database e la volontà di risolvere un vero problema da musicista erano al 100% miei.
