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
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
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
brave-date
/
brave-date
The ultimate Tinder clone built with React, MUI, Redux, and friends.
Brave Date
Table of Contents
- Introduction
- Supported Features
- Core Libraries
- Running locally with NPM
- Deployment
- Documentation
- License
- Contributors
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.
- OnBoarding Page.
- Tinder Cards.
- Keyboard shortcuts.
- Sending and receiving text messages in real time.
- Sending and receiving images in real time.
- Emojies support.
- The ability to render HTML tags, links, emails, etc.
- The ability to render markdown text.
Core Libraries
- Create React App
- React
- React Router 6
- Material…
Server Repo
brave-date
/
brave-date-server
Brave Date server powered by FastAPI, ODMantic, MongoDB, Deta, and friends.
Brave Date Server
A Fully Async-based backend for Brave Date.
Table of Contents
- Database
- Development Requirements
- Project Structure
- Installation with Make
- Access Swagger Documentation
- Access Redocs Documentation
- Deployments
- Core Dependencies
- License
Database
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…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.
The following is a high overview of the server architecture, and how the components are interconnected.
Additional Resources/Info
For Hobbyists.
Show Daily Progress on Twitter
Day 1
Mahmoud Harmouch
@wiseaidev
Finished the landing page of a @Tinder(don't sue me, bruh.) clone I am currently building using @MUI_hq.
👉 Demo: brave-date.netlify.app
#ReactJS #MUI #tinder
11:07 AM - 19 Nov 2022
Mahmoud Harmouch
@wiseaidev
Login form? Done✅.
👉Demo: brave-date.netlify.app
👉Repo: github.com/brave-date/bra…
Built using @reactjs and @MUI_hq
The onboarding page for tomorrow.
@Tinder, you better watch out.
#ReactJS #mui #javascript
19:06 PM - 19 Nov 2022
Day 2
Mahmoud Harmouch
@wiseaidev
OnBoarding page? Done✅.
👉Demo: brave-date.netlify.app
👉Repo: github.com/brave-date/bra…
Built using @reactjs and @MUI_hq
@olivtassinari, the Date picker com was pretty challenging to make it work.
Swiping cards page for tomorrow.
@Tinder, your title is on the line.
#ReactJS
20:03 PM - 20 Nov 2022
Day 3
Mahmoud Harmouch
@wiseaidev
Today, I worked on the Onboarding page by replacing the img tag with react-dropzone. I have learned about CSS display grid and some CSS magic. Now it is pretty damn close to the real one. Less gooo!
Onboarding Demo: brave-date.netlify.app/app/onboarding
Repo: github.com/brave-date/bra…
#ReactJS
16:19 PM - 21 Nov 2022
Day 4
Mahmoud Harmouch
@wiseaidev
Recs page? Semi-Done✅.
👉Demo: brave-date.netlify.app/app/recs
👉Repo: github.com/brave-date/bra…
Built using @reactjs and @MUI_hq
@olivtassinari, at this point, I feel like I went over every damn component in the MUI world.
@Tinder, you may go out of business.
#ReactJS #javascript
16:13 PM - 22 Nov 2022
Day 5
Mahmoud Harmouch
@wiseaidev
Recs page? Close-To-Finish✅.
👉Demo: brave-date.netlify.app/app/recs
👉Repo: github.com/brave-date/bra…
Built using @reactjs and @MUI_hq
@olivtassinari, I like that MUI is equipped with all the icons needed. Many thanks for the effort.MUI='<3'
@Tinder, you are in real danger.
#ReactJS
14:34 PM - 23 Nov 2022
Day 6
Mahmoud Harmouch
@wiseaidev
Today, I added redux to the website and configured the workflow between the pages. I know that redux is not mandatory, but it is ok to use it. Right @dan_abramov?
👉Demo: brave-date.netlify.app
👉Repo: github.com/brave-date/bra…
#ReactJS #redux #javascript #100daysofcoding
18:31 PM - 24 Nov 2022
Day 7
Mahmoud Harmouch
@wiseaidev
Finally, I found what I was looking for. It is called ODM in the NoSQL world, not ORM. My life has been saved.
github.com/art049/odmantic
#fastapi #MongoDB #python
20:03 PM - 26 Nov 2022
Day 8
Mahmoud Harmouch
@wiseaidev
Today, I managed to create 4 endpoints for the project I am currently working on using @FastAPI, @MongoDB, and ODMantic created by lord @Art049.
👉 Repo: github.com/brave-date/bra…
Until next time.
#python #fastapi #mongodb
21:14 PM - 27 Nov 2022
Day 9
Mahmoud Harmouch
@wiseaidev
Today, I created two endpoints to insert/fetch users into/from the matches list.
👉Repo: github.com/brave-date/bra…
#python #fastapi
16:38 PM - 28 Nov 2022
Day 10
Mahmoud Harmouch
@wiseaidev
Even pydantic doesn't have any clue about what the hell I am doing.
#python #fastapi
07:38 AM - 30 Nov 2022
I would appreciate reading your opinions on this project.
Top comments (0)