PLTNM is a music game you can play with friends: you'll hear a song and have to guess which one of you has it in his playlist.
For that, the app allows you to choose and upload your best song playlist from the music service you use. Once everyone has uploaded theirs, it builds a selection of songs from you and your friends, especially those you have in common!
PLTNM.Demo.mp4
The project in its current state is accessible here.
⚠️ The Supabase back-end is on a free plan, meaning that it has chances to be paused and unavailable at the time you use it.
Started as a project at UC Berkeley's Cubstart: Introduction to Building Apps course, my goal was to build my first React project, and try some new tools like Supabase and Chakra UI.
The idea for the app came from a game that I played with friends. As I needed to do it by hand (collect the players' playlists, regroup the songs, find matches, select some random songs, build a playlist and answer sheet), I thought it would be a great idea to automate it and allow more people to play!
Front-end:
- React
- Javascript
- Chakra UI
Back-end:
- Supabase (Database & Auth)
- Python / Flask (future)
APIs:
- Spotify
- Other streaming services (future)
For the front-end:
- Spotify is the only available streaming service.
- Only last year's playlist is available.
- You get to see some album covers from your playlist.
- You can join / see a team that already exists if you enter a "share link".
- You cannot generate the game or play it.
For the back-end, nothing is built yet. The goal is to be able to fetch the playlists of the members of the team in the database, analyze them to highlight the songs that players have in common, and mix them with random selections from every member's playlist. The front-end will be able to use this "game playlist" to play song samples and display the answer (the names of the players that have it in their playlist).
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.