Hands-On MERN Stack Web Development

You’ll learn how to use node as a JavaScript runtime. To enable the latest syntax, we’ll setup Babel, the JavaScript transpiler.

   •  Practice using the node shell

   •  Setup babel so we always have the latest JS features

   •  Review our new setup and retry our initial examples

Our next step is to setup Express and get a functional server running. We’ll also want to setup nodemon, so that our server restarts when we make changes.

   •  Setup Express and configure a basic web server

   •  Setup nodemon for easier and faster development

   •  Learn and use environment variables for runtime configuration

We’re building a RESTful service, so we’ll first need to explain what REST is. We’ll also learn about data modeling, a technique that we’ll use during the course.

   •  Learn about CRUD and REST

   •  Learn about domain entities and data modeling

   •  Practice DDM with a user class

Now that we know what REST is, we’ll see how we can handle CRUD operations on our server. We’ll learn to use curl for testing and see why we might need a more sophisticated tool.

   •  Setup GET, POST, PUT, and DELETE endpoints in Express

   •  Setup and use the bodyParser middlware

   •  Test and review the completed examples

Middleware functions are a core concept in Express. In this lesson, we’ll explore how they work and implement a few of our own.

   •  Learn the theory behind Express middleware

   •  Code out two useful examples

   •  Learn about the importance of middleware ordering

Jest is a powerful test runner for JavaScript codebases. We can use it on both the frontend and the backend. But first, we need to configure it and write some simple tests.

   •  Install and configure Jest

   •  Write a couple of unit tests

   •  Write more complex tests with mocking

We saw that using curl is not the easiest solution for testing our backend endpoints. It will become even more difficult as we add more POST routes and authentication. We’ll turn to Postman for a solution.

   •  Setup Postman on your machine

   •  Learn to create collections and requests

   •  Manage variables in Postman

After the high-level overview of MongoDB from the first section, it’s time to dive deep. We’ll go over the features that MongoDB provides and see how schemas and collections look.

   •  Explore MongoDB’s features

   •  Compare collection with SQL tables

   •  Practice how to create and organize a schema

We’re going to get started with MongoDB by choosing the best setup that works for you. You can use a manual install, Docker, or a cloud provider. We’ll see the pros and cons of each option.

   •  Configure the file structure to support our project’s growth

   •  Setup MongoDB with Docker and write automation scripts

   •  Explore alternative options for running MongoDB

Now that we have MongoDB running, we will connect our server to our database. We’ll set up our database driver with mongoose and start interacting with it.

   •  Install and configure mongoose and connect to our database

   •  Create a seed script to insert data to MongoDB

   •  Review our code and verify everything with Robot 3T

Now that we’ve established a connection to our database, it’s time to read actual data on our server endpoints. We’ll start by enabling an endpoint that can return a list of user from the database.

   •  Make a seed script to insert larger records

   •  Return a list of all users from the database

   •  Use findById to return a single user from the database

Reading data is only one part of the puzzle. You will also have to learn how to create, update, and delete records.

   •  Create a POST request that’s used to create data

   •  Create a PUT request that’s used to update data

   •  Create a DELETE request that’s used to delete data

MongoDB comes with its own powerful query language. We can use it to filter data or aggregate records for analytics.

   •  Setup a filter that supports product categories

   •  Test our endpoint’s filter logic with Postman

   •  Explore MongoDB’s query language via Robot 3T

Before we go on to the next section, we should refactor our code to make sure it follows good software development practices.

   •  Extract hardcoded values into environment variables

   •  Extract routes into their own files

   •  Implement basic permission checks on all sensitive routes

We’ve only talked about React in high-level terms, but in this section we’re diving deep. We’ll first get familiar with the syntax and concepts.

   •  Explore React’s core concepts

   •  Follow-along with 3 examples to get familiar

   •  Learn about declarative programming

We’re not going to setup our frontend from scratch. Instead, we’ll use React app to quickly bootstrap our project.

   •  Bootstrap the frontend with create React app

   •  Explore the “magic” behind the CRA

   •  Learn about React vs ReactDOM

We’ve seen some React sample code, but now it's time to write our own components. You’ll learn about concepts such as JSX, props, and state.

   •  Write your first UI components with JSX

   •  Pass to components data via props

   •  Create and manage dynamic data with setState

Now that you have the basic grasp of some core concepts, it’s time to expand on them and build a dynamic counter component.

   •  Learn how to “lift” state up the component tree

   •  Work with dynamic callbacks and anonymous functions

   •  Review the final component and how the data flows

That’s enough of tutorial-like examples. We’re going to step into the real world by creating a component that will actually be used for our store.

   •  Review the task and design specifications

   •  Setup the base component skeleton and data schema

   •  Integrate styles and implement dynamic image changing

The next concept you need to learn is how to work with dynamic lists. Often we need to render a list of items that will all contain a similar structure and some interactive content.

   •  Render a dynamic list of elements using “map”

   •  Learn about the “key” property

   •  Extract all of our code into a reusable ProductList component

