Horoscopify
HMTL, CSS, React, Spotify API
Horoscopify is a website that takes a user’s Spotify listening data and zodiac sign to generate them unique playlist. I created this project as a fun way to brush up on my React skills as well as make something cool I could share with friends.
Role: designer, developer | Date: 2024
First step: design
I knew from the start of making this website that the user interface would be one of the most important parts. As well as being functional, I wanted this website to have a simple space theme to it, that didn’t distract the user from the main purposes of the site.
After a couple hours of scrolling through design inspiration, I decided on a blue, purple, and white color palette and a sans-serif font.
I then hopped into Figma to create a few quick prototypes of the product before I began coding. Since I was the only person working on this project, I kept the prototype very simple so I could get a general idea of what the product would look like, and finished the designing with CSS once the bulk of the coding was done.
Next step: implementation
React
React was the backbone of the project, allowing for the creation of reusable components and efficient state management. I divided the application into components like the main playlist generator, zodiac sign input form, and playlist display. By using React hooks like useState and useEffect, I handled state and side effects, ensuring smooth interactions and data updates. React Router helped in navigating between different views, improving user flow.
Spotify API
Integrating the Spotify API was crucial for accessing a wide range of music data to generate playlists. I implemented OAuth authentication to securely connect to the Spotify API, prioritizing user privacy and data security. By utilizing the API's search endpoint, I fetched relevant tracks based on the user's zodiac sign and music preferences. Additionally, I linked every track and playlist within the app to their respective spotify link for easy listening and viewing for the user.
DATA HANDLING
To process user input and Spotify data, I created logic to match zodiac traits with music genres and moods. This involved parsing the user's selected zodiac sign and linking it to predefined music characteristics. I then curated personalized playlists based on these preferences, updating the playlist display in real-time. Error handling mechanisms were put in place to manage invalid inputs and API responses, ensuring a smooth user experience.