DEV Community

Cover image for I Built A Tinder Clone Using The FARM Stack
Mahmoud Harmouch
Mahmoud Harmouch

Posted on

I Built A Tinder Clone Using The FARM Stack

#atlashackathon22 #python #showdev #react

Demo

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

  • 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


Landing Page.


Sign Up Form.


OnBoarding Page.


Main Page.


Swiping Right.


Swiping Left.


Matches List.


Sending Messages.


User Info.


Edit Info.


Reset Password.

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

GitHub logo brave-date / brave-date

The ultimate Tinder clone built with React, MUI, Redux, and friends.

Brave Date

Typing Netlify Status Demo on Netlify Tag Docs

All Contributors

Brave Date.

Table of Contents

Introduction

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.

As well as being feature-rich, Brave Date is also fully responsive, meaning it will work seamlessly on a wide range of devices. So whether you're dating on your desktop or your mobile, you'll always have a great experience.

Supported Features

  • Landing Page.

Landing Page.

  • OnBoarding Page.

OnBoarding Page.

  • Tinder Cards.

Tinder Cards.

  • Keyboard shortcuts.

Keyboard shortcuts.

  • Sending and receiving text messages in real time.

Sending and receiving text messages.

  • Sending and receiving images in real time.

Sending and receiving images.

  • Emojies support.

Emojies support.

  • The ability to render HTML tags, links, emails, etc.

HTML tags being rendered.

  • The ability to render markdown text.

HTML tags being rendered.

Core Libraries

- Create React App

- React

- React Router 6

- Material…

View on GitHub

Server Repo

GitHub logo brave-date / brave-date-server

Brave Date server powered by FastAPI, ODMantic, MongoDB, Deta, and friends.

Brave Date Server

linting: pylint Code style: black Static typing: mypy pre-commit.ci status License: MIT Codeql

Architecture

A Fully Async-based backend for Brave Date.

Table of Contents

Database

Brave Date Database Collections

You can refer to the official documentation for detailed information about the database collections and how data was modeled.

Development Requirements

  • Make (GNU command)
  • Python (>= 3.9)
  • Poetry (1.2)

Project Structure

❯ tree app 
.
├── auth          # Package contains different config files for the `auth` app.
│   ├── crud.py       # Module contains different CRUD operations performed on the database.
│   ├── models.py     # Module contains different data models for ODM to interact with database.
│   ├── router.py     # Module contains different routes for this api.
│   └── schemas.py    # Module contains different schemas for this api for validation purposes.
├── matches       # Package contains different config files for the `matches` app.
│   ├── crud.py       # Module
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Permissive 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.


Database Collections.

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


Server Architecture.

Additional Resources/Info

For Hobbyists.

Show Daily Progress on Twitter

Day 1

// Detect dark theme var iframe = document.getElementById('tweet-1593923803507212288-293'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1593923803507212288&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1594044568747507719-287'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1594044568747507719&theme=dark" }

Day 2

// Detect dark theme var iframe = document.getElementById('tweet-1594421135336243200-154'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1594421135336243200&theme=dark" }

Day 3

// Detect dark theme var iframe = document.getElementById('tweet-1594727200271597568-988'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1594727200271597568&theme=dark" }

Day 4

// Detect dark theme var iframe = document.getElementById('tweet-1595087974022414336-451'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1595087974022414336&theme=dark" }

Day 5

// Detect dark theme var iframe = document.getElementById('tweet-1595425557247836161-548'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1595425557247836161&theme=dark" }

Day 6

// Detect dark theme var iframe = document.getElementById('tweet-1595847475885182983-287'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1595847475885182983&theme=dark" }

Day 7

// Detect dark theme var iframe = document.getElementById('tweet-1596595609968209921-317'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1596595609968209921&theme=dark" }

Day 8

// Detect dark theme var iframe = document.getElementById('tweet-1596975807817080832-232'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1596975807817080832&theme=dark" }

Day 9

// Detect dark theme var iframe = document.getElementById('tweet-1597268759185883136-523'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1597268759185883136&theme=dark" }

Day 10

// Detect dark theme var iframe = document.getElementById('tweet-1597857707209666561-712'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1597857707209666561&theme=dark" }


I would appreciate reading your opinions on this project.


Top comments (0)

Read next

gladiatorsbattle profile image

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Gladiators Battle -

jeffrey04 profile image

Building a desktop launcher

Choon-Siang Lai -

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

yeshwanthvarma profile image

My Deloitte Interview Experience: On-Campus Placement Drive 2024 (Product Engineering Analyst Role)

Yeshwanth Valishetti -