pulsebeat

Inspiration

Spotify's personal playlists inspired us to try to create real-time playlist based on user activity

What it does

pulsebeat aims to connect users Spotify accounts and fitness wearable data through Spotify and Terra API. It's goal is to use user activity data, which includes, movement, power, position, and heartbeat along with Spotify music data to create playlists in real time to best fit the mood of the user.

How we built it

Using ReactJS+Vite a front-end for the web application was made.
For the UI/UX preliminary design components where created in Figma then imported as images and further styled with CSS or html. Also on the front-end was the integration of the Spotify API which was made of multiple react components
- SpotifyLogin which authenticated the users Spotify account and created a token
- SpotifyProfile which after receiving token would display users profile image
- SpotifySearch which allows users to search artist and Spotify API will send back data on that artist, including pictures
After users login we created a dashboard page which displays activity graphs and a an embedded Spotify web player to play the music.
Outside the React project we created an api folder for Terra API which ran the backend through an express server
The server would request for Terra api commands when triggered on the frontend including getUsers() and getActicity

Challenges we ran into

How to pass component variables to each other to
How to create a server and redirect urls
Linking front-end with back-end data

Accomplishments that we're proud of

Everyone on the team had very little to zero experience with both ReactJS and APIs, despite this we were able to format and have a functional website

What we learned

What React components are and how they work
useState() and useEffect()
Why terra API needs a server in the backend
How to create child components
How to align things in CSS
How to use className for uniform styling
How to link CSS files and JS files together
How front-end development works

What's next for pulsebeat

Due to the limited amount of time we did not get the chance to fully integrate front-end with back-end as much as we wanted to, however we will continue to keep working to have full real-time playlist based on user activity data