Cirkel

• 

  Main Screen

• 

  Selecting a User

Inspiration

We were challenged to use the provided Spotify API's in a creative way. For us, finding new music is always great. Based on this goal, we got an idea to visualise the music that people are listening to around you. We decided on using colour so that the user can easily compare, and find new tracks.

What it does

Cirkel connects your Spotify music with the music of the people around you.

When you start Cirkel you will see a visual representation of the song that you are listening to. This is your Cirkel. The colour is based on the different attributes of the song.

After this, Cirkel will try to find the five closest people around you. When Cirkel finds someone else, a smaller Cirkel will appear on your screen in the colour of the person that is close to you. You can use their colour to check if their music is similar to yours.

When you cross a person, the song that they're listening to will be added to a list. You can check this list to see this persons colour, and to listen to previews of the song. If you are interested in a song, you can add it to an automatically generated playlist. This way, you can discover new music.

How we built it

We developed the front-end using html, css and javascript, and the back-end using Django with the REST framework.

Challenges I ran into

Front end: We wanted the user experience and the user flow to be spot on. We have therefore spent quite some time on animating the interface and visually showing progress made by the user.

Back end: One of the biggest challenges was with authentication. We had trouble with authorising user and keeping it valid over time. The communication between front- and back-end was also really challenging, because we were hosting them on different servers.

Accomplishments that I'm proud of

We are very happy with the look. We think it looks and feels like a real application. The implementation of the front end was also done in complete vanilla JS, making it a particular accomplishment seeing the animations which were implemented. We're also proud of the way our API was built and structured, although it's a pity that we couldn't link everything in time.

What we learned

We learned how to use Spotify API, how to properly use CSS3 animations with JS, CSS3 Flexbox and GridLayout. We also learned about server deployment (with Django) and about creating a RESTful API.

What's next for Cirkel

Cirkel should become a large community so you can find more music very easy and it's more fun to use! Even though we could not finish in time, we will still take this all the way to the end after Junction and make it work fully.

Built With

• api
• css
• django
• html
• photoshop
• python
• spotify