Frendify

Login Page
Profile Page
Chat Page
Chat of users Listening to same song

Inspiration

In these, dire times it is hard to find friends, as it was easy before for us nerds. As most of us are working from home, we spend most of our time online either working, listening to music, or binge-watching. Personally, I really like listening to and sharing music mostly on Spotify. So I decided to make a platform where users can find friends merely by listening to the same music. Right Now, the scope is limited to Spotify but it is easily extensible by incorporating data from different social platforms.

What it does

Frendify creates a virtual room for people doing a similar activity on the internet. They will be automatically added to a chat room. Currently, I am using Spotify to match users listening to the same music or podcast. Users listening to some music at the same time are added together in a room where they can chat with each other. I am planning to add more user matching criteria by using different platforms.

How we built it

Frendify is built using

Spotify API: Spotify API is used to get the info about user and song users are listening to
I used Nodejs for the backend, it is used as an API and to authenticate the users
ReactJs for frontend
Socket.io to create the chat functionality
MongoDB as a database.

Challenges we ran into

The first challenge was to make the Spotify API authentication work, its OAuth protocol requires a separate server for extra security.
The second was to manage socket io rooms by adding and removing users based on song duration.
The third was the design of the application as I am a backend developer and I am not good at designing.

Accomplishments that we're proud of

I am proud of the fact that I made a decent-looking UI and added some cool animations. Also managing users in different rooms was also challenging but I made it work.

What we learned

I learned a lot of things while building frendify. I can now do UI and designing, I also learned ReactJS to build the frontend and how to use different functionalities like react hooks, etc. I also learned to use Spotify API and I can now integrate it into my future projects.

What's next for Frendify

Right now we are only using Spotify API but in a similar way other applications can be added too like

Youtube: To allow users to interact with each other watching same video at the same time
Pinterest: Match users based on the same pins
Streaming Services: For example user watching same show/movies can be allowed to chat together randomly
Add functionality to allow users to book events together
A dating platform for matching users by analyzing their interests.