Pass data between React UI and MongoDB Atlas | MERN Tutorial
Вставка
- Опубліковано 3 жов 2024
- #reactjs #expressjs #merntutorial
In this MERN Tutorial we will learn how to pass data between React UI and MongoDB Atlas. We will build a simple app that will allow you to:
post data from React User Interface (Form) to MongoDB Atlas through Node/Express js
get data from MongoDB Atlas to React User Interface through Node/Express js
In this video we will be using the following npm packages:
express
mongoose
cors
axios
bootstrap
react-router-dom
Prerequisites:
I assume you already know how to create separate React Apps, Express Apps, how to create cluster in MongoDB Atlas and how to connect MongoDB Atlas to express server using mongoose.
Here is the link to my previous tutorial on MongoDB Atlas:
• HOW TO: Connect Your A...
For more, please:
Follow me on instagram: / marina_webdev
Visit my website which is under continuous improvement: musedesigns.te...
Shop for my programmers merch designs: teespring.com/...
Thank you so much for watching! I also apologize for the video/sound quality. As soon as reach UA-cam targets, I will invest in upgrading my "equipment" =D
Equipment used:
MacBook Pro 2019 (amzn.to/31keIsC)
iPhone 6s Plus (amzn.to/2FJdy1k)
Phone holder with lamp (bit.ly/2Eju08g)
Keepword Blogger microphone (bit.ly/3aP3mQB)
Software used:
Viddyoze video making software (bit.ly/3l6wwPT)
iMovie
Keynote
Canva
See you in the next video! - Наука та технологія
Finally! After years of struggle with obscure documentation and blabbering youtubers, you came to the rescue and helped me build my first app where Javascript runs on the backend. Thanks a lot.
you saved my life really i searched the whole day about a simple mern stack project that i can understand...after searching for more than 12hours i got to see your vedio really .... i appreciate your work thank you sooo much 😭😭😭😭
I being a girl i don't envy you...even admire you just after watching this single vedio... You really helped me...i will start making my project in morning i hope i can stay connected if i got some doubts...thank you really🙂🙂
36 minutes of pure gold - thank you!
I learned and understood more things in a 36min tutorial than in a 2 hours one... Thanks a lot !!!!
Wow you’re so welcome 😃😃
You explained it so nicely in just 35mins. Thank You
Thank you too for feedback Arunava 🥰
Thanks heaps Marina Kim, I basically had the same task for my assignment and you helped so much where lectures could not. Thanks again, from Sydney Australia
This was exactly the resource I was looking for.
As clear as crystal and to the point. Just loved it
ooohh!! big fan sir!!
shubham sir praised you marina, what else do u want now!!
You are just awesome....I was stuck in this front-end and backend connection more then a week and you just solve it with 35 min...crazy🔥🔥
You made my day 🥰 thank you for the feedbaxk
Thank you so much for this video! Most of the tutorial videos here that use Mongodb atlas with ReactJS make it absurdly complicated. You did an amazing job making this process easy to understand.
Thanks so much Leopoldo 😊☺️
I want to say thank you for effort of making this tutorial.
I am really new to React and from what I learnt here is really great at making me grasp the idea of handling data between website and database.
Wish me luck doing my project! Thank you again, sensei.
I wish you luck) and thanks so much for the feedback 😃👍🏼
Really love the way you teach. Really liked the flow. On point. Thank you.
Ena Kumaru intha paakam
Thank you, I made my university project with your help! :)
Ooooh that’s awesome man
so many thanks for this wonderful tutorial simple nice and very helpful
Your teaching style is very simple and concise plz keep upload
The best tutorial, Marina. Thanks and little bit rush on the installing the libraries.
You are life saviour, Thank you so so much !!
I was searching for such simple tutorial
really got a worthy channel and videos..thanks a lot ma'am
The best Ytube channel about mern stack, I`ve ever seen
Aaaw thanks so much 😃🥰
I learned more than I wanted to from this short tutorial.. Great content✌
one of the best tutorial i have seen on Mongodb...
Wow.. thanks so much)
Thank you so, as I'm nearly at the deadline for finals submission. This video came it as like god helped me. ❤❤❤
I’m so happy to hear that, thank you))
finally found a video with a good content 🥵. thankyou soo much.👌❤️ now i can do my uni project
And thank you for your feedback :))
SHEEEEEEEEEEEEEEEEEESH 💦
WOOOOOOW So clear and simple! My 5th video and I was so lost until I came across this! Thank you!
Thanks Marina maam .....Your tutorial helped me to build my website . God bless you with huge achievements Again Thanks
Oh hiii thank you so much 🥰
great , super and short " KEEP IT UP"
I love you so much!
I've been searching for tutorials for the past week and yours have been the most concise and understandable so far.
I owe you my Finals ahaha
Oh wow thank you so much for the feedback ❤️
Crystal clear explanation, very helpful. Thanks a lot Marina!
Thanks a lot, you kept it as simple as possible!
Very exact explanation with clear steps.
Thanks very much Marina for this video. Looking for new updated one if possible. Awesome work. Thanks again.
Thanks Marina, this helped me a lot trying to figure out how to connect to the DB 🤩
Я знал, я чувствовал что Марина русскоговорящая девушка, акцент потрясающий) А когда увидел пароль к бд, все сомнения окончательно развеялись)) Спасибо!
Thank you so much, this was such a great tutorial and you explained each step so well!
Finally found a useful video.. Doing Great ..!!!
Thank you so much 😃🥰
Wow! Very concise. You have a great teaching style. Keep the videos coming. Subscribed :)
Oh wow, thank you Clyde 😃I will ☺️
Thank you so much Marina mam ! 😊😊😊😊
Good tutorials and easy to listen to, You have a great teaching voice ! looking forward for more ^^
Thanks so much, yes I’ll try to post one this week 😋
@@marinakim2929 Great and if you take suggestions, Do you plan to do a tutorial with react/MongoDB on AWS app ? I am trying to integrate thing with AWS and I am somewhere struggling ! maybe others are as well ^^
@@francgodgaud8619 hello) I haven’t planned but now I’ll add this to my list of tutorials to make if that may help you 😃
To make lorem. It could be done by typing lorem(number for how many word u want). Lets say "lorem10" than press tab (type without quote) and it will create 10 words. New learner here and it helps me a lot. Thankyou for this video, love it!
Marina, congrats for the tutorial! Very well explained!!
Thank you, easy to follow tutorial.
Thank you for feedback)
Marina you're a genius!! I can't thank you enough: so clean and linear
Smart, brutally competent and beautiful girl 🔝👏
I love how you code so magically especially these complicated scenario connecting frontend and backend. Here is my questions: You created frontend folder for create-react-app, but you didn't create backend folder instead you created backend files in the root directory. I was suggested by my instructor that I should create separate backend folder just like frontend. Could I request how you do this, and show how you deploy as well?
Very good video, to the point, concrete and direct.
Thanks a lot
Thanks a lot, It's really helpful for me. Please continue to make the videos
❤Loved it! Now I feel like full stack dev Great😊 Tutorial.
Haha thanks really 😁
What a great video. I am impressed by how easy going you are explaining step by step your coding, even when I have many years of experience in terms of software development, I learn something new every day. This tutorial will help me a lot with one of my current projects. Thumbs up for your contribution to IT people and future developers.
Omg I’m so sorry I missed your comment, thanks so much and hope to make new content next week 🥰
very helpful video..thankyou
Good content, very helpful for beginners.... Thanks to you...
Thank you too really)
I love the way you teach!
One thing I think would be really nice is if you were able (in future videos - I know this one is almost a year old now!) to write HTML in a way that uses more HTML5 standards, like formatting a and s for links inside your instead of using - I've read that people using screen readers or other technology like that struggle a lot with front-end design that mixes up the order of header tags or uses divs everywhere. Apparently there are HTML5 elements that are built to serve those specific purposes in the page structure (like "main" and "section" and "aside") and can be helpful for people using assistance technologies. When I first read that it really shook me up - until then, I was making entire websites that only had divs (with the occasional anchor tag when I absolutely had to)! It's amazing how many things there are to keep track of when you're trying to be the best dev you can be!
Anyway, thank you so much for sharing the things you know and creating these great tutorials! Also - that kitten is so cute!!
Hi there) wow thanks so much for the suggestion, I will do some digging 😉
Thank you so much! This was very helpful.
You have a great teaching style!
it is really nice session Miss.Marina. I would like to see more videos like these in your channel.
Keep rocking
Thank you so much) I’ll try to do more videos
Thank you so much for this tutorial! I learned a lot, thank you!
Thank you so much for the feedback ❤️🥰
Very helpfull ..Thanks alot
This video saved ma lot of time ,Thank you so much
Thank you too for watching))
This is so great I've learnt a lot here...Thankyou so muchhh deah...
💕💕
Also Keep coming with beautiful projects because the way you do it step by step helps a lot.
Hope to see your channel grow real soon!
Blessings! 🌷
Thank you so much for such nice feedback 🥰you gave me a lot of motivation to continue
Extremly Helpful! Thank you so much :)
Thanks for sharing and it was very useful for me.
Really helpful. Thank you very much !!
❤️
You just helped me, like.... alot. Thank you
you are a great person thanks
Thank you very much for guide us!!
Great tutorial, has all that I need without much complicating. T
Thank you for feedback really))
you re amazing this helped me a lot.
Thank you !
Hey Marina, just found your channel! Wanted to tell you that you rock. I am in the process of mastering the MERN stack and your content is super helpful! :) random Georgian
Wow thanks so much random Georgian))))
@@marinakim2929 Hey Hey, glad you responded. Just followed you on Github as well hehe
wow great tutorial
Holy shitballs. this is the best channel ever. best kept secret on youtube!
😅😅thanks
@@marinakim2929 Seriously. I don't usually add to the array of comments needlessly praising a video (because I think the comments section should be used for substantive questions and answers) but all the other MERN stack videos take hours, go needlessly into styling, and are far too complex for learning purposes. You help us learn by keeping things (relatively) simple. Thank you so much!!
Very nice video.keep going 👍 Love from India ❤
Thank you so much 😊
Can you make more MongoDB tutorials?!! Thanks for the tutorial!
Thanks for the suggestion!! Sure will do ☺️
Awesome tutorial. Do you happen to have a tutorial for adding user accounts (login, logout, admin-only accessible components)?
say hello to 920 sub
awesome content!
the keyboard was a bit annoying but it sounds great now (love it).
I guess when you solve some code problems everything is fine.
Oh heeey thank you so much) 920 wow had not realized that)) I’m hoping to publish more videos soon..
@@marinakim2929 small update:
the part "it's good to have some response there" (31:47), the problem is that we have neverending 'pending' status in the network tab so we need to send some response back, for example: newNote.save().then((response) => res.send('New note added')); (or just 200)
and async func to frontend if we want to see the response (i think that's a good pattern?)
Thanks Marina for the simple, beneficial, and all-in-one app! it's really a piece of mind. As I hope you provide us with the source code on Github or any
Thank you so much) I Will try to find it and share😌
thank you s much. you are the best. :D
Tks a lot from Brazil!
Welcome from Kazakhstan ☺️😄
Great Explanation 🙂
Thanks for this tutorial. In 25:46, should I make the password public? Isn't it harmful at all?
Nice tutorial and cute cat!!! ;)
Haha thank you Nicola :))))
THANK YOU SO MUCH
Your tutorial is very helpful. I request you to make a full node js CRUD course
Hiiii I will do this weekend))
You once again helped me to achieve what I want to do, amazing video! 1 question, will the table update itself without reloading the page if whatever field you are finding with Note.find is updated? Or do I need to do some extra step with AJAX to make that happen? Thanks for all the help.
Hi and thank you so much for leaving your feedback 🥰
Thank You...bro.
. hell yeah if ur not just beautiful already forwarded this tutorials up to end . since youre really beautiful ma'am just had this vid fast played on 2x which makes ur income for this vid devided by 2x
omg thank you so much
Note to self: 20:28
Setting up backend now. (Can we do it in nextjs?)
Love 🥰
Great tutorial!!
this worked well and good but just one issue coming my mongo DB is getting updated without values only
Hiii marina I had one doubt how can we storing in a particular database and particular location ????? We did not mention them any where but how it's taking that path ???? Pls reply
How to upload an excel file to the database ?
that's what i wanted....thank
Great content!
Plz can you tell me how simple react js form to express, nodejs ,mongodb , saving user data to mongodb
it was good... I have question. what should I do with proxy when deploy my website to GoDaddy
This was so helpful. Thank you!
Can we deploy this on firebase ...?
thanks for the tutorial i am getting cors error and express cors package is not working
same
She is PRO
this is useful
. hoping this is already it . the right answer for almost 3days working with androids network error
Do you know Angela Yu anyhow ? cause you guys look alike....
by the way loved your content❤❤
Thanks so much :) I was taking Angela’s course 😄