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
Is this all in the Dashboard.js? "1. create a new variable const loggedUser = null" - In which file and where do we create this? "2. in the function getUser set the respone.data to loggedUser" - like this? setUser(response.data.loggedUser) "3. in the function getGenderedUsers use the loggedUser variable instead of user" like this? { gender: loggedUser?.gender_interest } "4. remove dependencies from the useEffect" like this? useEffect(() => { getUser(); getGenderedUsers(); }, [ ]); Please help Alex! :)
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!
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
I would like to leave a Positive comment of saying I finished this course successfully and enjoyed solving errors I came across by tweaking the code a little bit other than that I enjoyed Working with You!!
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 ❤❤❤❤❤❤
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 👌🌹✨
Hi guy!!!!! How are you? Thanks you for this video. I hope you make more videos about this. You have now a new suscripter. I am studying software engineering here in peru.
If you're having issues with 'gender_interest' around the 3:50:00 mark, it might be because the code's set to place "women"/"men" in the db instead of "woman"/"man" like Ania wrote it.
Great video and well explained as you go along, if I could pick up on one thing it would be that you could have broken it down into parts rather than 1 4hr+ video but as I said it's a great video none the less!
Amazing video. Helped so much! Had an app idea that was similar, but used more and varied models, and was able to figure it out based on how well you explained your process and the difference between the users and their ids even with them all having that same id tag! Amazing! I was curious if you had any knowledge on how one would go about deploying an app they made. I am able to make a frontend on aws or heroku, but doing the backend has proven to escape my grasp. Any info would be greatly appreciated!
I've done up to 4:01:27, but when i swipe right on someone, multiples of that same person get added to the matches array. After console.log the swiped and upadteMatches functions, I found that they were running multiples times for one swipe. I feel like this might be a problem with the react-tinder-card but not sure. Any ideas on how to fix this would be great
Once I met a girl in tinder, funny she was almost a PhD with almost 26 years I didnt even know it was possible, and she said to me, best thing about being a woman in tinder, is that any guy is a match just because I'm woman, while for us men is is soo hard to make a successful meeting.
See in onboarding you set up a formData state, could you also use this for the AuthModal? it seems like it would make sense but interested to know if not :)
This tutorial seems to be just what I'm looking for! Does this Tinder clone app include full CRUD? I can see in the "Video Chapters" that you're utilizing Create (Sign Users Up), Read (Logging in, Getting many users or users by gender, etc.) and Update (updating a User, updating matches, etc). But is there a Delete method being implemented in this clone app too? Would appreciate any feedback, thank you!!
I was really excited to see this tutorial, but I was disappointed that it doesn't really go into the matching aspect very well. When a user swipes, those aren't automatically matches, the swiped user needs to also swipe for it to become a match. People the user has swiped on also need to be filtered out.
Does this tutorial also include any many-to-many relationships or one-to-many relationships established for the backend? Seems like the only possible model classes are "users" and "messages", but I didn't see that any foreign or primary keys were assigned. Would appreciate the clarity!
Seems like this outdated now. You can get through the first 2 hours but then will get errors because of the use of react-tinder-card. It’s outdated for react. You can try installing dependencies again with the correct versions but it does solve the ‘unreadable div’ error.
great tutorial as usual. any reason not to use the MongoDB object ID to identify and update a user instead of the user_id ? for example: the user_id won't change if a new database were to be used and migrated to? or was there another reason?
Hi Ania,I would like to request a react video from you,bcz i know you would definitely do this for youtube developrs, my request is please do a react video how to use* All the form components like radio btn, select box,Checkbox,input ,calendar etc* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.
Class components are considered an old practice now and not officially supported by the react team. Some employers may like for you to know if they have some legacy code that needs worked on.
Hi Ania, I have to say I have pluralsight and udemy accounts, but your videos on youtube is by far the best in react. I do have a question though, I'm following along with the project and for some reason my auth model is aligned to the left of the screen instead of the middle below create account (55 min ~). I've copied the exact css, any idea what I'm doing wrong? .auth-model { position: absolute; top: 175px; margin-left: auto; margin-top: auto; max-width: 360px; height: 600px; background-color: rgb(255,255,255); border-radius: 10px; padding: 40px; }
Can't seriously understand how "matches" can be made? You swipe right and add that ID, but the other person also has to swipe right, right? How do we keep track of it and create an actual "match" from two sides?
I followed the tutorial, and insert in Dashboard.js exact the same code as Ania but I have problems running my project because of the tinder-card, the project opens but is blank, and in inspect I have this error: Uncaught TypeError: Cannot read properties of undefined (reading 'div') at ./node_modules/react-tinder-card/index.js (index.js:82:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:22:1) at fn (hot module replacement:61:1) at ./src/pages/Dashboard.js (index.js:9:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:22:1) at fn (hot module replacement:61:1) at ./src/App.js (bundle.js:16:74) at options.factory (react refresh:6:1) Can anyone help solve this problem?
Around 2:43:00, why does the URI value have 'Cluster0' after the hostname/? I thought that's where the database name goes and on line 21, the database name referenced is 'app-data'?
I am not able to implement it using webstorm due to version problem, dont know how to downgrade the version, and cant really understand the vs code part she is talking about.
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!
No waaaayyyyyy!!!! Did you hear my shout out to you? 😻 this is epic I am pinning this haha
@@aniakubow Haha yes! Thank you so much! This module has really exploded I just made it for fun had no idea people would actually use it lol 😂
I've detected two right swipes in this thread
@@Evan-dp2qp Check the matches in the DB
HI yes it looks nice, is there a way to use it in form of a plugin? Many people dont know how to code but would probably use it on their sites.
Ania is a saint, giving these long, easy to understand and detailed tutorials on youtube. I wish you nothing but success!
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
Is this all in the Dashboard.js?
"1. create a new variable const loggedUser = null" - In which file and where do we create this?
"2. in the function getUser set the respone.data to loggedUser" - like this? setUser(response.data.loggedUser)
"3. in the function getGenderedUsers use the loggedUser variable instead of user" like this? { gender: loggedUser?.gender_interest }
"4. remove dependencies from the useEffect" like this? useEffect(() => {
getUser();
getGenderedUsers();
}, [ ]);
Please help Alex! :)
WILL BE ETERNALLY GRATEFUL FOR THIS ABSOLUTELY BRILLIANT PROJECT! HELPED ME WITH SO MUCH OF MY BACKEND SKILLS! THANK YOU SO MUCH ANIA!❤️❤️
Lance Vance saala
One of the best teachers on youtube thanks Ania for your efforts and for providing us the best free content 💜
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!
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
I would like to leave a Positive comment of saying I finished this course successfully and enjoyed solving errors I came across by tweaking the code a little bit other than that I enjoyed Working with You!!
Thanks for the lovely comment!
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 ❤❤❤❤❤❤
Thank you, Ania! I enjoy writing code with you.
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.
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 👌🌹✨
Me: Not getting match
Ania: Create your own Tinder 😃
Thankyou for this🙌, I hope you make some backend specific projects.
finally I can find some one to date with my own app haha thanks to Ania 😄
I think I can configure it so I can match with myself🫠
I cannot describe how thankful I am to have come across this video! thank you! your video taught me a lot.
I hope the Tinder Swindler is going to be on blacklist by default :D
woow the coment before the video
This is the exact project I want to build, time to dive in, thank you Ania 🙏
Me: Comes into the live video.
Pretty Lady with cute accent: showMORDOR
Me: OMG, Sauron is a Developer
Sometimes I feel like there isn't enough time in the day to consume all this good information. Sigh.
This is going to be EPIC🔥
Im anxious for the video ❤️😍
Ania I very much appreciate what you're showing us, keep it up, it's amazing!
Great video. Would love to see a similar tutorial like this but for react-native
I love ur channel nd love u from india... 🇮🇳🇮🇳🥰
Great. I love that I will now be able to set a date to date my dating app.
Thanks Ania ,Love You So Much ;)
0.o i wish she was the kind of classmates in my Computer Engineering degree
What are the technologies she uses? I see mongodb, node and expressjs
Hi guy!!!!! How are you? Thanks you for this video. I hope you make more videos about this. You have now a new suscripter. I am studying software engineering here in peru.
Ania, I'm fairly certain I love you!
I love you and your teaching style
I bet this will be most interesting!
Loved the tutorial. It looks like if you swipe on them, you match but how do you match with them conditionally if you both swipe on each other?
If you're having issues with 'gender_interest' around the 3:50:00 mark, it might be because the code's set to place "women"/"men" in the db instead of "woman"/"man" like Ania wrote it.
Fantastic video!!! But why create a uuid when mongo also creates its own id automatically?
Thank you so much, I did all code and run perfectly. again thank you
Amazing video, I learned a lot Ania, thanks! :)
amazing tutorial Ania. god bless u :)
Pleasee :) Can you explain how to upload files (like pictures) to the mongoDB data base? :)
I think you already seen it somewhere else since, but just in case : take a look to the MIME_TYPES ;)
Great video and well explained as you go along, if I could pick up on one thing it would be that you could have broken it down into parts rather than 1 4hr+ video but as I said it's a great video none the less!
Completely using Nodejs or any font end framework or library is used?
thankyou for making this kind of video.. please make more clones videos like this...
Just curious - could this be posted on the app store and handle high traffic?
The way you code is epic
Amazing video. Helped so much! Had an app idea that was similar, but used more and varied models, and was able to figure it out based on how well you explained your process and the difference between the users and their ids even with them all having that same id tag! Amazing! I was curious if you had any knowledge on how one would go about deploying an app they made. I am able to make a frontend on aws or heroku, but doing the backend has proven to escape my grasp. Any info would be greatly appreciated!
Have you gotten any information on this? I've been trying to figure this out
Thank you for the useful tutorial. Awesome Tinder clone.
I've done up to 4:01:27, but when i swipe right on someone, multiples of that same person get added to the matches array. After console.log the swiped and upadteMatches functions, I found that they were running multiples times for one swipe. I feel like this might be a problem with the react-tinder-card but not sure. Any ideas on how to fix this would be great
did you fixed it. I also have the same issue
@@kavindividushani7057 Did you manage to fix it?
delete the useffect u have and use this : useEffect(() => {
getUser();
}, []);
useEffect(() => {
if (user) {
getinterestingUsers();
}
}, [user]);
Having same issue. Did you fix it?
same problem
How many years have you been coding and teaching?
you are great at what you do ,,,you have really helped me
Once I met a girl in tinder, funny she was almost a PhD with almost 26 years I didnt even know it was possible, and she said to me, best thing about being a woman in tinder, is that any guy is a match just because I'm woman, while for us men is is soo hard to make a successful meeting.
Great tutorial, thanks Ania!
Your work is really auzumn
I´m amazed of what you do and share. My respect and admiration. Dzieki
See in onboarding you set up a formData state, could you also use this for the AuthModal? it seems like it would make sense but interested to know if not :)
This tutorial seems to be just what I'm looking for! Does this Tinder clone app include full CRUD? I can see in the "Video Chapters" that you're utilizing Create (Sign Users Up), Read (Logging in, Getting many users or users by gender, etc.) and Update (updating a User, updating matches, etc). But is there a Delete method being implemented in this clone app too? Would appreciate any feedback, thank you!!
Very Nice Tutorial. I will try to learn this. Stay Blessed
will we be getting the final code at some point?
Thank you Ania !! ✨✨👑🏆
I hate tinder but i love your work!
anyone know how to publish this code into an actual website?
I was really excited to see this tutorial, but I was disappointed that it doesn't really go into the matching aspect very well. When a user swipes, those aren't automatically matches, the swiped user needs to also swipe for it to become a match. People the user has swiped on also need to be filtered out.
thats pretty much how a match occurs in a dating app
it was too much helpful and i also created tinder clone with help of this video
Does this tutorial also include any many-to-many relationships or one-to-many relationships established for the backend? Seems like the only possible model classes are "users" and "messages", but I didn't see that any foreign or primary keys were assigned. Would appreciate the clarity!
Question.
I love this tutorial and want to follow it but.... Can I then Upload this app onto the Apple store? Because that's the goal?
Respected mam...Kindly post video about "Claude 3.5 sonnet model & API finetune" - full course please
from where can we have the logo pictures?
Same
Me and my classmate at the back: *noisy*
Our teacher: 2:54:33
Wow ♥, love your content
Ania do you have some paid course on udemy?
Seems like this outdated now. You can get through the first 2 hours but then will get errors because of the use of react-tinder-card. It’s outdated for react. You can try installing dependencies again with the correct versions but it does solve the ‘unreadable div’ error.
At 13:26 you pasted the time stamp from somewhere, please tell me how did you do it?
Could you please make a good tutorial with .NET (C#) and MongoDB Realm ? Thanks
Thats encredible! Thanks!
great tutorial as usual. any reason not to use the MongoDB object ID to identify and update a user instead of the user_id ? for example: the user_id won't change if a new database were to be used and migrated to? or was there another reason?
Hi Ania,I would like to request a react video from you,bcz i know you would definitely do this for youtube developrs,
my request is please do a react video how to use* All the form components like radio btn, select box,Checkbox,input ,calendar etc* and practically what we use in industry to build apps **without any third part library please only use pure react with hooks***,bcz it will give the clear idea before moving in to formik or any other libruary,i would appreciate if u can use Mongodb for this.
hi, do you ever use react class components? whats your choice between those and fucntional components
Class components are considered an old practice now and not officially supported by the react team.
Some employers may like for you to know if they have some legacy code that needs worked on.
hello, thanks anna, but any where we could get the assets used in this video??
Hi Ania,
I have to say I have pluralsight and udemy accounts, but your videos on youtube is by far the best in react.
I do have a question though, I'm following along with the project and for some reason my auth model is aligned to the left of the screen instead of the middle below create account (55 min ~).
I've copied the exact css, any idea what I'm doing wrong?
.auth-model {
position: absolute;
top: 175px;
margin-left: auto;
margin-top: auto;
max-width: 360px;
height: 600px;
background-color: rgb(255,255,255);
border-radius: 10px;
padding: 40px;
}
Add left:0 and right:0 and it should work (credit to : Alexandre Pereira Nunes - 5 months ago)
why do you add another font-family for back-up? what is that for? 31:40
what is minimal prompt for ?
what is showModal for?
If the first font is not available for whatever reason, the backup font will automatically be used.
Can't seriously understand how "matches" can be made? You swipe right and add that ID, but the other person also has to swipe right, right? How do we keep track of it and create an actual "match" from two sides?
Cannot read properties of undefined (reading 'div') getting this eror while using react-tinder-card
// must be created outside of the TinderCard forwardRef
const AnimatedDiv = animated.div
Me too
Yup me too
Beauty + Tech savvy!
Thanks
U are my power 💖💪. But how can I add payment getaway
hejka a czy moge ciebie spotkac na tym klonie anka? ;p
Do i need to know about React before starting the video or no need?
Great Tutorial!
what software do you use
Can this be migrated to the apple store?
I followed the tutorial, and insert in Dashboard.js exact the same code as Ania but I have problems running my project because of the tinder-card, the project opens but is blank, and in inspect I have this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'div')
at ./node_modules/react-tinder-card/index.js (index.js:82:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:22:1)
at fn (hot module replacement:61:1)
at ./src/pages/Dashboard.js (index.js:9:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:22:1)
at fn (hot module replacement:61:1)
at ./src/App.js (bundle.js:16:74)
at options.factory (react refresh:6:1)
Can anyone help solve this problem?
I built the app and run it, but i couldn't find you there to match :( JK great tutorial as always and thank you very much!
Hey I'm facing a problem with the code, is there anyway I can see your code on Github?
why don't you use mongose instead of mongoclient, and localstorage
Awesome Job again but where is the source code? 😮
Why have you set initial value as array with 'user' in useCookies hook?
esperando... esperando... esperando...
when will the final code be uploaded ??
Will this app work on android / iOS devices?
Around 2:43:00, why does the URI value have 'Cluster0' after the hostname/? I thought that's where the database name goes and on line 21, the database name referenced is 'app-data'?
I know this is a late response but cluster and database are not the same thing. You can create multiple database inside a cluster
I am not able to implement it using webstorm due to version problem, dont know how to downgrade the version, and cant really understand the vs code part she is talking about.