🛑 Ultimate Tinder Clone | MongoDB | Authentication | Cookies | Chat

00:00 - Introduction
00:02:06 - Starting our Project
00:15:47 - Pages and Routing in React
00:26:47 - Homepage UI
00:46:37 - AuthModal UI
01:15:20 - OnBoarding UI
01:56:55 - Dashboard UI
02:11:41 - ChatContainer UI
02:30:22 - Setting up our NodeJS backend
02:34:24 - Express Routing
02:38:42- Signing Users Up / MongoClient insertOne()
03:02:29 - Cookies
03:07:55- Logging In / MongoClient findOne()
03:15:12- On-boarding / MongoClient updateOne()
03:19:53 - Updating a user / MongoClient updateOne()
03:32:33 - Getting One User / MongoClient findOne()
03:46:51 - Getting Users By Gender / MongoClient find()
03:54:49 - Updating Matches / MongoClient updateOne() + $push
03:46:51 - Get Many Users / MongoClient find()
04:15:04 - Display Chat History
04:40:03- Adding New Messages / MongoClient insertOne()
04:49:30 - Code Refactor, tidy and error fixing
04:50:06 - Final run through
04:55:37 - Making sure Users only show up when both Users swipe right
04:56:43 - Adding a .env file

__

⭐ New to code and none of this is making sense? Watch my '12hr+ YouTube Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.

You can also find me on:

#codingbootcamp​ #coding

[jakobunneback]

Fantastic tutorial! I'm the creator of the react-tinder-card npm module! Glad you liked it, fun to see it help people learn more react!

[blackwidowreal]

Ania is a saint, giving these long, easy to understand and detailed tutorials on youtube. I wish you nothing but success!

[Ugunark]

I'm like half way through this and loving it. I just watch a few minutes at a time as a I eat my breakfast each morning. Neat to slowly get a feel for what actually working with javascript and css looks like. You make it look pretty fun!

[mohamadcheaito]

One of the best teachers on youtube thanks Ania for your efforts and for providing us the best free content 💜

[pink-doublethink]

Thank you, Ania! I enjoy writing code with you.

[casafurix]

WILL BE ETERNALLY GRATEFUL FOR THIS ABSOLUTELY BRILLIANT PROJECT! HELPED ME WITH SO MUCH OF MY BACKEND SKILLS! THANK YOU SO MUCH ANIA!❤️❤️

[maskman]

This is the exact project I want to build, time to dive in, thank you Ania 🙏

[vasyaqwe]

Ania I very much appreciate what you're showing us, keep it up, it's amazing!

[MarceloSantosSCS]

Ania, you're amazing. Really. Fantastic knowledge and a very good teach skills. God bless you to provide this tutorial that will help a lot o people.

[abril_Ram]

I cannot describe how thankful I am to have come across this video! thank you! your video taught me a lot.

[Edxylom]

I really enjoyed this lesson.
Thank you so much for lending your time to do this, you really help those of us who are just starting out. I really liked the ease of implementation, great! I wish you the best of luck and hope this channel reaches a million! Thank you. Greetings from Venezuela

[priyalkhapekar]

Thankyou for this🙌, I hope you make some backend specific projects.

[deepak]

finally I can find some one to date with my own app haha thanks to Ania 😄

[SudhirKumar-qdth]

Really u are amazing I dont have words to explain hows good u are at teaching I wish u were my university faculty so I can learn so many things from u love from India ❤❤❤❤❤❤

[carlitosfingerstyle]

Amazing video, I learned a lot Ania, thanks! :)

[mcgale]

Great video. Would love to see a similar tutorial like this but for react-native

[dwiaprilyandani]

Pertama kali aku melihat channel mu, aku sangat tertarik dengan materi yang kamu berikan dan kamu mempunyai ekspresi yang tidak membosankan. tanpa basa-basi langsung aku subcribe channel mu. Thanks Ania 👌🌹✨

[nephilim]

I´m amazed of what you do and share. My respect and admiration. Dzieki

[andikafebrianto]

Thank you so much, I did all code and run perfectly. again thank you

[alexr]

For those who are having problems at 3:50 with the gender_interest
the issue can be fixed with the following steps
1. create a new variable const loggedUser = null
2. in the function getUser set the respone.data to loggedUser
3. in the function getGenderedUsers use the loggedUser variable instead of user
4. remove dependencies from the useEffect

congrats for the tutorial ania and thank you