quizify

Landing Page
Sample Quiz Question

How we got here.

We're almost through the year, which means we're almost going to receive Spotify's yearly gift, our Spotify Wrapped! Although this year's playlist isn't available just yet, data is forever!

What does this app do?

On the front end, you connect with Spotify and select the correct song that corresponds with the random lyric. Quizifiy communicates with the Spotify API that returns a user's top fifty songs within the past six months. The data is then stripped down to song and artist, and is passed to a Python library that communicates with the MusixMatch API. From there, information is randomly iterated and presented prettily.

Production

Please use the test account to run the app, attached as a text file (to the organizers only), as we were unable to request an app quota extension.

Contributions

We got started with HACK @ UCI's Flask and JS, HTML and CSS workshop. Then, we split into front-end and backend groups. John Lorenzini and Lawrence coded on the front lines, implementing the smooth gradient landing page. On the backend, John Daniel and Anthony implemented the APIs.

This wasn't easy, let us tell you.

John Daniel and Anthony struggled communicating with the Spotify API, with data being transferred back and forward. John and Lawrence struggled with small elements of design, and was setback with a small error regarding synced versions. Our mentor gave us all the help he could :)

Accomplishments that we're proud of!

The ability to communicate with multiple APIs, program collaboration with GitHub and Replit, deployment with Heroku... and overall, getting work done!

What we learned...

We learned that we're able to accomplish a lot together in a short amount of time. Using our basic programming experience allowed us to adapt and learn different languages and to understand different libraries. Reading documentation is a must!

What's next?

Implementing a global scoreboard in a database like Firebase, better implementation of secret keys (don't steal our public and private keys, grr), and possible options for smaller and larger text sizes.

Built With

Submitted to

ZotHacks 2021
- Winner Hacker's Choice

Created by

I did team and data management, ensured deployment of our app to Heroku, and worked on the functions that called the Spotify API.

John Daniel
Software Engineering Student at UCI
I worked with Lawrence on front end design, contributing to the original concept works of site pages and color palette choices. Primarily, however, I coded all JavaScript aspects of the project, along with the basic frameworks for our HTML, CSS, and the logistics in handling the MusixMatch API. As the project neared it's deadline, I set cut-off times for featuresets and worked alongside Anthony and Lawrence to deliver the final product to John Daniel, which was then uploaded to heroku.

John Lorenzini
I worked with John Lorenzini on the front-end, designing the layout of the app and its theme. I also personally added the animations and created the design for the quiz page.

Lawrence Lu
I worked on reading API documentation and worked with John Daniel to implement the Spotify API to handle and format user data in a way that could be efficiently used by the MusixMatch API. I also learned HTML/CSS to create an "about" page with John Lorenzini which contains information about our project and workflow.

Anthony Cusimano
Learning one day at a time

Updates

John Daniel started this project — Nov 21, 2021 01:52 AM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.