Zotify

Inspiration

Often, to get to know one another, we ask each other what type of music we listen to. Specifically, the topic of music came up naturally when trying to think of similarities we all share during our brainstorming session.

Music has the special ability to strengthen and make new connections. In this web application, our mission is to create a social media platform dedicated to connecting and strengthening bonds with people through sharing music.

Slapping le iconic UCI phrase in, we came up with Zotify.

What it does

Zotify starts by showing the user a landing page, prompting them to sign in. The sign-in redirects the user to Spotify to ask for permission to use their Spotify account. If the user has already signed into Spotify, clicking on the “Get Started” button will direct them to the index page. Otherwise, it will redirect them to the Spotify website to prompt them to log in.

The home page will show a grid of cards showing other people and their most recently played song. The first card, however, will be the user’s most recently played song.

How we built it

Zotify has three pages – welcome, index, and user page – using both front- and back-end programming. For the front end, we used HTML and CSS to create an intuitive user-friendly interface. For the back end, we used JavaScript as well as Spotify API to fetch user data from Spotify.

Challenges we ran into

The biggest obstacle we encountered was that we could not fully integrate the Spotify API due to the time constraint, so we could not access users’ most recently played songs. The Spotify API also prevented us from accessing other people’s songs, meaning we could not get friends’ recently played songs to show up on the home page, so we could not access users’ most recently played songs. The Spotify API also prevented us from accessing other people’s songs, meaning we could not get friends’ recently played songs to show up on the home page.

Also, when implementing front-end designs, e.g. grid-based posts (like on Pinterest) and gradients on the posts, we did not know how to do it in the first place. But after a couple of hours of reading and testing, we finally got it to look as perfect as we expected.

Other than that, we encountered minor issues such as centering divs, centering elements within divs, putting a cohesive flow to the website, linking webpages to each other, and making javascript files run, but we eventually overcame them and finished our product with pride.

Accomplishments that we're proud of

We created a seamless user experience that involves various programming languages, i.e. HTML, CSS, and JavaScript while maintaining an efficient codebase, ensuring that Zotify runs smoothly and loads quickly for users.

We also take pride in our design of both the user interface and hand-drawn illustrations, providing the users with eye-pleasing experiences while using the website.

What we learned

We learned how to apply our current as well as new knowledge of HTML, CSS, and JavaScript to create a full-stack web application with smooth functionality. One notable functionality we have learned through this project is creating grid-based posts using HTML and CSS, which is a notable feature in our project.

What's next for this project

In the future, we would like to scale this app so that it is accessible to other users. Currently, this web application can only be used by private users, but if others use Zotify, it will be more engaging and a platform to connect with others.

We also aim to add more features to Zotify, notably more ways to encourage social interactions, such as liking and commenting on music choices, as well as creating user playlists. Moreover, we will gather user feedback to refine the user interface and make Zotify an even more engaging and user-friendly platform.

Further, we plan to incorporate the Spotify API into Zotify to load the user’s most recently played song and visualize it in a card in a grid. The profile page will show a summary of their most recent songs in the past month, six months, or all time.