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.
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.
.
├── 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
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.
// Detect dark theme
var iframe = document.getElementById('tweet-1593923803507212288-991');
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-657');
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-121');
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-819');
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-457');
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-86');
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-987');
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-485');
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-64');
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-102');
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-115');
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.