I Built A Tinder Clone Using The FARM Stack
Tags: atlashackathon22, python, showdev, react
Published: 2022-12-02 16:54:12

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhimr893p8y8hzcngxdw.png
---

## Demo

{% embed https://youtu.be/lk9alL90bmo %}

## What I built
I built a tinder Clone mainly using React, MUI, and Redux for the client, and FastAPI, ODMantic, MongoDB Atlas for the server.

### Category Submission:
Think Outside the JS Box: FARM Stack.

### App Link
- [Netlify Demo](https://brave-date.netlify.app/)

- **Note**: Web-sockets are not guaranteed to work in the demo. If it works, that's great. Otherwise, you have to run/deploy both the client and server locally.

### Screenshots
<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/landing-page.png">
  <figcaption>Landing Page.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/register-form.png">
  <figcaption>Sign Up Form.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/onboarding-page.png">
  <figcaption>OnBoarding Page.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/main-page.png">
  <figcaption>Main Page.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/swipe-right.png">
  <figcaption>Swiping Right.</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm8za8jn9273v740dzmp.png">
  <figcaption>Swiping Left.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/matches.png">
  <figcaption>Matches List.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/send-messages.png">
  <figcaption>Sending Messages.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/personel-info.png">
  <figcaption>User Info.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/edit-info.png">
  <figcaption>Edit Info.</figcaption>
</figure>

<figure>
  <img src="https://brave-date.github.io/brave-date/static/images/reset-password.png">
  <figcaption>Reset Password.</figcaption>
</figure>

### Description
Brave Date is a fully featured Tinder clone developed using open source tools from scratch. It's designed to become the ultimate Tinder clone. It is user-friendly with a clean interface that is easy to navigate.

### Link to Source Code

### Client Repo

{% embed https://github.com/brave-date/brave-date %}

### Server Repo

{% embed https://github.com/brave-date/brave-date-server %}

### Permissive License
- [MIT License](https://github.com/brave-date/brave-date-server/blob/main/LICENSE)

## Background
I decided to push my knowledge of UI/UX design, databases, and programming in general by building a clone for a major brand. I gave it some thought, and I settled on building a Tinder clone.

### How I built it
As mentioned in the intro, I built it mainly using React, MUI, and Redux for the client, and FastAPI, ODMantic, MongoDB Atlas for the server. I learned a ton about, including but not limited to, React, MUI, Redux, FastAPI, and MongoDB Atlas and how to model data in the NoSQL world. For instance, the following is a set of collections that demonstrate how the data was modeled and stored in the database.

<figure>
  <img src="https://camo.githubusercontent.com/f5005d5d23478190343efd9cb418a3c682e91225b0e054b78cef982304aff010/68747470733a2f2f62726176652d646174652e6769746875622e696f2f62726176652d646174652f7374617469632f696d616765732f636f6c6c656374696f6e732e706e67">
  <figcaption>Database Collections.</figcaption>
</figure>

The following is a high overview of the server architecture, and how the components are interconnected.

<figure>
  <img src="https://github.com/brave-date/brave-date/raw/docs/docs/static/images/architecture.png">
  <figcaption>Server Architecture.</figcaption>
</figure>

### Additional Resources/Info
- [Official Docs](https://brave-date.github.io/brave-date/)

#### For Hobbyists.

{% details <code>Show Daily Progress on Twitter</code> %}

## Day 1

{% embed https://twitter.com/wiseaidev/status/1593923803507212288
 %}

{% embed https://twitter.com/wiseaidev/status/1594044568747507719
 %}

## Day 2

{% embed https://twitter.com/wiseaidev/status/1594421135336243200
 %}

## Day 3

{% embed https://twitter.com/wiseaidev/status/1594727200271597568
 %}

## Day 4

{% embed https://twitter.com/wiseaidev/status/1595087974022414336
 %}

## Day 5

{% embed https://twitter.com/wiseaidev/status/1595425557247836161
 %}

## Day 6

{% embed https://twitter.com/wiseaidev/status/1595847475885182983
 %}

## Day 7

{% embed https://twitter.com/wiseaidev/status/1596595609968209921
 %}

## Day 8

{% embed https://twitter.com/wiseaidev/status/1596975807817080832
 %}

## Day 9

{% embed https://twitter.com/wiseaidev/status/1597268759185883136
 %}

## Day 10

{% embed https://twitter.com/wiseaidev/status/1597857707209666561
 %}

{% enddetails %}

I would appreciate reading your opinions on this project.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgmhpp6rdhqvc9g3cq2o.gif">
  <figcaption></figcaption>
</figure>