ConcertBuddie

Concert anxiety got you down? ConcertBuddie has your back! Our easy to use site takes your next live artist and returns a packing list, vlogs, and outfit inspo so you can enjoy your event stress free!

Comment

Inspiration

When brainstorming on the first night, we joked about making a rave related app seeing that many UCI students engage in this activity. This then branched off to thinking about an app that would help solo concert goers to find other people also attending the same concert and join them. This idea came from one of our friends who told us about how they sometimes go to concerts alone and meet people there. In addition, one of our team members added how they could never come up with any outfit ideas for their concerts. We then combined the two thoughts into making a website that would both give inspiration on what to expect of a concert, what to bring, what to wear, and also have the feature of finding concert groups to join.

We knew that we wanted to start with the inspiration page first. Though we were not able to develop the “find-concert-friends” feature within the hackathon time, it is definitely an idea that we planned on holding onto for future development.

What it does

ConcertBuddie takes in a user's input, which is an artist name, and uses the Spotify API, Youtube API, and Google Images API in order to return information that would be helpful to a user who's attending the artist's concert. ConcertBuddie will return a packing list of around 7 essential items, 3 blogs of other people who have been to that artist's concert before, and 5 outfit inspiration photos.

How we built it

We built all of our backend and API interaction in Python. Then used Flask, HTML, & CSS to make a user facing site.

Youtube API

The Youtube API was used to search up the user input along with 'concert blog' in the youtube search function and returned with 3 videos that would be randomized each time. To keep runtime low, accommodate for smaller artists, and only keep the most relevant videos we only took the first 20 of hits, and then randomly chose 3 from that list to present to the user.

Spotify API

The Spotify API was used to generate genres, correct names, and packing lists. The Spotify API is able to search up our user input, and we used it to return the first result, which is usually the most popular artist. This was something we used to accommodate for spelling mistakes. We also used the artist to pull their genre, which we matched with our pre-made list. This gave us the key for a necessary items dictionary, which returned the packing list that was associated to the given key.

Google Images API

The Google Images API was used to generate the outfit inspiration images that are shown on our site. We used two different searches for each artist that is inputted, a masculine and feminine outfit search. This way our site would be more helpful to a wider range of audiences. The Google Images API runs a search and returns the first page of image results, then picks 5 to show to the user.

FrontEnd

HTML and CSS were used to make our website. We were able to use Flask in order to connect our Python backend to the front facing code. In learning HTML we learned to use positioning, sizing, coloring aspects. And also insertion of photos and gifs using JavaScript. We also worked with making different pages and redirects using Flask. We used JavaScript to make a toggle switch that would manipulate Python generated code.

Challenges we ran into

  1. Converting from Python to JavaScript (toggle button)
    • Originally our toggle button was done in Python. There was a lot of mixing of front and back end code in order to get our content to switch on command with the toggle button.
  2. Spotify API
    • Spotify API has a bit of a different learning curve then the other API's that we used.
  3. API Keys running out
    • We tested a lot and had to remake API keys.
  4. Getting Started at first Hackathon
    • This was a first experience for us, so figuring out how to get started was also a challenge.

Accomplishments that we're proud of

  1. The toggle masculine/feminine switch which we implemented to make our site more inclusive and accessible.
  2. Loading Screen as you wait for information page to appear.
  3. Implementation of Spotify API allows for spelling

What we learned

  1. We learned a lot more about API's and Front End Coding. No one on our team had a lot of experience with HTML & CSS, so it was something that we had to learn to do for this project. This was also the first time some of us used API's on our own, and we were able to implement 3 different API's in our site.

  2. We also learned some JavaScript, Flask, Virtual Environment. No one on our team had any experience with these things, but we learned to use them in order to make a project that was combining different coding languages.

What's next for ConcertBuddie

Our next big goal for ConcertBuddie is to implement a FindAFriend feature where users can sign in, this allows them to put in their personal information. The site will ask for things like name, contact info (social media), and show location. This will allow ConcertBuddie to connect people who are going to the same shows so they can go as a group!

Some other ideas that we have for ConcertBuddie will include a navigation bar at the top for the sign in, redirect to home, about us tab and other redirects for the user.

Built With

Share this project:

Updates