Final Project for CS50x course Created by Jody Bailey YouTube video for final project
A Lofi playlist application written in Flask. It allows users to create their Lofi playlists and discover Lofi songs unique to them
- Registering
- Logging in
- Generating a unique Lofi playlist of songs you have not listened to
- Keeping track of songs you have listened to
- Creating, deleting, and editing your playlists
- Adding or deleting songs from playlists
It utilizes YouTube's IFrame API as well as YouTube's Data API.
The iframe API is used to get a YouTube player on the web page which will play songs along with its video. The video must be displayed as part of YouTube's Terms of Service. All interactions with the player (e.g. playing, pausing, loading playlists) are done through the iframe API.
The data API is used for collecting videos and information about those videos, which is then displayed on the web page and loaded to the YouTube player. The algorithm used here will query for all videos from 2 channels; Lofi Girl - Chill Beats and Chillhop Music and will generate a playlist of ~50 songs from these channels that you have not yet listened to. If you have listened to all songs from these channels, then the algorithm will simply search YouTube for other unique Lofi songs.
A song is marked as listened when you have listened to 10% or more of a song. For example, if you are listening to a song that is 2 minutes long, it will be marked a listened once you have listened to the song for at least 12 seconds.
Find a visual representation of how this works here
- Create a python virtual environment
python -m venv .venvand activate the environmentsource .venv/bin/activate(The version used for developing the project was Python 3.12.2) - Install dependencies
pip install -r requirements.txt - Create a
.envfile in the project's root directory. Use.env.templateas a template for the environment variables that you will need - Follow YouTube's Data API Overview Guide for getting an API key generated. Add the API key value to the
YOUTUBE_API_KEYenvironment variable in your.envfile. This key will be used when querying the YouTube Data API - Create a unique string of characters and add that value to the
SECRET_KEYenvironment variables in your.envfile. This key will be used to sign the session cookie whenever a user logs into the application. You can use this website to generate a unique string value, but the key can be anything. - Run
python manage.pywhich will set up the database - Run
chmod u+x run-prod.shorchmod u+x run-dev.sh, depending on which environment you'd like to run the application on - Run
./run-prod.shor./run-dev.sh, depending on which environment you'd like to run the application on - Navigate to 127.0.0.1:9000
To start the sqlite DB interactive terminal, run sqlite3 instance/db.sqlite
Styling for the login and register pages
Styling for the home page
File which contains all imports of other stylesheets, which will ultimately be the file that is referenced by the document
The main file with all styling of shared elements and main elements (e.g navigation bar, footer, main containers, variables)
Styling for the playlist page
All image files and a single SVG for the loading icon that displays when generating a unique Lofi songs playlist for a user
All constant variables that are re-used
All helper functions used for defining functionality for elements (playlists, playlist songs, modals, buttons, etc.). This can be thought of as the file where all of the functionality for the features of the playlist page can be found.
This is where the function that gives functionality to the elements on the page is called and is also what the script tag references when the document loads
This is where all the functions from every file are brought together to create initializer functions. These initializer functions will give functionality to the playlist elements once the script loads. All initializer functions are brought into a main initializer function, which will be called in the index.js file which the document will load
Where the YouTube player and the lofiPlaylist class live. This is for initializing the player element and defining what should occur once the player is ready, has been updated, or when an error occurs trying to play a song
Utility methods for interacting with elements (adding/removing classes, deleting elements, etc.). Also has a utility for creating icon elements.
HTML for the alert that displays on the home and register/login pages
HTML for the home page. It loads the lofi_info_card.html partial with specific content to render out the 2 sections of the home page
HTML for the main layout page that is shared between pages
A partial that is loaded in home.html for the 2 Lofi sections on the home page
HTML for the login page
HTML for the playlist page. Some div containers that are created here have no content but are later populated. For example, the playlist-songs-container is a div that houses the playlist songs. Because the playlists are the first thing that loads on the page, the playlist-songs-container is hidden by default, but once you click on a playlist, it will load the songs, thereby populating the playlist-songs-container and its divs with meaningful content. This is to minimize the number of elements that would need to be manually created and to instead utilize the already rendered elements on the page.
HTML for the register page
A template for the necessary environment variables that the project requires
Any git files/folders that should be ignored by git
Defines the create_app method which initializes the Flask application
All constant variables
Where all helper methods for querying YouTube for videos and video details. Also contains methods for randomizing videos and defining what a response should look like once the front-end queries one of our routes
Defines a method for setting up our DB
Defines the 4 models that we use to interact with our database's tables
The dependencies for the Flask project
Defines all of the routes we expose when running the application. This file is defined as the root file that Flask uses when running our application, as the create_app method is called here
A helper shell script for running the Flask application in development mode with debugging and live reloading
A helper shell script for running the Flask application in production mode