aesthetic-ify

Level up your setup!

Comment

Inspiration

I've always loved cool looking and minimal computer setups. Something about them always made me feel really good. I also love listening to music, and one of my favorite parts of setups are the wallpapers or screensavers they use. There aren't a lot of screensavers with support for the music you're listening to, and the ones that do exist don't have a lot of functionality.

What it does

aesthetic-ify connects with your Spotify account and shows you what song you are currently listening to, by who, and the album cover. It also gives you an audio visualizer of the music for some extra flair. The use of this project is simply for people who care about their looks and want something different for their setup.

How I built it

This website was built with ReactJS and the Spotify Developer API. Material UI was used for the components and layout grid. This website does require the user to have a Spotify account, however it does NOT require a premium subscription to the service.

Challenges I ran into

The biggest challenge I ran into was by far was getting the audio visualization graph working. It was extremely tricky trying to get the audio output of my laptop. Another challenge was laying out the components. I'm still new to React and laying the components in a way to be in the center was a lot more challenging than I would've thought. I was also running into issues with the Spotify Authorization, however this was fixed when I added the correct permissions.

Accomplishments that I'm proud of

I am extremely proud of the audio visualizer component as it required a lot of work and research to make one that would work with React and would take sound from my computer instead of just an audio file.

What I learned

I learned a lot about APIs, how they work and how to use them. I also learned a lot about how computers deal with audio files and media streams and how its possible to visualize it through just code.

What's next for aesthetic-ify

Hopefully I will be able to make aesthetic-ify more customizable and user oriented so it could fit into many more setups.

Built With

Share this project:

Updates