Welcome to the first lesson of the course! In this lesson, you will learn how to set up the backend for a music player application and load music track data. The backend is the part of the app that manages and serves data, such as the list of available songs. It acts as the "brain" behind the scenes, making sure the right information is sent to the user when needed.
By the end of this lesson, you will know how to:
- Store music track data in a file
- Load that data into your application
- Set up a simple API endpoint to share this data with other parts of your app
This course is the first step in building your smart music player, but here we’re focused on the essentials — the backend infrastructure that makes everything else possible. You won’t see any smart recommendations just yet. Instead, you'll learn how to:
- Structure and serve music metadata
- Track what users listen to
- Build a clean and functional API layer
Think of this course as laying the foundation — the “plumbing” of your system. Once the backend is solid, future courses in this path will introduce smart enhancements, such as track embeddings, similarity search, and predictive preference models.
This foundation is important because every music player needs a way to organize and deliver track information. Let’s get started!
If you're following along on your own machine, you'll need to set up a few things to run this project locally. The examples in this course use the following Python libraries:
Flask: for building the web server and API routespandas: for loading and manipulating the music track dataos: part of the Python standard library for file path management
To set up your environment, run the following commands in your terminal:
These commands ensure you have the necessary tools without displaying extra output.
Note: In the CodeSignal environment, there's no need to install anything — all required libraries are already pre-installed and ready to go.
With your environment set up, you’re ready to dive into the backend structure!
Before we dive in, let’s quickly look at the main files and folders you will use in this lesson. This will help you understand where everything fits.
Here is a simple example of the project structure and basic setup:
app.py: This is the main file where yourFlaskapp is created.static/tracks.json: This file will store your music track data.src/database.py: This file will handle loading and managing the track data.
You do not need to set up these files from scratch on CodeSignal, but it is good to know where things are located for when you work on your own device.
Music track data is stored in a file called tracks.json using the JSON format. JSON (JavaScript Object Notation) is a simple way to store data that looks like a list of dictionaries. Each dictionary represents a track with details like title, artist, genre, and more.
Here is an example of what tracks.json looks like:
Why use JSON?
- It is easy to read and write for both humans and computers.
- It works well with many programming languages, including
Python. - It is a common choice for storing and sharing data in web applications.
To use the track data in your app, you need to load it from the JSON file. In this project, we use the Pandas library to read the data into a DataFrame, which is like a table in memory.
Here is the code from src/database.py that loads the data:
Explanation:
- The
load_tracks_datafunction reads thetracks.jsonfile and loads it into aPandas DataFrame. - It uses a cache (
_tracks_cache) so the file is only read once, which makes the app faster. - If the file is missing or there is an error, it returns an empty
DataFrame. - The
get_all_tracksfunction simply calls and returns the .
Now that you have the track data loaded, you need a way to share it with other parts of your app, such as the frontend. This is done by creating an API endpoint using Flask.
Here is the code from app.py that creates the endpoint:
Explanation:
- The
@app.route('/api/tracks', methods=['GET'])line creates a new API endpoint at/api/tracks. - When someone visits this endpoint, the
get_tracks_endpointfunction is called. - It loads all tracks using
get_all_tracks(). - If there are no tracks, it returns an error message.
- Otherwise, it converts the
DataFrameto a list of dictionaries and returns it as JSON. This conversion is done usingDataFrame.to_dict(orient='records'), which turns each row into a dictionary and returns a list of them. This format is ideal for JSON responses, as each track becomes a distinct object in the array. It's also easy to loop through on the frontend.
Example Output: When you visit , you will get a response like:
In addition to track data, it’s often useful for a frontend to know what genres are available. This allows the user interface to offer genre filters or suggestions. To support this, we’ve added a new function and API route:
In src/database.py, we have the get_all_genres() function:
- We use
dropna()to ignore missing genres. unique()finds all distinct genres.- We sort the result to make it easier to use in dropdowns or lists.
In app.py, we expose this with a new route:
When you visit http://localhost:5001/api/genres, the server returns a JSON array of all genres:
In this lesson, you learned how to:
- Store music track data in a JSON file
- Load that data into your app using
Pandas - Set up a
FlaskAPI endpoint to serve the track data as JSON
These are the basic building blocks for any music player backend. In the practice exercises that follow, you will get hands-on experience working with these files and functions. This will prepare you for more advanced features in future lessons, such as tracking user sessions and making music recommendations. Good luck, and have fun practicing!
