PeterSwag | Devpost

Home page of PeterSwag
Authentication after clicking the "Spotify Login" button
Home page with updated album images after clicking "Show Album Images"

Inspiration

Our inspiration came from https://billclintonswag.com. We wanted to try using the Spotify API.

What it does

This program allows a user to login to their Spotify account, accesses their top four favorite albums, and generates an image with Peter the Anteater using the album covers.

How we built it

We created the front end using React and CSS and the back end using JavaScript. The goal of the front end was to create a visually appealing interface that was simple and easy to use, and presented the data gathered in the back end. The goal of the back end was to access the user's Spotify data such that the program could get the top four album cover images.

Challenges we ran into

Front end challenges included setting images onto the Peter image and keeping them in place. We also needed to make sure they stayed in the same spot when the window resized. This was our first time using React to create a web app.

A major back end challenge was figuring out authorization for the user token. Also, it was the developers' first time learning and implementing a program in JavaScript. Also, none of the team members were familiar with the Spotify API.

Accomplishments that we're proud of

We are very proud of how the front end looks even though we were completely unfamiliar with the React tools. In terms of back end, we are proud to have gotten as far as we did (having no JavaScript & Spotify API experience). Despite issues, we were still able to access a Spotify user's data.

What we learned

We learned about the basics of React, JavaScript, and using APIs. We also improved upon our WebDev skills and using CSS. We also learned _ the magic of teamwork _.

What's next for PeterSwag

For front end, we would like to create preset options so that users can view things like "U.S. Top 4 Albums" or "Peter's Favorites." In terms of what's next for back end, we need to improve functionality and fix minor bugs.

Built With

css
javascript
react
spotifyapi

Submitted to

ZotHacks 2020

Created by

I worked in the backend trying to access the data and authentication with the spotify api with Linda.

Kaitlyn Suzuki
I worked on the frontend with Grace using React/CSS and designed the website logo.

Mignon April Lee
I drew Peter the Anteater and created the backend in JavaScript with the Spotify API with Kaitlyn.

Linda Fan
I worked on the front end with April and created the user interface with working buttons and image generation. The biggest challenge was working with React for the first time.

Grace Manning