Swipo

• 

  Mobile Landing Page

• 

  Mobile Main Page

• 

  Desktop Main Page

Inspiration

Ever wanted Tinder for Spotify? Swipo is the perfect app for you! It lets you swipe right or left on songs that you like or don't like respectively so that you can have a playlist completely tailored to your likes!

What it does

Swipo is a web app that uses Spotify's API to get songs that you potentially can "match" with. The app will first ask you to log in with your Spotify account to add songs to a new playlist. It then will ask you to search for a general genre that you're feeling. It will find a playlist corresponding to that genre and go through that playlist for you to swipe left or right on. Even more importantly, the app let's you listen to the most exciting part of the song so you can decide more quickly whether you like it! All the songs you swipe right on will be added to a new, custom Swipo playlist custom to your search, leaving you with a playlist that has a ton of songs you've chosen yourself for the genre you want!

How we built it

Swipo is a front end heavy app built in React and uses several React libraries, namely the "spotify-web-api-js" library that helps us make calls to Spotify's API. To style the web app we used SASS. We did design work in Figma and created flow diagrams to think about code structure and design.

Challenges we ran into

We had some initial challenges with things like the Spotify API, understanding React's state concept, and decisions on how to design and structure our components. One big one for us was figuring out how to execute the "swipe" animation. The Spotify API was a big one, as there was a large number of API calls we had to make in perfect execution. Figuring out when to make those calls, with which inputs and what states to change, made for a complex execution. As nearly all new React coders, coding with React proved to be an extremely useful, but also frustrating tool. We utilized the Router to load certain components at certain times.

Accomplishments that we're proud of

We are certainly proud of the many, many bugs that we were able to overcome. What once began as a Create React App has now transformed into a fully fledged application. Swipo is a deployed website that works on desktop and mobile (with a few bugs on mobile that we will fix), and that all of our friends and family can use to discover new music! It is a front end heavy app that has one goal: streamline the music discovery experience and make it fun, and in one and a half days, we delivered on that vision.

What we learned

We learned about how to use React and its state, using Spotify's API, and working together as we have varied experiences with developing in React.

What's next for Swipo

Who knows? Swipo has a large variety of opportunities for expansion. The first step will be to add the ability to swipe right to different areas on the right side of the screen in order to save songs quickly to different playlists. Found a rap song? Swipe to a certain area to save it there. Next song's an electronic song? Save it to a different area. With Swipo, we believe there's always time to connect to the world through music. By developing out new ideas and adding more ways to swipe on songs, we can make that true.

Built With

• adobe
• api
• figma
• github
• html5
• javascript
• react
• scss
• spotify