Input fields and forms are likely one of the most important aspects of a web application. We’ll first look at how we can work with input fields and how data flow is handled.

   •  Create a generic “BaseInput” component as a skeleton for all inputs

   •  Learn to create Controlled Inputs

   •  Learn about Synthetic Events and how to work with them

Now that you know how to enable the user to enter their data into your inputs, it’s time to see how we can store and submit it.

   •  Ensure our inputs, buttons, and forms are accessible

   •  Handle data flow and control

   •  Enable form submission

It’s time for our application to take shape. To enable this, one of the most important things we need to take care of is routing. And we’ll use react-router to help us out.

   •  Examine our routing strategy

   •  Setup React router and some basic routes

   •  Learn about dynamic parameters in React router

Before we can start making requests from our frontend to our server, we need to disable CORS in our development environment.

   •  Learn about the same origin policy

   •  Setup the CORS middleware

   •  Learn how to enable CORS in production

Now that CORS is set and working, we can enable our frontend to make requests. We’ll use a library called axios as a helper.

   •  Setup and configure axios

   •  Learn about React’s lifecycle methods.

   •  Make requests and render data from the server

Now that we know how to request data from the backend, let’s implement two new views: a categories page and a single product page.

   •  Work with dynamic parameters to make filtered requests

   •  Create a loading indicator

   •  Request a single product and display a unique page

We can now display products in our web app. But what would be even better is if we could add them to a shopping cart.

   •  Learn about localStorage and how to use store2

   •  Implement an addToCard method

   •  Ensure the shopping cart data is in sync across tabs

Our app will also have a protected admin section that’s used to view and manage users and products. We should setup those routes as well. It will be a good chance to also talk about third party dependencies.

   •  Setup admin-only routes

   •  Learn about evaluating third-party dependencies

   •  Learn how to wrap and use third-party code

Authentication is an important part of any application. There are many security and privacy concerns around it, so we have to be very careful.

   •  Learn about passwordless login and magic links

   •  Learn the theory behind JSON web tokens

   •  Meet the libraries we’ll be working with

We’re going to setup JWT and magic links on our server. We’ll use Postman to test that everything works.

   •  Generate JWT tokens and learn to manage secret keys

   •  Setup a JWT authentication middleware

   •  Verify the setup via Postman and review

We need to implement the authentication flow on our client. Aside from making a login form, we also need to add support for the magic link and create a session management system that works across tabs.

   •  Setup support to handle tokens and magic links

   •  Implement session management and tab sync

   •  Implement different views for anonymous and authenticated users

Now it’s time to add missing piece of our puzzle – the login form and account creation mechanism.

   •  Setup a simple login form and hook it up to the API

   •  Create accounts for users who are logging in for the first time

   •  Use the `isAdmin` flag to protect admin-only routes on the client

We now have a working authentication model and a functional shopping cart. All that’s left is to enable our users to actually place their orders to our system. First, we need to design our schema.

   •  Explore the ecommerce ordering problem

   •  Setup a schema and an order model

   •  Discuss the value of storing redundant data in MongoDB

Now that we have a better clue of what we’re building, we can start coding. We’ll create our ordering mechanism.

   •  Hunt and fix leftover bugs

   •  Implement a multi-step form

   •  Test and review the ordering process

We took some shortcuts when developing our Orders Flow. We assumed only “the happy path.” But we have handle potential server problems and low connection speeds.

   •  Explore what could go wrong in our process

   •  Refactor our client’s API requests

   •  Implement loading states and error indicators

The only thing left to do is implement a page where the user can see all their past orders. This is a good chance to review all the techniques we’ve learnt so far.

   •  Implement a secure order history endpoint

   •  Implement the order history API

   •  Create an unique page design by using existing components

Typesafety and JavaScript don’t go together out of the box. Solution like Flow and TypeScript require a lot investment and are not beginner friendly. But, there is an alternative in the form of React PropTypes.

   •  Learn about the value of using PropTypes

   •  Refactor existing components to use PropTypes

   •  Explore advanced usage examples

We’ve seen how we can test our backend. But how to we write tests for our frontend components? We’ll use Jest and React testing library to answer that question.

   •  Setup react testing library and design our tests

   •  Write tests that validate rendered markup

   •  Write tests that validate interactivity

Unit tests are great, but often very tedious to write and maintain. Snapshot tests, on the other hand, provide huge benefits for a fraction of the effort.

   •  Learn about the concepts of snapshot testing

   •  Setup react test renderer for snapshot testing

   •  Write snapshot tests and learn to work with them

We’re going to add a new feature to our web application – featured products. This will be a good chance to explore the concept of React functional components.

   •  Implement the featured products on our server

   •  Learn how to write and use React functional components

   •  Explore the benefits of using RFC over regular components

We’re going back to our backend to examine some best practices for handling security and performance.

   •  Learn about basic security and common attacks with helmet

   •  Learn about compression and how to set it up

   •  See why setting NODE_ENV to production is so important

Now that you’ve completed the course, you must be wondering – what’s next? We’ll go over what you can take as your next steps on full stack journey.

   •  Should you be a jack of all trades?

   •  Ideas on what to specialize in

   •  Review of alternative frameworks and MERN boilerplate starters