I understand @beau took time and worked hard to create this video, but you really don't want to be pasting large amounts of code during tutorials. It makes it very hard to follow along. Please type out all of your code live, so we can comfortably follow along.
I stopped watching this video after 45 mins. You pasting large blocks of code is too painful to follow. I don' mean to be rude, I know you work hard creating these videos. Hopefully in future videos, you can type out your code live so we can follow along.
Just want to let you know that I really appreciate all that you do. I started learning how to make websites end of last year from knowing absolutely nothing. 6 months later, I'm able to understand how to make a website using the MERN stack. I plan on creating my own website from scratch pretty soon and your videos have really helped me build a strong foundation in web dev. Thank you!!
@@saravanajothigandhirajan6570 Courses is the way I always use with a new fresh topic. HTML, CSS and Js are the basics. For that, here in UA-cam you have thousands of free courses.
Took about an extra 2 hours to debug the first 2 hours of video. Thanks to the comments, got some solutions quick. The ones i missed in comments were: - The baseURL should not contain "restaurants" after v1, as it's also designated in the react-router-dom paths . So you get endpoints like "v1/restaurants/restaurants..." - For some reason, I had to change from localhost:5000 to another number. [I tried killing nodes with "pkill -f node" and restarting, but only changing localhost number worked. To recap some stuff other commentators pointed out: - Update node and npm to latest versions. - Make sure you install some dependencies like react-router-dom on FE - In the render part of each component, just rewrite the code all together. The components need to be like . The video and git are missing the and use generic (...props) that does not work (for me).
For anyone who encountered the same problem I did with the review collection not being created: be sure to add the restaurant review DAO injectdb method call to mongo client connection in the index file. The same way he made a reference to the restaurantDAO at the beginning of the vid
Great course, a quick feedback though, I always think writing the code is better than pasting it in beginner tutorials, but if the tutor has to paste some code to save some time, please try to paste it in small blocks. Pasting 50 lines of code at once (25:00) is a bit overwhelming, despite the good explanation provided Thanks again for all your courses FCC
I abandoned this restaurant reviews tutorial after several failed attempts but returned this week and was able to get mine working. This time around I installed an earlier version of react-router-dom but I don't know if this was necessary. Thanks so much for this tutorial!
I would love to see a extra episode on how to fully test the backend and the frontend of this application. Personally i encountered alot of hurdles trying to test my express backend API.
I thought it's a 2hr video but it should be a 20 hour video for me. I have never used these functionalities in my projects but thanks to *BEAU* I can learn and use it in my project after a thorough and repetitive watching.
if you refresh the page while logged in, it will log you out.. fyi.. very basic project. but gives us alot to do on our own to make it a worthy portfolio project.. great tutorial
Fix an issue: for the Reviews not able to be inserted in the mongoDB and not able to add review, this need to be added in the index.js file: 1==> import restaurantsDAO from "./dao/restaurantsDAO.js"; 2==> await ReviewsDAO.injectDB(client) reviews database will be inserted and works fine
20:04 In modern MongoDB driver versions, such as v4.0 and later, the poolSize and useNewUrlParser options have been deprecated and should not be used as direct options in the connection string. use this instead of that : useNewUrlParser: true, useUnifiedTopology: true, wtimeout: 2500, PHEWWWW IT ALMOST TOOK ME AN HOUR TO FIND THE ISSUE T-T
For anyone late to the party, I had a hell of a time getting bootstrap to align the search sections properly at about 1:39:00. I found that it fills the space to fit the restaurant columns if you set the input-group divs to just "col-lg" and then add "col" to the "select" item for the dropdown. Only as I'm writing this do I realize that he also didn't align his dropdown tab, haha. Either way, it's something like: className="input-group col-lg" className="input-group col-lg" className="input-group col-lg" className="col" making the select bar a single column tells it to fill the available space, but it gets all wonky if you don't also remove the "4" from the sizing of the input groups. Still not entirely sure why. Feedback on if I'm mistaken would be appreciated.
Got, I guess, the same problem that the 3 searches aren't rendered as columns but as 3 rows. However this solution if I got it right didn't solve it for me if anyone got it right (bootstrap 5 installed in root directory)
Finished it -- Really an excellent course all together. Helped bridge the gap between Node/Express and Realm by showing necessary changes and configuration.
If you are having issue something about switch, follow the instructions: uninstalled the version 6 of react-router-dom: npm uninstall react-router-dom And installed version 5.2.0 of react-router-dom: npm install react-router-dom@5.2.0
This is great Beau, thank you. This video needs serious update though. It's impossible to follow along without debugging numerous issues due to deprecated functions in the packages used in the video... Would love to help with some Pull Requests to the repo but I see that there is no activity.
2:43:11 if anyone getting error (Message: The specified key does not exist.) 404 not found , after hosting , then go to hosting setting and set Single-Page Application entrypoint as index.html .
Best practices dictate that React components be written in PascalCase. For example, rather than `restaurants-list.js` it should be `RestaurantsList.js`
Hey Beau, sorry to bother you for this but what Google Chrome Extension are you using to make your HTML more readable at 40:00 ? And to answer your question I would keep it simple and call it RRealM or MRR. Stack (pronounced as mister stack) maybe? I hope this helps you, thank you for the amazing video and content on your channel.
@23:06 Had an issue when everything was done right, but nodemon index/server kept complaining that I still 'Must use import to load JS module'. That was caused by an older node version - switched to 14.0+ and it helped Great refresher course otherwise!
Fix issue: to be able to install (01:06:55) install the react-router-dom you need to fo to the main folder ==> restaurnts-reviews then ==> npm init -y which will create the package.json file and allow the router dom to be install inside it.
It wasn't this way previously but at: 22:00 when he changes the password, that is no longer needed. The link that Mongo generates for you will already have your user password included. DO NOT delete it or your app wont connect.
will suggest to make an alternate version which avoid doing the copy pasting of the code . it can be even more basic than this - will make this easier to follow for folks who are new to the MERN stack. otherwise, going through the video and trying out the example is going to take atleast 2 or 3 times the length of the video - thats what it took me. Got a good taste of the MERN stack though !! Thanks for putting this together
Very nice tutorial, thank you. However, I believe you made an incorrect choice at not including Mongoose as a library. Such libraries are created for a reason... your code for connecting to a database and querying it is considerably more complicated and less maintainable than code that uses the Mongoose library.
For the problem from the minute 40:00 , in which the information is displayed in the form of text / paragraph that I found was to download a browser extension for display in JSON format. In my case I use Operas and I downloaded the JSONVue extension from the Chrome Store (or something like that).
I was given this video to learn from at school while knowing NOTHING about mern stack and I can say… my assignment was turned in late and half finished because this is not the vid to be having your first experience with mern with.
This tutorial is good in terms of concept understanding really appreciate the efforts by the instructor, however, while following the tutorial there were a lot of version compatibility issues and structural issues related to react-router-dom, I hope you can address it in the future, besides as always great work!
I had a hard time with the issue too, however that's something you need to fix yourself, since we're programmers, fixing bugs is something we need to learn too instead of relying to the instructors
If you're struggling to get it to display @1:23:14 and getting an error that "Switch" isn't in the react-router-dom. Do yourself a favor and install "npm install react-router-dom@5" -- it will display just fine after that.
Thank you for such an amazing course! I have a question. How does MongoDB Realm scale for large-scale apps. For instance, what if your app has a million users. Would it be viable to use MongoDB realm to host such an app?
Invaluable expecially Realm which i believe was previously called stitch. I thought you could also query the db directly from the browser instead of writing a function in realm?
There is a lot of good information in this tutorial, but my gosh is it hard to learn from with all those giant tool tip boxes covering up half your screen.
23:14 I don't understand this. This shouldnt work since index.js, where the listenner is, isn't mentioned in server.js. How does it work for you? EDIT: I forgot, you must run 'nodemon server' not 'nodemon server.js'. EDIT 2: I was also stuck with this. Basically, the guy in the tutorial made an error. Nodemon says: "Note: if the script is omitted, nodemon will try to read "main" from package.json and without a nodemon.json, nodemon will monitor .js, .mjs, .coffee, .litcoffee, and .json by default." Basically, it just runs index.js by default because package.json says so. I don't know why the tutorial guy runs "nodemon server".
If people having trouble with the frontend on the current versions of react en react-router-dom. fix: npm uninstall react-rouer-dom npm install react-router-dom@5
For v6 of react router dom, change "Switch" to "Routes". I'm also getting "Invalid Hook Call" ~@1:20:00. Might have something to do with multiple Reacts detected, but can't figure out how to fix. Update: issue is in the Also need to change 'component' to 'element' per v6. Removing the array brackets stopped a different error I was getting, allowing the page to compile. I'm only using one path, as using multiple paths is breaking the app. But now getting another error.."Warning: Functions are not valid as a React child."...will update if I figured something out.
)} needs to be changed to element = { } and it can now render correctly. There are also the other two similar render things that will need to be changed. I'm not sure what {...props} was doing as I didn't hear an explanation in the tutorial, though I'm not completely finished yet. Will probably need to find a way to pass in whatever props that is referring to. Will update further when done.
Hi I was also getting the Invalid hooks problem. At first i tried to demote the installed packages to the ones Beau was using. Didnt help. The fixes you suggested were not fixing my problems either. I just decided to follow using the git version. My main focus is learning the Mern stack and how to integrate the Front and the Back. Fixing compatibility issues IMO is just being sidetracked. Would be nice though if an updated working version was published...........
Hi, my path now looks like this "" but I'm still getting the "invalid Hook Call" error which is incredibly frustrating. Did you change anything else to make it work?
@@jazirladha7686 I had the same problem. I fixed mine by making sure that the react-router-dom dependency is installed in my frontend folder. Hope this helps.
I'm relatively new to JS and was confused by the syntax used around 27:34 in getRestaurants' function signature. What's the purpose (or just the name) of the " = {}" following the options object?
its just a default parameter...to avoid getting error if no object passed as argument...for more info search for this it should be first result : JavaScript Destructuring Assignment with Default Values
From MDN: function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = { }) { } You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can call drawChart() without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters. The other can be useful when you want to ensure an object is passed to the function.
Not sure if I am the only one here with this issue but I ran into an error "TypeError: Cannot read properties of undefined (reading 'map')" Been knocking my head for 3-4 hours over this one.
@@cristionbrown okay, well I have found that... Just add const [loading, setLoading] = useState(false); const [error, setError] = useState(); if (loading) { return Data is loading...; } if (error || !Array.isArray(dining)) { return There was an error loading your data!; }
Why not just a "Django+GraphQL" one and a "React with graphQL" one? All this talk of combinations is exactly the wrong way to go about it, REST API's and GraphQL where designed specifically so the backend and frontend don't have to know any thing about eachother. I'd much prefer a way to use react with proper REST API's so we can ditch graphQL and get control back over the insane way that frontenders think they can request data.
Hey, at about 1:05:00, when I try to get a restaurant by ID, the reviews array seems to be empty for some reason? There's supposed to be two reviews in that array according to the data I can see in the collection on the mongodb website, but the API is still returning an empty array. Any solutions?
In case anybody is stuck at this, make sure that your restaurant ID is being correctly interpreted from the body of the request when you post a review. I was sending the value in restaurantID but was trying to receive from req.body.restaurant_id, which I immediately enter as ObjectId(restaurant_id) where it got an index, after which you can't distinguish whether it got the correct value or even null. You can check if you're having the same problem by just cross-checking whether the restaurant_id in the reviews collection is the same as what you passed.
@@shameekbaranwal Can you give more info or code example? I mean literally all we've done is copy and pasted and everything I have matches his code. But mine aren't even showing up in reviews collection now.
@@vinny142 MERN/MERNG courses were also already uploaded a year ago.. now a new version of MERN is uploaded.. so why not MEAN?.. I just wanted to see if anything new is happening with Angular (perhaps MEAN + ngrx or MEAN + Mongo Realm etc)
Nice, but at service frontend, review and restarant are different context, i added add two service, one to Review and other restaurant, equal in backend, congratulation at project
Thanks a lot for sharing this. The only MongoDB project that thoroughly cover all the key topics. The only issue is that you should have wrapped the code lines. It's really a headache to follow those long lines in the video.
Astonished by your tutorial, it really taught me so much. Please keep on making this video. Maybe try on some stack like javascript + ruby/python/java, it will help a lot of beginners!!
Why are you installing bootstrap and the other libraries related to the React application into the root directory of restaurant-review (backend and frontend directories) and not just in the frontend directory? This isn't recommended. Since npx create-react-app uses yarn by default, you'll want to cd into the frontend directory and run `yarn add bootstrap react-router-dom`
Thanks! This saved me some time. I tried to jump in at the 2 hour mark to skip to the serverless stuff and was getting errors for not having bootstrap installed. This yarn command worked like a charm
Ran into a problem with nodemon, I couldnt install it at first so i used sudo install -g nodemon. But anyway, on starting my server, I ran into further problems: [nodemon] restarting due to changes... [nodemon] starting `node server index.js` TypeError: Cannot read properties of undefined (reading 'startsWith') at connectionStringHasValidScheme (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb-connection-string-url/lib/index.js:9:30) at new ConnectionString (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb-connection-string-url/lib/index.js:85:34) at parseOptions (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/connection_string.js:209:17) at new MongoClient (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/mongo_client.js:62:63) at Function.connect (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/mongo_client.js:195:33) at file:///Users/timo/Documents/MERN%20Stack%20Practice/restaurant-reviews/backend/index.js:10:13 at ModuleJob.run (node:internal/modules/esm/module_job:198:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:385:24) at async loadESM (node:internal/process/esm_loader:88:5) [nodemon] app crashed - waiting for file changes before starting... Does anyone know why this error is thrown? what can i do to fix this? Stuck at the first 23mins of the video and can't proceed
Intro was nice! but I don't like long chunk of code pasting and go through all the way to end. That's boring and something hard to understand. write small code test it and continue.
I really wanted to like this, but the process of "let me paste a wall of code instead of typing it and explaining it" is a terrible way to teach. And once pasted, the constant scroll up/down/sideways makes it difficult to actually look at what the code is doing. Additionally, while node has ASI, for readability, put the damned semicolons in.
Knowing technology today by the time I finish this video and understand it, half of what he taught will be deprecated and a whole new framework, noSQL and language->syntax will be the common knowledge needed to know w/10 years of experience required to work in career position with.
I cannot get a list of restaurants from database :( (at 39:56) instead of showing me are something like this: "restaurants": [], "page": 0, "filters": {}, "entries_per_page": 20, "total_results": 0
Is anyone else having an issue with actually rendering their reviews on the frontend? I can submit a review just fine through postman and it is for sure in Mongo properly. What was your solution if you figured this out? Also, using same version of react-router as Beau, the instructor, here so that's not an issue. Everything else displays fine except reviews.
I followed till 39:58 but after opening the link in browser , I am not getting the db contents. All I am getting is this : {"restaurants":[],"page":0,"filters":{},"entries_per_page":20,"total_results":0} Can anyone help on this?
In the other video you use mongoose to create schema for the MongoDB. What is the difference here ? It seems you use Mongodb.MongoClient instead ? Isn't mongoose easier ?
The instructor tries his best and I think we all appreciate that. But. The tutorial is outdated, you spend too much time debugging, loads of copy pasting, wrong naming conventions and I've found myself crawling the comments in the hope of finding solutions way too many times. It may be better to just learn from another resource at this point.
Hi @Beau, thanks for this fantastic tutorial. I have run into a challenge with adding reviews for a restaurant. After I log in and create a review, when I click the submit button I see a new entry in the MongoDB with the name, user_id, and text fields having null as values. However, upon clicking on the View Reviews button on the restaurant, I don't see the new review. When I try to edit a review I created using insomnia, when I click on the submit button nothing happens and there is no new entry in the MongoDB. What could be the problem?
Next learn JavaScript DOM manipulation: ua-cam.com/video/IWRS_AM2fiE/v-deo.html
in 20:00 when you run the server, I get 'clean exit - waiting for changes before start', and the server never start
I understand @beau took time and worked hard to create this video, but you really don't want to be pasting large amounts of code during tutorials. It makes it very hard to follow along. Please type out all of your code live, so we can comfortably follow along.
I stopped watching this video after 45 mins. You pasting large blocks of code is too painful to follow. I don' mean to be rude, I know you work hard creating these videos. Hopefully in future videos, you can type out your code live so we can follow along.
@@lifeasdev7480 how did you resolve this error?
Just want to let you know that I really appreciate all that you do. I started learning how to make websites end of last year from knowing absolutely nothing. 6 months later, I'm able to understand how to make a website using the MERN stack. I plan on creating my own website from scratch pretty soon and your videos have really helped me build a strong foundation in web dev. Thank you!!
I also do not know anything.I want to learn web developement.Kindly give some idea to start.
@@saravanajothigandhirajan6570 Courses is the way I always use with a new fresh topic. HTML, CSS and Js are the basics. For that, here in UA-cam you have thousands of free courses.
I really appreciate what you and everybody over at Free Code Camp do. It really is helping to shape the future of our world .
Shutnup
I can't setup the Faceting Search.😔
Took about an extra 2 hours to debug the first 2 hours of video. Thanks to the comments, got some solutions quick. The ones i missed in comments were:
- The baseURL should not contain "restaurants" after v1, as it's also designated in the react-router-dom paths . So you get endpoints like "v1/restaurants/restaurants..."
- For some reason, I had to change from localhost:5000 to another number. [I tried killing nodes with "pkill -f node" and restarting, but only changing localhost number worked.
To recap some stuff other commentators pointed out:
- Update node and npm to latest versions.
- Make sure you install some dependencies like react-router-dom on FE
- In the render part of each component, just rewrite the code all together. The components need to be like . The video and git are missing the and use generic (...props) that does not work (for me).
Thanks for the head up for the baseURL. After I remove restaurants, and its start displaying the list of restaurants!
Thanks a lot, does the happy ending come at the end and everything works fine?
For anyone who encountered the same problem I did with the review collection not being created: be sure to add the restaurant review DAO injectdb method call to mongo client connection in the index file. The same way he made a reference to the restaurantDAO at the beginning of the vid
Thank you! I was getting nuts trying to find the reason why I was not getting the review inserted.
thankyou!
Hi i'm stuck with terminal , should i use terminal from VSD or from CMD ?
Additionally at the top of reviewsDAO.js is a typo
const ObjectId = mongodb.ObjectId;
should be
const ObjectId = mongodb.ObjectID;
@@alexsannikov3398 hey thanks man! Good catch
Great course, a quick feedback though, I always think writing the code is better than pasting it in beginner tutorials, but if the tutor has to paste some code to save some time, please try to paste it in small blocks. Pasting 50 lines of code at once (25:00) is a bit overwhelming, despite the good explanation provided
Thanks again for all your courses FCC
Hey... If you gone through this, can you tell me if it's beginner friendly?
I abandoned this restaurant reviews tutorial after several failed attempts but returned this week and was able to get mine working. This time around I installed an earlier version of react-router-dom but I don't know if this was necessary. Thanks so much for this tutorial!
yes i believe you need 5th version or something of the sort, there is another comment about it
I would love to see a extra episode on how to fully test the backend and the frontend of this application. Personally i encountered alot of hurdles trying to test my express backend API.
I thought it's a 2hr video but it should be a 20 hour video for me. I have never used these functionalities in my projects but thanks to *BEAU* I can learn and use it in my project after a thorough and repetitive watching.
if you refresh the page while logged in, it will log you out.. fyi.. very basic project. but gives us alot to do on our own to make it a worthy portfolio project.. great tutorial
Fix an issue:
for the Reviews not able to be inserted in the mongoDB and not able to add review,
this need to be added in the index.js file:
1==> import restaurantsDAO from "./dao/restaurantsDAO.js";
2==> await ReviewsDAO.injectDB(client)
reviews database will be inserted and works fine
Every time you pasted code in it took five years off my life. I'll see you all at my funeral in 20 minutes
Learn MERN Stack (wrong), Learn to debug something that u r not familiar (right)
20:04 In modern MongoDB driver versions, such as v4.0 and later, the poolSize and useNewUrlParser options have been deprecated and should not be used as direct options in the connection string.
use this instead of that :
useNewUrlParser: true,
useUnifiedTopology: true,
wtimeout: 2500,
PHEWWWW IT ALMOST TOOK ME AN HOUR TO FIND THE ISSUE T-T
ive made these changes but i still keep getting the error "localhost refused to connect."
@@swarnima6656 me too
For anyone late to the party, I had a hell of a time getting bootstrap to align the search sections properly at about 1:39:00. I found that it fills the space to fit the restaurant columns if you set the input-group divs to just "col-lg" and then add "col" to the "select" item for the dropdown. Only as I'm writing this do I realize that he also didn't align his dropdown tab, haha.
Either way, it's something like:
className="input-group col-lg"
className="input-group col-lg"
className="input-group col-lg"
className="col"
making the select bar a single column tells it to fill the available space, but it gets all wonky if you don't also remove the "4" from the sizing of the input groups. Still not entirely sure why. Feedback on if I'm mistaken would be appreciated.
Thanks man! I was also having a tough time in aligning it
Got, I guess, the same problem that the 3 searches aren't rendered as columns but as 3 rows. However this solution if I got it right didn't solve it for me if anyone got it right (bootstrap 5 installed in root directory)
@@emmanuelgandelman9024 I have removed the -4 from col-lg-4, so it was just col-lg and it worked 😅
For anyone using a Mac OS and can't connect to port 5000, switch to a different port like 5001 since 5000 won't allow you to access it.
My first experience with Mongo Realm and I'm amazed how many ways they have to help me build, thank you for the introduction :)
Finished it -- Really an excellent course all together. Helped bridge the gap between Node/Express and Realm by showing necessary changes and configuration.
Hello Andrew I got stock at about 24mins when he run nodemon server , can you pls help me out?
If you are having issue something about switch, follow the instructions:
uninstalled the version 6 of react-router-dom:
npm uninstall react-router-dom
And installed version 5.2.0 of react-router-dom:
npm install react-router-dom@5.2.0
I love this MERN tutorial. Its really help me. Thank you Beau Carnes for helping us.
This is great Beau, thank you. This video needs serious update though. It's impossible to follow along without debugging numerous issues due to deprecated functions in the packages used in the video... Would love to help with some Pull Requests to the repo but I see that there is no activity.
I would've preferred this to be a 5-hour video but without copy/pasting rather than copy-pasting everything.
2:43:11 if anyone getting error (Message: The specified key does not exist.) 404 not found , after hosting , then go to hosting setting and set Single-Page Application entrypoint as index.html .
Best practices dictate that React components be written in PascalCase. For example, rather than `restaurants-list.js` it should be `RestaurantsList.js`
@dev null Dan Abramov? Kent Dodds? The literal documentation on the website? Pick any of them. Or all three. Gotta collect them all. ;)
What do you think the stack at the end should be called without Node and Express? Maybe the MRR stack?
i like RRealmM stack
Take a bow sir you are great
Maybe MR2 👍
R2M sounds good
Hey Beau, sorry to bother you for this but what Google Chrome Extension are you using to make your HTML more readable at 40:00 ? And to answer your question I would keep it simple and call it RRealM or MRR. Stack (pronounced as mister stack) maybe? I hope this helps you, thank you for the amazing video and content on your channel.
@23:06 Had an issue when everything was done right, but nodemon index/server kept complaining that I still 'Must use import to load JS module'.
That was caused by an older node version - switched to 14.0+ and it helped
Great refresher course otherwise!
Fix issue:
to be able to install (01:06:55)
install the react-router-dom
you need to fo to the main folder ==> restaurnts-reviews
then ==> npm init -y
which will create the package.json file and allow the router dom to be install inside it.
Thank you man.
It wasn't this way previously but at: 22:00 when he changes the password, that is no longer needed. The link that Mongo generates for you will already have your user password included. DO NOT delete it or your app wont connect.
where did you get database for restaurants did you insert it ur self
will suggest to make an alternate version which avoid doing the copy pasting of the code . it can be even more basic than this - will make this easier to follow for folks who are new to the MERN stack. otherwise, going through the video and trying out the example is going to take atleast 2 or 3 times the length of the video - thats what it took me. Got a good taste of the MERN stack though !! Thanks for putting this together
Very nice tutorial, thank you. However, I believe you made an incorrect choice at not including Mongoose as a library. Such libraries are created for a reason... your code for connecting to a database and querying it is considerably more complicated and less maintainable than code that uses the Mongoose library.
Exactly!
The amount of code needed for database operations just seems impractical to me, compared to out-of-the-box solution mongoose provides.
it is nice to know what is going on under the hood of mongoose and now i know why to use mongoose
Did someone by any chance converted this tutorial to Mongoose ?
@@emmanuelgandelman9024 I think I will after the tutorial :)
11:06 is visual studio code, a program you have to download if you don't have it already
This tutorial is good in terms of concept understanding really appreciate the efforts by the instructor.
Hi Pratik, are you looking for SDE roles currently? Reach out to me if you are by visiting the "About" section of my channel.
For the problem from the minute 40:00 , in which the information is displayed in the form of text / paragraph that I found was to download a browser extension for display in JSON format. In my case I use Operas and I downloaded the JSONVue extension from the Chrome Store (or something like that).
Thankyou
I followed along perfectly but I had to use `nodemon index.js` instead of `nodemon server.js` at 23:10
just use 'server' not 'server.js'. worked for me
Same issue
Same issue, however this didn't resolve it
Are you found any solution??
Hello Daniel I had the same problem, but not working . can you pls help me out
I was given this video to learn from at school while knowing NOTHING about mern stack and I can say… my assignment was turned in late and half finished because this is not the vid to be having your first experience with mern with.
This tutorial is good in terms of concept understanding really appreciate the efforts by the instructor, however, while following the tutorial there were a lot of version compatibility issues and structural issues related to react-router-dom, I hope you can address it in the future, besides as always great work!
I had a hard time with the issue too, however that's something you need to fix yourself, since we're programmers, fixing bugs is something we need to learn too instead of relying to the instructors
That's because versions change my friend. It's a free course. Refer to the documentation of the tech used here to get up to date information.
this was free...
They should call this tutorial: 5 HOURS OF DEBUGGING
my bro's a lil confuse with time
Just had to leave a comment you just saved my Bootcamp Final project
If you're struggling to get it to display @1:23:14 and getting an error that "Switch" isn't in the react-router-dom. Do yourself a favor and install "npm install react-router-dom@5" -- it will display just fine after that.
thank u so so much. btw was it hard to figure it out ?
@@emmanuelgandelman9024 just look for it in stackoverflow :)
"I'm not gonna' waste time explaining about react hooks, but let me explain you in depth how a ternary operator works"
Thank you for such an amazing course! I have a question. How does MongoDB Realm scale for large-scale apps. For instance, what if your app has a million users. Would it be viable to use MongoDB realm to host such an app?
Great video. But so many commands in this tutorial from mongodb are deprecated. When you run the server, you get tons of errors in the console.
thanks for the warning. Was it hard to find a workaround ?
@@emmanuelgandelman9024 I couldn't find a solution. I posted the issues in the freeCodeCamp Forum, but still no solution.
@@pjmantoss Please see Flaviu Pop comment above.
day 2: on 47:48. Im trying to write everything on typescript and I had to google what DAO means. I hope I will manage to finish this in a few days
Keep it Up bro
Data access object
Invaluable expecially Realm which i believe was previously called stitch. I thought you could also query the db directly from the browser instead of writing a function in realm?
We love you Beau!
There is a lot of good information in this tutorial, but my gosh is it hard to learn from with all those giant tool tip boxes covering up half your screen.
23:14 I don't understand this. This shouldnt work since index.js, where the listenner is, isn't mentioned in server.js. How does it work for you?
EDIT: I forgot, you must run 'nodemon server' not 'nodemon server.js'.
EDIT 2: I was also stuck with this. Basically, the guy in the tutorial made an error. Nodemon says:
"Note: if the script is omitted, nodemon will try to read "main" from package.json and without a nodemon.json, nodemon will monitor .js, .mjs, .coffee, .litcoffee, and .json by default."
Basically, it just runs index.js by default because package.json says so. I don't know why the tutorial guy runs "nodemon server".
Great work. Even though my own explorations with MERN is quite limited.
I appreciate this. Lovely,
Great work,
shout out from tunisia
If people having trouble with the frontend on the current versions of react en react-router-dom.
fix:
npm uninstall react-rouer-dom
npm install react-router-dom@5
Thanks for the advice :)
Thank you SO MUCH! 12 hours from the deadline and this saved my life :D
Thanks! had to restart the tutorial due to this problem. Now it's fixed!
Beau is a great instructor thanks for all the help
realm part is amazing
For v6 of react router dom, change "Switch" to "Routes". I'm also getting "Invalid Hook Call" ~@1:20:00. Might have something to do with multiple Reacts detected, but can't figure out how to fix.
Update: issue is in the
Also need to change 'component' to 'element' per v6.
Removing the array brackets stopped a different error I was getting, allowing the page to compile. I'm only using one path, as using multiple paths is breaking the app.
But now getting another error.."Warning: Functions are not valid as a React child."...will update if I figured something out.
render={(props) => (
)}
needs to be changed to
element = { } and it can now render correctly. There are also the other two similar render things that will need to be changed.
I'm not sure what {...props} was doing as I didn't hear an explanation in the tutorial, though I'm not completely finished yet. Will probably need to find a way to pass in whatever props that is referring to. Will update further when done.
Hi I was also getting the Invalid hooks problem. At first i tried to demote the installed packages to the ones Beau was using. Didnt help. The fixes you suggested were not fixing my problems either. I just decided to follow using the git version. My main focus is learning the Mern stack and how to integrate the Front and the Back. Fixing compatibility issues IMO is just being sidetracked. Would be nice though if an updated working version was published...........
Hi, my path now looks like this "" but I'm still getting the "invalid Hook Call" error which is incredibly frustrating. Did you change anything else to make it work?
@@jazirladha7686 I had the same problem. I fixed mine by making sure that the react-router-dom dependency is installed in my frontend folder. Hope this helps.
@@juanpaolodionisio429 Thank you! That worked for me too
not happy with the parts where you just copy paste the code 😞
0:26 MERN full form
2:05 MERN app er structure Fig
5:25 Mongodb account toiri kora
Please add courses on Node.js and Express.js microservices.
I'm relatively new to JS and was confused by the syntax used around 27:34 in getRestaurants' function signature. What's the purpose (or just the name) of the " = {}" following the options object?
its just a default parameter...to avoid getting error if no object passed as argument...for more info search for this it should be first result : JavaScript Destructuring Assignment with Default Values
From MDN:
function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = { }) { }
You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can call drawChart() without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters. The other can be useful when you want to ensure an object is passed to the function.
Not sure if I am the only one here with this issue but I ran into an error "TypeError: Cannot read properties of undefined (reading 'map')"
Been knocking my head for 3-4 hours over this one.
did u find the solution?
@@aaryangarhewal unfortunately I did not. I chose to follow another tutorial.
@@cristionbrown okay, well I have found that... Just add
const [loading, setLoading] = useState(false); const [error, setError] = useState();
if (loading) {
return Data is loading...;
}
if (error || !Array.isArray(dining)) {
return There was an error loading your data!;
}
@@aaryangarhewal thanks. I'll keep this in mind!
If anyone has any trouble making the put request make sure to change the restaurant_id to review_id in postman or insomnia.
Django With React Tutorial please.....
This I want as well
Why not just a "Django+GraphQL" one and a "React with graphQL" one? All this talk of combinations is exactly the wrong way to go about it, REST API's and GraphQL where designed specifically so the backend and frontend don't have to know any thing about eachother.
I'd much prefer a way to use react with proper REST API's so we can ditch graphQL and get control back over the insane way that frontenders think they can request data.
django is crap
@@TuringTested01 Trolling is for the weak.
@@vinny142 true, i also believe trolling is for the weak.
Nice tutorial. Could you please let us know the code color theme and icon theme you're using in every tutorial. Thank you
Salute to you Sir! Your channel is really a big help! Thank you
Thank you for teaching us. You are a very good person.
Hey, at about 1:05:00, when I try to get a restaurant by ID, the reviews array seems to be empty for some reason? There's supposed to be two reviews in that array according to the data I can see in the collection on the mongodb website, but the API is still returning an empty array. Any solutions?
In case anybody is stuck at this, make sure that your restaurant ID is being correctly interpreted from the body of the request when you post a review. I was sending the value in restaurantID but was trying to receive from req.body.restaurant_id, which I immediately enter as ObjectId(restaurant_id) where it got an index, after which you can't distinguish whether it got the correct value or even null.
You can check if you're having the same problem by just cross-checking whether the restaurant_id in the reviews collection is the same as what you passed.
@@shameekbaranwal Can you give more info or code example? I mean literally all we've done is copy and pasted and everything I have matches his code. But mine aren't even showing up in reviews collection now.
Thanks bro... you saved the day...
i almost went crazy, i was just missing the '$' in $restaurant_id
I am still stuck here, and everything is in place. could you please show us what you changed @sgeek?
Thank you for all your work, guys!! 🤩
You are my hero ✌️
Thank you Beau, great video and well explained walk through
Thanks guys.
THANK you so much ! can you please do an offline support for react next ?
Exactly, especially using same mongodb & realm for mobile
Hi fCC.. I'm Happy to see this course.. but can we expect a MEAN Stack Course anytime in near future?
they have done videos on that before. it takes more time to ask in a comment than to type it in google.
@@vinny142 MERN/MERNG courses were also already uploaded a year ago.. now a new version of MERN is uploaded.. so why not MEAN?..
I just wanted to see if anything new is happening with Angular (perhaps MEAN + ngrx or MEAN + Mongo Realm etc)
Great video...can i use mongoose as well ?
Nice, but at service frontend, review and restarant are different context, i added add two service, one to Review and other restaurant, equal in backend, congratulation at project
This saved my life.
Thanks a lot for sharing this. The only MongoDB project that thoroughly cover all the key topics.
The only issue is that you should have wrapped the code lines. It's really a headache to follow those long lines in the video.
Very good! Thank you so much @beau
Django + React course would be awesome
CERN : CouchDB, Express, React and NodeJS
Astonished by your tutorial, it really taught me so much. Please keep on making this video. Maybe try on some stack like javascript + ruby/python/java, it will help a lot of beginners!!
Why are you installing bootstrap and the other libraries related to the React application into the root directory of restaurant-review (backend and frontend directories) and not just in the frontend directory? This isn't recommended. Since npx create-react-app uses yarn by default, you'll want to cd into the frontend directory and run `yarn add bootstrap react-router-dom`
Thanks! This saved me some time. I tried to jump in at the 2 hour mark to skip to the serverless stuff and was getting errors for not having bootstrap installed. This yarn command worked like a charm
This is a GREAT tutorial!!
Thanks for sharing!!
25:36 injectDB would work with locally installed database as well? or it will work only with mongodb altas?
Ran into a problem with nodemon, I couldnt install it at first so i used sudo install -g nodemon.
But anyway, on starting my server, I ran into further problems:
[nodemon] restarting due to changes...
[nodemon] starting `node server index.js`
TypeError: Cannot read properties of undefined (reading 'startsWith')
at connectionStringHasValidScheme (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb-connection-string-url/lib/index.js:9:30)
at new ConnectionString (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb-connection-string-url/lib/index.js:85:34)
at parseOptions (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/connection_string.js:209:17)
at new MongoClient (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/mongo_client.js:62:63)
at Function.connect (/Users/timo/Documents/MERN Stack Practice/restaurant-reviews/backend/node_modules/mongodb/lib/mongo_client.js:195:33)
at file:///Users/timo/Documents/MERN%20Stack%20Practice/restaurant-reviews/backend/index.js:10:13
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async loadESM (node:internal/process/esm_loader:88:5)
[nodemon] app crashed - waiting for file changes before starting...
Does anyone know why this error is thrown? what can i do to fix this? Stuck at the first 23mins of the video and can't proceed
Did anyone find a solution to this?
Thank you sir! your teaching is exellent
Intro was nice! but I don't like long chunk of code pasting and go through all the way to end. That's boring and something hard to understand. write small code test it and continue.
I really wanted to like this, but the process of "let me paste a wall of code instead of typing it and explaining it" is a terrible way to teach. And once pasted, the constant scroll up/down/sideways makes it difficult to actually look at what the code is doing.
Additionally, while node has ASI, for readability, put the damned semicolons in.
Amazing tutorial, u are really good teacher ! :D
Knowing technology today by the time I finish this video and understand it, half of what he taught will be deprecated and a whole new framework, noSQL and language->syntax will be the common knowledge needed to know w/10 years of experience required to work in career position with.
I cannot get a list of restaurants from database :( (at 39:56)
instead of showing me are something like this:
"restaurants": [],
"page": 0,
"filters": {},
"entries_per_page": 20,
"total_results": 0
Same
Same problem after several days, no solution.
great video... pls do more videos on mern stack projects .....thnxx
Is anyone else having an issue with actually rendering their reviews on the frontend? I can submit a review just fine through postman and it is for sure in Mongo properly. What was your solution if you figured this out?
Also, using same version of react-router as Beau, the instructor, here so that's not an issue. Everything else displays fine except reviews.
Hey, I am facing the same problem.
Will really appreciate your help if you fixed this issue.
@@nikunjrules619 Sorry, never did. But if you ever do, let me know, haha.
I followed till 39:58 but after opening the link in browser , I am not getting the db contents. All I am getting is this :
{"restaurants":[],"page":0,"filters":{},"entries_per_page":20,"total_results":0}
Can anyone help on this?
I am having the same problem and have been working on it for a few days now with no solution.
did you figure it out? i have the same problem
I solved this issue simply by replacing my hand-written code in restaurantsDAO with his code in github
I am having a same issue, please reply if anyone figured it out.
@@大花猫-i3o can you share please, what changes have you made?
very nice video i watched the whole thing
In the other video you use mongoose to create schema for the MongoDB.
What is the difference here ? It seems you use Mongodb.MongoClient instead ?
Isn't mongoose easier ?
The instructor tries his best and I think we all appreciate that. But. The tutorial is outdated, you spend too much time debugging, loads of copy pasting, wrong naming conventions and I've found myself crawling the comments in the hope of finding solutions way too many times. It may be better to just learn from another resource at this point.
Awesome. Thank you very much for a great great tutorial.
if you are using a VPN your IP address might change. then you can't connect to the cluster because the new IP is not in the IP access list
I like how you pronounced "caterer" lol, like it's a French word 😂 It's "kater" - "rer", Beau :)
Hi @Beau, thanks for this fantastic tutorial. I have run into a challenge with adding reviews for a restaurant. After I log in and create a review, when I click the submit button I see a new entry in the MongoDB with the name, user_id, and text fields having null as values. However, upon clicking on the View Reviews button on the restaurant, I don't see the new review. When I try to edit a review I created using insomnia, when I click on the submit button nothing happens and there is no new entry in the MongoDB. What could be the problem?
im having the same issue, could you solve it yet?
also having the same issue, can anyone solve it
This is advanced level course. If you never work with mongodb, react or node you can't understand anything.
Its completly obvious that you must have some knowladge of these technolgies otherwise course would have been 15h long
Thanks a lot for this!