O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-On MERN Stack Web Development

Video Description

uild production-grade web apps and APIs with MERN stack

About This Video

  • Jump into the world of full-stack development by building a fully-featured web application with the MERN stack
  • Gain the skills to write RESTful web services with Node.js, Express, and MongoDB
  • Learn how to build Single-Page Applications using React that interact with your backend services

In Detail

There's a growing demand for full-stack developers, but becoming one is not an easy task. A full-stack engineer is expected to have frontend and backend skills, as well as extensive knowledge of build tools and deployment workflow.

Building real-world projects and understanding the MERN stack is a great way to become a full-stack engineer. So, the journey starts by taking you through the MERN stack to explore Node.js and Express and set up the groundwork for the project. It's vital to store data safely hence we dive into the world of MongoDB and integrate it with our backend. Now, we build a client application that can consume API services. With React you'll be able to solve the two most daunting frontend problems and use JSON Web Tokens (JWTs) to integrate authentication and session management on both the client and the server. Finally, we review the skills that you've acquired throughout the course, look into the MERN boilerplate, and examine the application's architecture to build applications on it.

By the end of the course, you will not only have built a fully functional web application, but you'll also be well on your way to becoming a full-stack web developer. You'll be equipped with a deeper knowledge of the MERN stack, as well as general web development patterns and concepts.

The code bundle for this video course is available at https://github.com/PacktPublishing/Hands-on-MERN-Stack-Web-Development

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Chapter 1 : Welcome to the MERN Stack
    1. The Course Overview 00:06:23
    2. Using Package Managers and the Command Line 00:07:14
    3. So, What’s MERN Anyway? 00:04:03
    4. A Brief Look at the Backend 00:05:36
    5. The Frontend Architecture 00:05:34
  2. Chapter 2 : Learn Node.js and Express
    1. Your First Steps with Node.js 00:04:50
    2. Setting Up Express 00:05:42
    3. An Intro to REST, RESTful Service, and Domain Data Modeling 00:05:46
    4. Handling GET, POST, PUT, and DELETE Requests 00:05:35
    5. Creating and Using Express Middleware 00:04:25
    6. Setting Up Unit Tests with Jest 00:06:29
    7. Using Postman to Develop APIs Faster 00:02:52
  3. Chapter 3 : Using MongoDB for the Database Layer
    1. An Introduction to MongoDB and NoSQL Databases 00:06:03
    2. Our New Project Structure and MongoDB Setup via Docker 00:06:20
    3. Connecting MongoDB to Our Node/Express Backend 00:05:06
    4. Reading Real Data from Our API 00:06:18
    5. Creating, Updating, and Deleting Data 00:03:51
    6. Filtering Data with MongoDB 00:03:53
    7. Refactoring and Improving Our Code 00:05:28
  4. Chapter 4 : Building the Client with React
    1. A Gentle Primer to the World of React 00:03:35
    2. Hit the Ground Running with Create React App 00:05:42
    3. Creating Your First UI Components with JSX 00:05:54
    4. Data Flow with State and Props 00:06:16
    5. Creating a Reusable Component for Our Web Store 00:05:19
    6. Dynamic List Components 00:05:56
    7. Creating and Controlling Input Fields 00:07:09
    8. Controlling Buttons and Forms 00:06:00
  5. Chapter 5 : React App Architecture
    1. Routing with React Router 00:07:22
    2. Configuring CORS in Express 00:01:46
    3. Requesting Data from Our API 00:07:53
    4. Creating the Category and Product View 00:03:55
    5. Building a Persistent Shopping Cart 00:09:26
    6. Protected Client-Side Admin User Routes 00:05:10
  6. Chapter 6 : Full Stack Web Development with the MERN Stack
    1. JSON Web Tokens and the User Authentication Model 00:04:46
    2. Implementing Magic Links and Passwordless Login 00:10:14
    3. Implementing Passwordless Login on the Frontend 00:07:36
    4. Account Creation 00:06:23
    5. Designing the Orders Schema and User Flow 00:03:39
    6. Implementing the Orders Flow 00:09:10
    7. Error Handling and Loading States 00:10:02
    8. Building the Orders History Page 00:04:51
  7. Chapter 7 : Refactoring and Polishing Our Web Application
    1. Typechecking React Components with PropTypes 00:06:18
    2. Testing React Components 00:05:02
    3. Jest Snapshot Tests 00:03:40
    4. React Functional Components and Making Featured Products 00:05:51
    5. Express Best Practices 00:04:49
    6. Frameworks, Boilerplates, and What to Learn Next 00:04:58