Inspiration
It's hard to listen to Spotify together remotely. Sharing the song you're listening to, grabbing the timestamp, then repeating this all over again when the next song comes around is not convenient -- SyncItUp is here to solve this problem.
What it does
SyncItUp lets you connect with your friends by entering their Spotify usernames. If a user has chosen to share their music right now, their friends can listen in.
How I built it
SyncItUp is a solo project and was built with the MERN stack; data is stored with MongoDB, the frontend was built with React, middleware is provided by Express.js, and the server made with Node.js.
MongoDB is provided through MongoDB Atlas and deployed to Google Cloud Platform.
Challenges I ran into
Currently, the backend server is not fully linked up to the React frontend. Many parts are integrated, such as retrieving a list of friends, a user can sync up to a song, and the API functions to provide multiple endpoints. As I built this alone, I ran out of time to fully connect the two.
I am also a solo hacker in this hackathon -- originally I planned to work in a team of two, with me working on the backend and another hacker on the frontend, but this fell through. It was quite challenging to attempt all aspects of full-stack JavaScript development alone.
Because of this, I may also be quite tired. :D
Accomplishments that I'm proud of
This was my first time making a project with React and I think I developed a good understanding of this framework. It was good to properly link some of my API endpoints to the frontend seamlessly on the same port. I also learnt how to handle a variety of lower-level details such as user sessions.
I believe the backend code that provides the API and makes requests to Spotify
What I learned
This was my first time making a project with React (outside a tutorial) so was a challenging experience of understanding a new framework. I had not worked with the Spotify API before. I had not managed user sessions and database updates based on these without using packages such as passport until this weekend (this was necessary), increasing the complexity of the project.
What's next for SyncItUp
I first plan on fully connecting the React frontend and the backend server to ensure the website is fully responsive. I then plan to redesign the website -- currently it has a... functional... design.
Log in or sign up for Devpost to join the conversation.