MERN Stack Course – ALSO: Convert Backend to Serverless with MongoDB Realm

Wordpress sites

Learn how to create a full-stack web app using the MERN stack. The MERN stack is MongoDB, Express, React, and Node.js.

Also, learn how to use MongoDB Realm to convert the backend to serverless and host the entire thing for free in the cloud. You will even learn how to host the React frontend for free.

✏️ Course developed by Beau Carnes.

πŸ’» Code:
In the code, the "realm" directory has the code to use in the MongoDB Realm functions.

πŸ”— Learn more about MongoDB here:

⭐️ Resources ⭐️
πŸ”— MongoDB Basics Course:
πŸ”— MongoDB for JavaScript Developers Course:
πŸ”— Docs on query operators (MQL & Aggregation Framework):
πŸ”— MongoDB security best practices:

⭐️ Course Contents ⭐️
⌨️ (0:00:00)​ Introduction
⌨️ (0:02:40) MongoDB overview
⌨️ (0:03:48) Setup MongoDB Atlas Cloud Database
⌨️ (0:06:44) Load sample data into database
⌨️ (0:08:16) Create Node / Express backend
⌨️ (1:05:38) Create React frontend
⌨️ (2:02:58) Setup MongoDB Realm and replace backend
⌨️ (2:39:46) Host frontend on MongoDB Realm

πŸŽ‰ MongoDB provided a grant that made this course possible.

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

51 thoughts on “MERN Stack Course – ALSO: Convert Backend to Serverless with MongoDB Realm”

  1. I really appreciate what you and everybody over at Free Code Camp do. It really is helping to shape the future of our world .

  2. My first experience with Mongo Realm and I’m amazed how many ways they have to help me build, thank you for the introduction πŸ™‚

  3. Daniel Enrico

    I followed along perfectly but I had to use `nodemon index.js` instead of `nodemon server.js` at 23:10

    1. Victor Adodo

      Hello Daniel I had the same problem, but not working . can you pls help me out

  4. Christine Maynard

    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

  5. Ishan Kesharwani

    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.

  6. 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.

  7. 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!!

    1. Saravana Jothi Gandhirajan

      I also do not know anything.I want to learn web developement.Kindly give some idea to start.

  8. Benjamin Castro

    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.

    1. The amount of code needed for database operations just seems impractical to me, compared to out-of-the-box solution mongoose provides.

  9. What do you think the stack at the end should be called without Node and Express? Maybe the MRR stack?

    1. 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.

    2. I think it is cool…. but trying to follow the same project its a pain when you paste links for things that have not been created, or just paste things in general…. I get lost on what items go nested where..

  10. 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.

    1. Emmanuel Gandelman

      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)

  11. 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!!

  12. 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!

    1. 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

  13. 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).

    1. Thanks for the head up for the baseURL. After I remove restaurants, and its start displaying the list of restaurants!

  14. If you want to do everything as described in the video and not have to worry about package compatibility problems, make sure to install the package versions used in the tutorial. To do that, you can use the npm install [package name]@[version number] command or copy-paste the package.json file and run npm install after you delete your node-modules folder.

    edit: also starting 12.01.2022 Third party services in MongoDB Realm have been deprecated in favor of creating HTTP endpoints that use external dependencies.

  15. Elements that you’ll have to change because they are deprecated (23/02/2022):

    -File: Index.js (min 0:20:20)

    poolSize => maxPoolSize,
    wtimeout => wtimeoutMS,
    useNewUrlParse => useNewUrlParser,

    -Files: restaurantDAO.js & reviewsDAO.js (min 0:59:30)

    ObjectID => ObjectId

    1. @Billy Best for all of the three updated suggestions (maxPoolSize and so on), in the terminal i get that they’re all not supported. I’m using Mongodb 5.0.6 so should be up to date i would’ve thought

    2. @Evan Parker can you copy and paste the message from console. Maybe I can tell. I’m no expert and these kind of things can be different on different systems

    3. @Billy Best [nodemon] starting `node index.js`
      the options [maxPoolSize] is not supported
      the options [wtimeoutMS] is not supported
      the options [useNewUrlParser] is not supported
      listening on port 3000 I changed from port 5000 to port 3000 as i kept getting code: ‘EADDRINUSE’,
      errno: -48,
      syscall: ‘listen’,
      address: ‘::’,
      port: 5000

    4. @Evan Parker Sorry for the late reply been busy. Looks like maybe in your code you wrapped these with [ ] maybe. I have not seen this before. for reference MongoClient.connect(
      process.env.MDECK_DB_URI,
      {
      maxPoolSize: 100,
      useNewUrlParser: true,
      writeConcern: {wtimeout:3000}
      },
      )
      .catch( err => {

      console.error(err.stack);

      process.exit(1);
      })
      .then(async client => {

      await BeautyDAO.injectDB(client);
      await GlamourDAO.injectDB(client);

      app.listen(port, () => {
      console.log(`Server is running on port: ${port}`);
      });
      })

    5. @Billy Best Thanks Billy for taking the time out to help, i’ll look into this

  16. Monther Alghamdi

    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

  17. Chameleonstreet

    In case you were curious: if you are using Chrome and want to look at the JSON in your browser in pretty format (as in the video) add the JSON Formatter for Chrome dev tools. Similar formatters are available for other browsers as well. Awesome and helpful course, thank you!

  18. Kathleen Mccarthy

    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!

Comments are closed.