NQME - Shared Music Playlist

Links

• Live application: NQME or Link when domain name expires
• Backend API hosted on Heroku Dyno: NQME GraphQL API
• Python backend repository: Backend Source Code
• React frontend repository: Frontend Source Code

Description

• Responsive Web Application where multiple users can create a room, add music from Youtube and have it play on the room host's device.
• Users can add likes to queued up songs.
• The Playlist is sorted and updated in real time based on the songs with the most user likes.
• Users can create their own room or join an existing one by entering a 4 digit code.

Technologies used

• React
• Typescript
• GraphQL - providing data to users from the backend
• Socket IO - two way communication with clients
• Python 3
• Flask - to make python webserver
• Grpahene - Python Library for making GraphQL APIs
• Docker - backend is hosted in a container
• Heroku - hosts backend
• AWS S3 - hosts frontend
• AWS Cloudfront
• SSL certificates

Setup project locally

1. In the backend directory, run docker build --tag nqme-backend .
2. Now you should have a built docker image. Start it with docker run --publish 5000:5000 nqme-backend
3. You should have the backend running on localhost:5000
4. Go to the frontend directory and run npm install
5. Finally, run npm start

Pictures fromo application

Credits: Shout-out to my friends for the initial idea

Ivo, Atanas, Šarūnas, Bogdan, Octavian, and last but not least Alex!