Introduction

Namaste world 🙏,

I and my friend Rishu Patel present you all DINDER, a Tinder for developers which we built for Netlify x Hashnode Hackathon.

Now don't get it all wrong by reading just the title 😂 as it is not a dating application like tinder where you can find a match and date, other fellow developers(no technology in this world can help a developer to find a date😂). It is tinder for developers in the sense that you can swipe left and right another fellow developers and connect with them once you find a match.

To ensure that only developers use this application we are authenticating them through Github.

Here you can try our app:- tinder4devs.netlify.app

Here is the repository link:- github.com/tanay123456789/DINDER

Tools ⚒️

React JS:-To develop reusable UI components.
Firebase:- For storing data, images, and authentication.
Context API:- For state management.
ESlint:- We used ESLint for linting purposes.
Prettier:- We used prettier to keep the code consistent and formatted across the project.
Netlify:- To deploy our application.

Motivation✨

I always thought of why there were not enough applications that are dedicated only to the developer's community and the idea of developing DINDER struck my mind. But I procrastinated and delayed it several times until I came to know about Netlify x Hashnode Hackathon which ignited a fire🔥 in me to build it.

Features💻

You can swipe users to the left if you don't want to connect with them and if you want to connect with them then swipe right once two users swipe each other right they can chat with each other.
You can chat with the user once you find a match.
You can upload your projects which will be displayed on your profile.

Struggles😔

Both of us need to take the pain of actually using tinder to get an idea of how the swipe feature works and how the match is created. Additionally, we also encountered some unusual and unexpected bugs.
On my side personally, I became very much accustomed to developing mini projects and this was the first time I was building a full-stack project where I need to push my limits. Additionally, I was managing it alongside offline college. Also, it took me approximately one week to implement the swipeable feature in my application as we are using vanilla CSS in our application which is a very weak area of mine.
On the Rishu's side, he didn’t have a good grasp on how open source works or how people sitting in different parts of the world work together. Although he did a tutorial on git and GitHub in his own words, "imagined scenarios are different than real-world scenarios." Working with me remotely on this project helped him learn it much better.
We used the react-tinder-card component from npm as our swipeable card component but we later came to realize that it wasn't a very good fit for what we wanted to achieve and had in our minds. For example, we wanted anyone to see a user's profile when they click a user’s name on the card. This works perfectly fine on the desktop but on mobile devices onClick() event doesn’t work probably because there is a swipe event in the react-tinder-card component.

We wanted developers to judge other developers based on the projects they have built. But due to the onClick() issue with react-tinder-card we also had to remove the feature where you can see multiple project images of a developer by tapping on the card exactly like how you see multiple images of a person on tinder.

We are still using react-tinder-card but we plan on solving this either by finding a new pre-built component on npm or by developing a new component by ourselves.

Timelines⏳

04-06 Feb:- On the 4th of Feb I came to know about the hackathon upon which I immediately called Rishu and discussed the idea with him. On the 6th of Feb, I created the repository.
07-12 Feb:- We did brainstorming about how the application will be built and which tech stack we will use. We also surfed tinder during this time period to get an idea about how it works.
13 Feb:- I laid the foundation of it by creating the basic structure of the application and pushing my initial commits.
14 Feb-20 Feb:- I worked on swipe feature and homepage while Rishu worked on profile page, authentication and database.

21 Feb-28 Feb:- We fixed various bugs in our application, worked on its chat feature, and fixed the design on the sign-in page and some other pages as well.

Learnings📕

Both of us learned teamwork and collaboration.
Firebase v9 and react-router v6.

Future Roadmap🛣️

Authentication using Gitlab and Bitbucket also.
Dark mode
A better swipeable card component where users can see each other's projects and switch between multiple projects images by clicking on different sides of the card component.
Notify users when somebody connects with them.

#Netlify #NetlifyHackathon

Tanay's Blog