NOTE: No updates will be made to this project, so that it remains true to its state when it was submitted as my final project for Harvard's CS50.
For the updated version, please visit my-music-notes to visit the repository, or the site can be found at mymusicnotes.net.
Video Demo: https://youtu.be/FSl0IFaydCc
My final project for CS50 is a website to be used by my private music students to keep track of how many, and which days during the week they were able to practice their instrument, in between their weekly lessons. I utilized bootstrap to try and my my website look simple and clean, and made nearly everything pretty monochromatic in that effort as well. I wanted it to be easy for students to simply log in, check a box for the day, and feel good about getting their practice in without the process being too complicated or too much trouble.
app.py: Contains the python code necessary for flask to serve the website dynamically. Here we find the code which allows for logging in, logging out, registering a new account, linking to the various pages from the home index page, as well as allowing for the various check box statuses (checked vs unchecked) to save to the database as per each individual account logged in to the site, and persist until they log in again in the future.
helpers.py: Includes helper functions for serving the apology page, as well as requiring a successful login for any given user to utilize most functions within the site.
mus1cnotes.db: The SQLite database which stores different accounts once registered, their passwords, and which checkboxes they currently have checked (representing which days of the week they have practiced their instrument thus far).
requirements.txt: I utilized a python virtual environment to make it easy to see which python libraries need to be installed in order for any given system to be able to serve this website via flask. This file was generated by the pip freeze command to generate a list of the requiremed libraries/packagages necessary.
templates: Within this folder are the various html files to be served at various times.
apology.html: This page displays a meme of a crying man playing the bugle, informing the user that either their username or password are incorrect, and asking them to try again.
-
index.html: This page displays the homepage of the website, the practice log itself. Upon login music students would be immediately directed here, where they can check boxes which representing practice for any given day of the week, or conversely they can hit 'Reset', effectively clearing all of the check boxes. The current state of the check boxes are also saved to a database on each check on uncheck, so that when the students log out and log back in their practice log is saved in the database, whether they however many days they want or they click reset and clear it all for the coming week. -
layout.html: This page contains the general layout served by flask for all the rest of the html pages. This allow the html code to be as clean and organized as possible on each page, without any unecessary repitition of formatting which is common to each of the pages, such as the navbar and footer. -
listen.html: This page contains several listening recomendations for music students, utilizing bootstrap "Figures", to look clean and organized. This contains nice looking images of the album art of the recomendations, as well as a brief caption with each artist and album name. -
login.html: This page is the simple login screen, requesting a username and password from the user. -
metronome.html: This page directs the user away from My Music Notes, to a popular browser based metronome called at www.metronomeonline.com. I thought it would be nice that although it directs the user away from my page, it automatically launches the new page in a new tab so that it's easy to have both pages up in a browser at the same time. -
register.html: This page is a simple registration screen, allowing anyone make an account on the site with their choice of username and password, which get saved into my SQLite database, ensuring their experience on the site is unique to them. -
reset.html: This is basically a clone of the index.html page, but with all of the checkboxes unchecked. A user is taken here if they hit the 'Reset' button, and as per the code in app.py the database is immediately updated to reflect the change in status of all of the checkboxes associated with their account to 0 or unchecked. As soon as a user checks a box or chooses to go to the 'Practice Log' via another route, they are immediately take to index.html which those checkbox values updated as per the database.
static: Within this folder are the .css files necessary for the bootstrap and css I used to make the site look like it does, as well as a favicon.ico file so that browsers populate a tiny picture of a trumpet on the tab and bookmarks for the site.
env: This folder contains all of the packages needed by python to run the site, locally installed in a virtual environment.