This article will walk you through a programming project idea - a mobile music player based on React Native, with a FastAPI / SQLModel backend.
As a reference, I will use one of my own project, a music player that I built using the guidelines that will be detailed below: MonoBox.
Also, check out my other article, where I share the process of building such an application from scratch, my thoughts, struggles and how I solved the issues that arose along the way: Introducing MonoBox
Make sure to check out the MonoBox's GitHub repo above, and don't forget to drop a star đ
Overview
The purpose of this task is to create a self-hosted music player similar to Spotify - users will be able to run their own servers with their own songs. You will implement the server itself in Python, and then a mobile application using React Native.
Before we continue, big shoutout to Om Arya, for a beautiful design.
What do I need to learn?
There are a lot of long videos here, itâs really okay to just watch some of them, get the general idea, and dive deeper when you need it. Donât get stuck in this phase!
Server Side
Basics
Main Course
Deep Dives
Perfect Python (or, how to write good Python code)
Client Side
Letâs get started!
If youâre not sure about library / tech in one of the milestones - come back to this section any time đ
Milestone 1: Create an empty React Native app with TypeScript
Create an empty React Native application with TypeScript + ESLint + Prettier.
See this tutorial to get started: ESLint + Prettier + Typescript and React in 2022
NOTE: We are going to have both backend and app in the same repo. So the react native app should be in a mobile/ directory for example.
Next steps:
- Make sure you can run the application and see it.
- Add a button that shows âHello worldâ when you click it (see Alert API)
Milestone 2: âLiked Songsâ View
Design the following screen in React Native:
Notes:
- Here is the Figma - Music Player UI KIT
- The screen shouldnât use any real backend in this milestone - use mock JSON data (see example below).
- Make sure to be as pixel-perfect as possible. Donât forget small details like Fonts.
- In this milestone, you should design the play / pause component but it shouldnât actually work.
Mock JSON data:
{
"songs": [
{
"name": "Believer",
"author": "Imagine Dragons",
"image": "https://upload.wikimedia.org/wikipedia/he/5/5c/Imagine-Dragons-Believer-art.jpg"
},
{
"name": "Shortwave",
"author": "Ryan Grigdry",
"image": "https://m.media-amazon.com/images/M/MV5BZWUxOWIzOTYtMjBhYy00MWFiLWEzYTgtMzRiOTExOTA1ZWQ4XkEyXkFqcGdeQXVyNjI2ODA4MDU@._V1_.jpg"
},
...
]
}
Milestone 3: Components Plan
Now that you have a good sense of how to build React Native screens, let's create a plan of all your React components (both full pages and small components).
Donât forget:
- Dark vs Light mode - how do you implement that?
- Sidebar (see last screenshot) - how do you implement that?
- How do you build the sliding images? Is there an existing component in the internet you can maybe use? Try Google & awesome-react-native
- The âcurrent songâ component can appear in all screens, how do you do that?
You can easily plan & draw your design with excalidraw
Milestone 4: All screens, mock data
After deciding on the components plan, build all screens from Figma in React Native. All screens should use mock data.
In this milestone, add a URL to an audio file in the JSON above, and make sure the âPlayâ button works. Also make sure to run the app in your phone to verify itâs smooth and looks good.
Milestone 5: Create empty backend project
In the same GitHub repository, create the backend inside the backend/ directory, using the following tools:
- FastAPI
- SQLModel (includes Pydantic & SQLAlchemy)
- Use SQLite as the database
- Integrate pre-commit, black, mypy, isort to make sure your code looks good.
Create a single resource called Song (with name, author, image, url) and make sure you can access http://localhost:1234/docs and create / read / update / list / delete songs.
Milestone 6: Design the API Server
The API Server should be a RESTful API (e.g GET /songs to get all songs).
Design all the API endpoints your app needs, for each one make sure you have:
- HTTP Method (e.g GET)
- URL (/songs)
- Request body example
- Response body example
Milestone 7: Implement API Server & Integrate it with the mobile app
Implement all the API endpoints and use them in the React Native app.
The server should have a songs/ directory that contains all the songs of the user. See the eye3d library (+ example) on how to get the song name, artist, image etc from a audio file.
The server should also expose a /songs//download endpoint that will actually stream the audio file - this can be used in the React Native app to play this audio. See StreamingResponse in FastAPI docs.
Milestone 8: Make it usable
The entire application should be very easy to use. It should be very easy to spin up your own music server and it should be clear how to do this from the readme. For example:
pip install mymusicserver
mymusicserver run my-songs/
This should run the FastAPI server and then the app in the browser, using something like react-native-web.
Milestone 9: PUBLISH!
That's all, you guys! All that's left for you is to publish your project wherever you'd like!
Here's a little advice from me: give your project a catchy name and use it for publication.
I would love to know what you think and what you have to say, so don't hesitate to leave a comment (and of course star MonoBox on GitHub).
