InSync

InSync


2022 - 23

InSync is a web-based application where users can match with each other based on their music compatibility. We drew UI inspiration from Spotify, and utilized Spotify's API to calculate compatibility scores based on your recent listening history. We used React to develop our front-end, and Firebase to store our user data. Inspired by the multitudes of Spotify and dating apps out there, and our personal love for music and connection.

Role


FRONT-END DEVELOPER

UI/UX DESIGNER

Tools


FIGMA

TRELLO

VS CODE

GITHUB

Languages


JAVASCRIPT

REACT

HTML/CSS

Overview


InSync was created out of necessity — namely, my friends and I's senior project. However, the birth of its concept came from a place of love and connection, and what brought us close in the first place: music. Much of our initial friendship was centered around both alike and dissimilar music tastes — sharing music through Spotify links, roasting music through Spotify blends. It was from this shared experience that the idea for InSync came to be. What if we could facilitate that connection? Thus, InSync. The various viral Spotify apps that already exist helped, too. Starting from a research proposal and going through several presentations with our faculty advisor, multiple blockers with the development of the product, and about three different iterations of our matching algorithm, InSync eventually came to be. Created with love, late nights, and lots of stupid jokes by Nancy Chen, Christopher In, Nicole Liang, and Arthur Liu.

temp
temp

Development


The development process for InSync was fairly straightforward, give or take a few curveballs. We started with a research proposal, which consisted of citations from peer-reviewed articles backing the existence of connection through music. We each took time to learn to use the Spotify API/SDK to integrate Spotify's music and listening data into our app. Initially meant to be a mobile app, we discovered Spotify has different APIs for Android and Apple, so we pivoted to a web-based app. We used Figma to plan our UI/UX designs and user flows, and React to develop the frontend. We used Firebase and JavaScript for data storage, manipulation, and logic. Finally, we used Trello and GitHub for project management and code control, respectively.