Introduction to the Course

Let's learn about the course organization and the basics of the MERN stack.

We'll cover the following

Introduction

This course takes us on a fun, hands-on, and pragmatic journey to help us learn MERN stack development. Every chapter is written in a bite-sized manner, so we don't waste our time on content we don’t need. This course focuses on the key tasks and concepts needed to start learning and building MERN stack applications at a faster pace. It's designed for readers who don’t need all the details about MERN at this point in their learning process and want to concentrate on the essentials.

We'll practice building a full-stack MERN application and deploying it to the internet. The application we will develop in this course is a Movie Reviews application.

No previous experience with Node.js or React development is required, but you should have basic programming knowledge in order to be successful in this course.

Overview of MERN stack

The MongoDB, Express, React, Node.js (MERN) stack is a popular stack of technologies that build modern Single Page Applications.

  • MongoDB is a NoSQL database that stores data persistently in the form of collections and documents.
  • Express is a web application framework for Node.js, which makes application development in Node easier and faster.
  • React is a JavaScript front-end library that builds user interfaces.
  • Node.js is one of the most popular server-side frameworks that allow us to execute JavaScript code on a web server. Node and Express together form the middle-tier web server of the stack.

MERN is derived from the popular MEAN stack (MongoDB, Express, Angular, Node), but instead of using the Angular front-end framework, we use React. Another popular variant is the MEVN stack in which Vue.js is used as the frontend. These frontends make up Single Page Applications (SPAs), which avoid reloading the page and fetch relevant portions of the page from the server to display new content.

The application we'll build

We’ll build a Movie Reviews application that lets users view and search for movies in an external database. Users can also log in and post reviews of the movie, as shown in the image below:

Users can see a list of reviews on a movie’s page and post, edit, and/or delete their own reviews (if they are logged in). They are not able to post, edit, or delete another user’s reviews.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
A complete working example of the application we aim to build

The development cycle

Through this application, we’ll learn a lot of concepts and solidify our MongoDB, Express, React, and Node.js knowledge. We’ll first talk about MongoDB and how to host our database in the cloud using MongoDB Atlas. We’ll then create the backend of the application using Node.js and Express. Our server will interact with the database using the native MongoDB JavaScript library.

After that, we’ll create the frontend with React and connect the frontend to the backend to complete our MERN stack application. In the last chapter, we’ll deploy our Node and Express backend on Heroku and our React frontend on Netlify to run both the backend and frontend in the cloud. The overall structure of our app will look like this:

  • The “M” of the stack, MongoDB, will be hosted on MongoDB Atlas. MongoDB Atlas is a multicloud database service that handles the deployment and management of your database server.

  • The “E” and “N” of the stack, Express and Node, run the back-end server (Express is a part of Node.js) and expose an API. It’s hosted on Heroku. Heroku is a container-based cloud platform used to deploy, manage, and scale modern applications.

  • The “R” of the stack, React, is the frontend that calls the API and renders the user interface on the client’s browser. It’s hosted on Netlify. Netlify is a top-rated web development platform for building, testing, and deploying websites.