MERN Stack - The Complete Guide

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

Welcome to MERN Stack - The Complete Guide!

The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”).

This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment.

What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding—

We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way.

WHAT DOES THE APP FEATURE?

  • Complete User Authentication (Login / Signup)

  • Image and File Uploads

  • Server-side Rendering

  • Pagination

  • Payment Processing

  • Complete Node API w/ Full CRUD Functionality

  • Authorization and Managing Multiple User Roles (guest, user, admin)

  • Responsive + Mobile-First Design

  • Attractive + Responsive App Interface

  • Complete App Deployment with Zeit Now

WHAT CONCEPTS ARE COVERED?

  • React Hooks throughout the Entire App

  • Core Node.js / Express Concepts

  • Creating an Entire Express API from Scratch

  • Next.js version 9 with API Routes

  • Linking together React Client + Express API

  • User authentication with JWT and Cookies

  • Role-based access control with multiple user types

  • Lots of data fetching on the client / server

  • Password hashing with bcrypt

  • Process payments with Stripe API

  • Dynamically upload images with Cloudinary API

  • Modeling database content with Mongoose Schemas

  • Creating Impressive UIs with Semantic UI React

  • Querying / Mutating Data with Mongoose

  • Tons of Mongoose Methods / Operators

  • Pagination with MongoDB

  • Async / Await + Essential Error Handling Patterns

  • Managing MongoDB database with the Atlas Interface

  • App Deployment with Serverless Deployment Service Now

  • Protecting private client routes with Next.js / React

  • Securing private data with environment variables

  • Validating Requests in Node / Express Apps

  • What HTTP status codes Mean and When to Use Them

  • The Latest JavaScript: ES6/ES7/ES8/ESNext

  • And much more...

Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together.

No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course.

There’s never been a better time to learn MERN, so join me and let’s get started.

Who this course is for:

  • React / Node / JavaScript developers of all skill levels
  • React developers learning how to build apps with the latest techniques
  • Node developers looking to learn more about front-end technologies (i.e. React / Nextjs)

Instructor

Professional Web and Mobile Developer
  • 4.4 Instructor Rating
  • 8,874 Reviews
  • 40,258 Students
  • 20 Courses

I am a professional developer with a passion for learning and teaching everything I know.

I believe in learning through doing and this philosophy is present in every course that I teach.

I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry.

Looking forward to seeing you inside one of my courses!

Expected Outcomes

  1. How to build full-stack apps with MongoDB, React, Express and Node Create practical real-world apps from front to back Best practices as a JavaScript developer (in React / Node) How to utilize latest features of the JavaScript ecosystem A deep understanding of the programming Concepts presented in the course Curated for the Udemy Business collection Course content 13 sections • 43 lectures • 8h 32m total length Expand all sections Getting Started 3 lectures • 11min What Is The MERN Stack? Preview 04:32 Final App Preview Preview 04:49 What You'll Need For This Course Preview 01:20 Working with React + Next.js 5 lectures • 39min Getting Starting Files Preview 02:02 Intro to Next.js, Project Structure 11:16 Create App Layout, Build Header 16:25 Get Route Data from useRouter Hook, Create Active Links 03:55 Visualize Route Changes with Progress Bar Preview 05:12 Creating API with Node + Express 2 lectures • 26min Intro to Node + Express with API Routes Preview 17:04 Fetching Data on the Server with getInitialProps 08:45 Using MongoDB with Atlas 3 lectures • 45min Configure Mongo Atlas, Connect to Database 16:57 Create Products Collection, Model Product Data 17:52 Build Product Cards, Make Components Responsive 09:47 Fetching App Data from API 3 lectures • 26min Get Product By Id 11:42 Style Product Detail Page 08:51 Base Url Helper 05:00 Adding CRUD Functionality, Uploading Image Files 3 lectures • 1hr 4min Delete Product 19:15 Create Product Form 23:42 Upload Product Image, Post Product 20:58 Handling Errors on the Client + Server 2 lectures • 30min Prevent, Catch Errors on Client, Server 22:39 Structure Cart Page 06:52 Authenticating Users with JWT + Cookies 5 lectures • 1hr 3min Build Login, Signup Forms 17:41 Model User, Signup User with JWT + Cookies 23:52 Validate Post Content on Server 05:10 Add Login Functionality 08:47 Create User Cart Upon Signup 07:26 Authorization and Protecting Content 4 lectures • 34min Get Current User from Token, Protect Auth Routes 17:17 Handle Invalid Auth Tokens 02:50 Logout User, Protect Admin Routes, Hide Protected Content 09:28 Universal Logout using LocalStorage 04:14 Cart Management and Checkout 5 lectures • 1hr 36min Fetch User Cart 12:30 Add Products to Cart 31:25 Style Cart Products. Calculate Total 18:15 Removing Cart Products 08:51 Checkout Customer Carts 25:00 3 more sections Requirements Basic experience with React Knowledge of React Hooks is Helpful Description Welcome to MERN Stack - The Complete Guide! The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”). This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment. What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding— We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way. WHAT DOES THE APP FEATURE? Complete User Authentication (Login / Signup) Image and File Uploads Server-side Rendering Pagination Payment Processing Complete Node API w/ Full CRUD Functionality Authorization and Managing Multiple User Roles (guest, user, admin) Responsive + Mobile-First Design Attractive + Responsive App Interface Complete App Deployment with Zeit Now WHAT CONCEPTS ARE COVERED? React Hooks throughout the Entire App Core Node.js / Express Concepts Creating an Entire Express API from Scratch Next.js version 9 with API Routes Linking together React Client + Express API User authentication with JWT and Cookies Role-based access control with multiple user types Lots of data fetching on the client / server Password hashing with bcrypt Process payments with Stripe API Dynamically upload images with Cloudinary API Modeling database content with Mongoose Schemas Creating Impressive UIs with Semantic UI React Querying / Mutating Data with Mongoose Tons of Mongoose Methods / Operators Pagination with MongoDB Async / Await + Essential Error Handling Patterns Managing MongoDB database with the Atlas Interface App Deployment with Serverless Deployment Service Now Protecting private client routes with Next.js / React Securing private data with environment variables Validating Requests in Node / Express Apps What HTTP status codes Mean and When to Use Them The Latest JavaScript: ES6/ES7/ES8/ESNext And much more... Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together. No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course. There’s never been a better time to learn MERN, so join me and let’s get started. Who this course is for: React / Node / JavaScript developers of all skill levels React developers learning how to build apps with the latest techniques Node developers looking to learn more about front-end technologies (i.e. React / Nextjs) Show more Show less Featured review Derrick James 12 courses 3 reviews Rating: 4.5 out of 5 a year ago The author was very articulate, knowledgeable and well versed in modern usage of JavaScript. To improve the course, I'd suggest that the author adds testing as part of the topics for this course or create a new course for Test Driven Development (TDD). I pretty much enjoyed this course! Show more Show less Instructor Reed Barger Professional Web and Mobile Developer 4.4 Instructor Rating 8,874 Reviews 40,258 Students 20 Courses I am a professional developer with a passion for learning and teaching everything I know. I believe in learning through doing and this philosophy is present in every course that I teach. I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry. Looking forward to seeing you inside one of my courses! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777989fb9264065',m:'54b409e5978e66e91c949064e639da050e530d3f-1627742577-1800-AW4QMM2K/SFddhaUDhYsYLqDD1TWMZ0mrTDeXkr62zA/ETo8txN8fztp+0tiJPolygjHF1fBgP2uK5i+VrrjiCc/zB5VsSl7Cjuckhk14lEv2PhFqiB39WLkWyfr8ldWuLrgNh5+nrLeN7TvoytC3bP55wwQbyESf9tUY4ouf3ml',s:[0xccbef4b9c9,0xba009a879d],}})();
  2. Create practical real-world apps from front to back Best practices as a JavaScript developer (in React / Node) How to utilize latest features of the JavaScript ecosystem A deep understanding of the programming Concepts presented in the course Curated for the Udemy Business collection Course content 13 sections • 43 lectures • 8h 32m total length Expand all sections Getting Started 3 lectures • 11min What Is The MERN Stack? Preview 04:32 Final App Preview Preview 04:49 What You'll Need For This Course Preview 01:20 Working with React + Next.js 5 lectures • 39min Getting Starting Files Preview 02:02 Intro to Next.js, Project Structure 11:16 Create App Layout, Build Header 16:25 Get Route Data from useRouter Hook, Create Active Links 03:55 Visualize Route Changes with Progress Bar Preview 05:12 Creating API with Node + Express 2 lectures • 26min Intro to Node + Express with API Routes Preview 17:04 Fetching Data on the Server with getInitialProps 08:45 Using MongoDB with Atlas 3 lectures • 45min Configure Mongo Atlas, Connect to Database 16:57 Create Products Collection, Model Product Data 17:52 Build Product Cards, Make Components Responsive 09:47 Fetching App Data from API 3 lectures • 26min Get Product By Id 11:42 Style Product Detail Page 08:51 Base Url Helper 05:00 Adding CRUD Functionality, Uploading Image Files 3 lectures • 1hr 4min Delete Product 19:15 Create Product Form 23:42 Upload Product Image, Post Product 20:58 Handling Errors on the Client + Server 2 lectures • 30min Prevent, Catch Errors on Client, Server 22:39 Structure Cart Page 06:52 Authenticating Users with JWT + Cookies 5 lectures • 1hr 3min Build Login, Signup Forms 17:41 Model User, Signup User with JWT + Cookies 23:52 Validate Post Content on Server 05:10 Add Login Functionality 08:47 Create User Cart Upon Signup 07:26 Authorization and Protecting Content 4 lectures • 34min Get Current User from Token, Protect Auth Routes 17:17 Handle Invalid Auth Tokens 02:50 Logout User, Protect Admin Routes, Hide Protected Content 09:28 Universal Logout using LocalStorage 04:14 Cart Management and Checkout 5 lectures • 1hr 36min Fetch User Cart 12:30 Add Products to Cart 31:25 Style Cart Products. Calculate Total 18:15 Removing Cart Products 08:51 Checkout Customer Carts 25:00 3 more sections Requirements Basic experience with React Knowledge of React Hooks is Helpful Description Welcome to MERN Stack - The Complete Guide! The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”). This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment. What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding— We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way. WHAT DOES THE APP FEATURE? Complete User Authentication (Login / Signup) Image and File Uploads Server-side Rendering Pagination Payment Processing Complete Node API w/ Full CRUD Functionality Authorization and Managing Multiple User Roles (guest, user, admin) Responsive + Mobile-First Design Attractive + Responsive App Interface Complete App Deployment with Zeit Now WHAT CONCEPTS ARE COVERED? React Hooks throughout the Entire App Core Node.js / Express Concepts Creating an Entire Express API from Scratch Next.js version 9 with API Routes Linking together React Client + Express API User authentication with JWT and Cookies Role-based access control with multiple user types Lots of data fetching on the client / server Password hashing with bcrypt Process payments with Stripe API Dynamically upload images with Cloudinary API Modeling database content with Mongoose Schemas Creating Impressive UIs with Semantic UI React Querying / Mutating Data with Mongoose Tons of Mongoose Methods / Operators Pagination with MongoDB Async / Await + Essential Error Handling Patterns Managing MongoDB database with the Atlas Interface App Deployment with Serverless Deployment Service Now Protecting private client routes with Next.js / React Securing private data with environment variables Validating Requests in Node / Express Apps What HTTP status codes Mean and When to Use Them The Latest JavaScript: ES6/ES7/ES8/ESNext And much more... Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together. No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course. There’s never been a better time to learn MERN, so join me and let’s get started. Who this course is for: React / Node / JavaScript developers of all skill levels React developers learning how to build apps with the latest techniques Node developers looking to learn more about front-end technologies (i.e. React / Nextjs) Show more Show less Featured review Derrick James 12 courses 3 reviews Rating: 4.5 out of 5 a year ago The author was very articulate, knowledgeable and well versed in modern usage of JavaScript. To improve the course, I'd suggest that the author adds testing as part of the topics for this course or create a new course for Test Driven Development (TDD). I pretty much enjoyed this course! Show more Show less Instructor Reed Barger Professional Web and Mobile Developer 4.4 Instructor Rating 8,874 Reviews 40,258 Students 20 Courses I am a professional developer with a passion for learning and teaching everything I know. I believe in learning through doing and this philosophy is present in every course that I teach. I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry. Looking forward to seeing you inside one of my courses! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777989fb9264065',m:'54b409e5978e66e91c949064e639da050e530d3f-1627742577-1800-AW4QMM2K/SFddhaUDhYsYLqDD1TWMZ0mrTDeXkr62zA/ETo8txN8fztp+0tiJPolygjHF1fBgP2uK5i+VrrjiCc/zB5VsSl7Cjuckhk14lEv2PhFqiB39WLkWyfr8ldWuLrgNh5+nrLeN7TvoytC3bP55wwQbyESf9tUY4ouf3ml',s:[0xccbef4b9c9,0xba009a879d],}})();
  3. Best practices as a JavaScript developer (in React / Node) How to utilize latest features of the JavaScript ecosystem A deep understanding of the programming Concepts presented in the course Curated for the Udemy Business collection Course content 13 sections • 43 lectures • 8h 32m total length Expand all sections Getting Started 3 lectures • 11min What Is The MERN Stack? Preview 04:32 Final App Preview Preview 04:49 What You'll Need For This Course Preview 01:20 Working with React + Next.js 5 lectures • 39min Getting Starting Files Preview 02:02 Intro to Next.js, Project Structure 11:16 Create App Layout, Build Header 16:25 Get Route Data from useRouter Hook, Create Active Links 03:55 Visualize Route Changes with Progress Bar Preview 05:12 Creating API with Node + Express 2 lectures • 26min Intro to Node + Express with API Routes Preview 17:04 Fetching Data on the Server with getInitialProps 08:45 Using MongoDB with Atlas 3 lectures • 45min Configure Mongo Atlas, Connect to Database 16:57 Create Products Collection, Model Product Data 17:52 Build Product Cards, Make Components Responsive 09:47 Fetching App Data from API 3 lectures • 26min Get Product By Id 11:42 Style Product Detail Page 08:51 Base Url Helper 05:00 Adding CRUD Functionality, Uploading Image Files 3 lectures • 1hr 4min Delete Product 19:15 Create Product Form 23:42 Upload Product Image, Post Product 20:58 Handling Errors on the Client + Server 2 lectures • 30min Prevent, Catch Errors on Client, Server 22:39 Structure Cart Page 06:52 Authenticating Users with JWT + Cookies 5 lectures • 1hr 3min Build Login, Signup Forms 17:41 Model User, Signup User with JWT + Cookies 23:52 Validate Post Content on Server 05:10 Add Login Functionality 08:47 Create User Cart Upon Signup 07:26 Authorization and Protecting Content 4 lectures • 34min Get Current User from Token, Protect Auth Routes 17:17 Handle Invalid Auth Tokens 02:50 Logout User, Protect Admin Routes, Hide Protected Content 09:28 Universal Logout using LocalStorage 04:14 Cart Management and Checkout 5 lectures • 1hr 36min Fetch User Cart 12:30 Add Products to Cart 31:25 Style Cart Products. Calculate Total 18:15 Removing Cart Products 08:51 Checkout Customer Carts 25:00 3 more sections Requirements Basic experience with React Knowledge of React Hooks is Helpful Description Welcome to MERN Stack - The Complete Guide! The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”). This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment. What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding— We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way. WHAT DOES THE APP FEATURE? Complete User Authentication (Login / Signup) Image and File Uploads Server-side Rendering Pagination Payment Processing Complete Node API w/ Full CRUD Functionality Authorization and Managing Multiple User Roles (guest, user, admin) Responsive + Mobile-First Design Attractive + Responsive App Interface Complete App Deployment with Zeit Now WHAT CONCEPTS ARE COVERED? React Hooks throughout the Entire App Core Node.js / Express Concepts Creating an Entire Express API from Scratch Next.js version 9 with API Routes Linking together React Client + Express API User authentication with JWT and Cookies Role-based access control with multiple user types Lots of data fetching on the client / server Password hashing with bcrypt Process payments with Stripe API Dynamically upload images with Cloudinary API Modeling database content with Mongoose Schemas Creating Impressive UIs with Semantic UI React Querying / Mutating Data with Mongoose Tons of Mongoose Methods / Operators Pagination with MongoDB Async / Await + Essential Error Handling Patterns Managing MongoDB database with the Atlas Interface App Deployment with Serverless Deployment Service Now Protecting private client routes with Next.js / React Securing private data with environment variables Validating Requests in Node / Express Apps What HTTP status codes Mean and When to Use Them The Latest JavaScript: ES6/ES7/ES8/ESNext And much more... Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together. No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course. There’s never been a better time to learn MERN, so join me and let’s get started. Who this course is for: React / Node / JavaScript developers of all skill levels React developers learning how to build apps with the latest techniques Node developers looking to learn more about front-end technologies (i.e. React / Nextjs) Show more Show less Featured review Derrick James 12 courses 3 reviews Rating: 4.5 out of 5 a year ago The author was very articulate, knowledgeable and well versed in modern usage of JavaScript. To improve the course, I'd suggest that the author adds testing as part of the topics for this course or create a new course for Test Driven Development (TDD). I pretty much enjoyed this course! Show more Show less Instructor Reed Barger Professional Web and Mobile Developer 4.4 Instructor Rating 8,874 Reviews 40,258 Students 20 Courses I am a professional developer with a passion for learning and teaching everything I know. I believe in learning through doing and this philosophy is present in every course that I teach. I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry. Looking forward to seeing you inside one of my courses! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777989fb9264065',m:'54b409e5978e66e91c949064e639da050e530d3f-1627742577-1800-AW4QMM2K/SFddhaUDhYsYLqDD1TWMZ0mrTDeXkr62zA/ETo8txN8fztp+0tiJPolygjHF1fBgP2uK5i+VrrjiCc/zB5VsSl7Cjuckhk14lEv2PhFqiB39WLkWyfr8ldWuLrgNh5+nrLeN7TvoytC3bP55wwQbyESf9tUY4ouf3ml',s:[0xccbef4b9c9,0xba009a879d],}})();
  4. How to utilize latest features of the JavaScript ecosystem A deep understanding of the programming Concepts presented in the course Curated for the Udemy Business collection Course content 13 sections • 43 lectures • 8h 32m total length Expand all sections Getting Started 3 lectures • 11min What Is The MERN Stack? Preview 04:32 Final App Preview Preview 04:49 What You'll Need For This Course Preview 01:20 Working with React + Next.js 5 lectures • 39min Getting Starting Files Preview 02:02 Intro to Next.js, Project Structure 11:16 Create App Layout, Build Header 16:25 Get Route Data from useRouter Hook, Create Active Links 03:55 Visualize Route Changes with Progress Bar Preview 05:12 Creating API with Node + Express 2 lectures • 26min Intro to Node + Express with API Routes Preview 17:04 Fetching Data on the Server with getInitialProps 08:45 Using MongoDB with Atlas 3 lectures • 45min Configure Mongo Atlas, Connect to Database 16:57 Create Products Collection, Model Product Data 17:52 Build Product Cards, Make Components Responsive 09:47 Fetching App Data from API 3 lectures • 26min Get Product By Id 11:42 Style Product Detail Page 08:51 Base Url Helper 05:00 Adding CRUD Functionality, Uploading Image Files 3 lectures • 1hr 4min Delete Product 19:15 Create Product Form 23:42 Upload Product Image, Post Product 20:58 Handling Errors on the Client + Server 2 lectures • 30min Prevent, Catch Errors on Client, Server 22:39 Structure Cart Page 06:52 Authenticating Users with JWT + Cookies 5 lectures • 1hr 3min Build Login, Signup Forms 17:41 Model User, Signup User with JWT + Cookies 23:52 Validate Post Content on Server 05:10 Add Login Functionality 08:47 Create User Cart Upon Signup 07:26 Authorization and Protecting Content 4 lectures • 34min Get Current User from Token, Protect Auth Routes 17:17 Handle Invalid Auth Tokens 02:50 Logout User, Protect Admin Routes, Hide Protected Content 09:28 Universal Logout using LocalStorage 04:14 Cart Management and Checkout 5 lectures • 1hr 36min Fetch User Cart 12:30 Add Products to Cart 31:25 Style Cart Products. Calculate Total 18:15 Removing Cart Products 08:51 Checkout Customer Carts 25:00 3 more sections Requirements Basic experience with React Knowledge of React Hooks is Helpful Description Welcome to MERN Stack - The Complete Guide! The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”). This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment. What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding— We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way. WHAT DOES THE APP FEATURE? Complete User Authentication (Login / Signup) Image and File Uploads Server-side Rendering Pagination Payment Processing Complete Node API w/ Full CRUD Functionality Authorization and Managing Multiple User Roles (guest, user, admin) Responsive + Mobile-First Design Attractive + Responsive App Interface Complete App Deployment with Zeit Now WHAT CONCEPTS ARE COVERED? React Hooks throughout the Entire App Core Node.js / Express Concepts Creating an Entire Express API from Scratch Next.js version 9 with API Routes Linking together React Client + Express API User authentication with JWT and Cookies Role-based access control with multiple user types Lots of data fetching on the client / server Password hashing with bcrypt Process payments with Stripe API Dynamically upload images with Cloudinary API Modeling database content with Mongoose Schemas Creating Impressive UIs with Semantic UI React Querying / Mutating Data with Mongoose Tons of Mongoose Methods / Operators Pagination with MongoDB Async / Await + Essential Error Handling Patterns Managing MongoDB database with the Atlas Interface App Deployment with Serverless Deployment Service Now Protecting private client routes with Next.js / React Securing private data with environment variables Validating Requests in Node / Express Apps What HTTP status codes Mean and When to Use Them The Latest JavaScript: ES6/ES7/ES8/ESNext And much more... Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together. No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course. There’s never been a better time to learn MERN, so join me and let’s get started. Who this course is for: React / Node / JavaScript developers of all skill levels React developers learning how to build apps with the latest techniques Node developers looking to learn more about front-end technologies (i.e. React / Nextjs) Show more Show less Featured review Derrick James 12 courses 3 reviews Rating: 4.5 out of 5 a year ago The author was very articulate, knowledgeable and well versed in modern usage of JavaScript. To improve the course, I'd suggest that the author adds testing as part of the topics for this course or create a new course for Test Driven Development (TDD). I pretty much enjoyed this course! Show more Show less Instructor Reed Barger Professional Web and Mobile Developer 4.4 Instructor Rating 8,874 Reviews 40,258 Students 20 Courses I am a professional developer with a passion for learning and teaching everything I know. I believe in learning through doing and this philosophy is present in every course that I teach. I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry. Looking forward to seeing you inside one of my courses! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777989fb9264065',m:'54b409e5978e66e91c949064e639da050e530d3f-1627742577-1800-AW4QMM2K/SFddhaUDhYsYLqDD1TWMZ0mrTDeXkr62zA/ETo8txN8fztp+0tiJPolygjHF1fBgP2uK5i+VrrjiCc/zB5VsSl7Cjuckhk14lEv2PhFqiB39WLkWyfr8ldWuLrgNh5+nrLeN7TvoytC3bP55wwQbyESf9tUY4ouf3ml',s:[0xccbef4b9c9,0xba009a879d],}})();
  5. A deep understanding of the programming Concepts presented in the course Curated for the Udemy Business collection Course content 13 sections • 43 lectures • 8h 32m total length Expand all sections Getting Started 3 lectures • 11min What Is The MERN Stack? Preview 04:32 Final App Preview Preview 04:49 What You'll Need For This Course Preview 01:20 Working with React + Next.js 5 lectures • 39min Getting Starting Files Preview 02:02 Intro to Next.js, Project Structure 11:16 Create App Layout, Build Header 16:25 Get Route Data from useRouter Hook, Create Active Links 03:55 Visualize Route Changes with Progress Bar Preview 05:12 Creating API with Node + Express 2 lectures • 26min Intro to Node + Express with API Routes Preview 17:04 Fetching Data on the Server with getInitialProps 08:45 Using MongoDB with Atlas 3 lectures • 45min Configure Mongo Atlas, Connect to Database 16:57 Create Products Collection, Model Product Data 17:52 Build Product Cards, Make Components Responsive 09:47 Fetching App Data from API 3 lectures • 26min Get Product By Id 11:42 Style Product Detail Page 08:51 Base Url Helper 05:00 Adding CRUD Functionality, Uploading Image Files 3 lectures • 1hr 4min Delete Product 19:15 Create Product Form 23:42 Upload Product Image, Post Product 20:58 Handling Errors on the Client + Server 2 lectures • 30min Prevent, Catch Errors on Client, Server 22:39 Structure Cart Page 06:52 Authenticating Users with JWT + Cookies 5 lectures • 1hr 3min Build Login, Signup Forms 17:41 Model User, Signup User with JWT + Cookies 23:52 Validate Post Content on Server 05:10 Add Login Functionality 08:47 Create User Cart Upon Signup 07:26 Authorization and Protecting Content 4 lectures • 34min Get Current User from Token, Protect Auth Routes 17:17 Handle Invalid Auth Tokens 02:50 Logout User, Protect Admin Routes, Hide Protected Content 09:28 Universal Logout using LocalStorage 04:14 Cart Management and Checkout 5 lectures • 1hr 36min Fetch User Cart 12:30 Add Products to Cart 31:25 Style Cart Products. Calculate Total 18:15 Removing Cart Products 08:51 Checkout Customer Carts 25:00 3 more sections Requirements Basic experience with React Knowledge of React Hooks is Helpful Description Welcome to MERN Stack - The Complete Guide! The MERN Stack is one the most popular ways to build powerful, full-stack apps using MongoDB, Express, React, and Node (shortened to “MERN”). This course is the best guide to mastering the MERN Stack, taking you from total beginner to full stack expert, capable of making your own impressive, fully-featured apps from scratch to deployment. What’s special about this course is that it gives you the best of both worlds; both extensive practical and conceptual understanding— We’ll cover all the essential concepts of the MERN Stack in-depth while we build a truly awesome full-stack app along the way. WHAT DOES THE APP FEATURE? Complete User Authentication (Login / Signup) Image and File Uploads Server-side Rendering Pagination Payment Processing Complete Node API w/ Full CRUD Functionality Authorization and Managing Multiple User Roles (guest, user, admin) Responsive + Mobile-First Design Attractive + Responsive App Interface Complete App Deployment with Zeit Now WHAT CONCEPTS ARE COVERED? React Hooks throughout the Entire App Core Node.js / Express Concepts Creating an Entire Express API from Scratch Next.js version 9 with API Routes Linking together React Client + Express API User authentication with JWT and Cookies Role-based access control with multiple user types Lots of data fetching on the client / server Password hashing with bcrypt Process payments with Stripe API Dynamically upload images with Cloudinary API Modeling database content with Mongoose Schemas Creating Impressive UIs with Semantic UI React Querying / Mutating Data with Mongoose Tons of Mongoose Methods / Operators Pagination with MongoDB Async / Await + Essential Error Handling Patterns Managing MongoDB database with the Atlas Interface App Deployment with Serverless Deployment Service Now Protecting private client routes with Next.js / React Securing private data with environment variables Validating Requests in Node / Express Apps What HTTP status codes Mean and When to Use Them The Latest JavaScript: ES6/ES7/ES8/ESNext And much more... Even if you’re new to React or Node, you’re in good company—you’re going to understand every line of code that we write together. No matter your skill level, this course has something for you. Whether it serves as the start of your next big project, your first production-ready MERN Stack app, or just a great addition to your developer portfolio, you’re not going to want to miss this course. There’s never been a better time to learn MERN, so join me and let’s get started. Who this course is for: React / Node / JavaScript developers of all skill levels React developers learning how to build apps with the latest techniques Node developers looking to learn more about front-end technologies (i.e. React / Nextjs) Show more Show less Featured review Derrick James 12 courses 3 reviews Rating: 4.5 out of 5 a year ago The author was very articulate, knowledgeable and well versed in modern usage of JavaScript. To improve the course, I'd suggest that the author adds testing as part of the topics for this course or create a new course for Test Driven Development (TDD). I pretty much enjoyed this course! Show more Show less Instructor Reed Barger Professional Web and Mobile Developer 4.4 Instructor Rating 8,874 Reviews 40,258 Students 20 Courses I am a professional developer with a passion for learning and teaching everything I know. I believe in learning through doing and this philosophy is present in every course that I teach. I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry. Looking forward to seeing you inside one of my courses! Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777989fb9264065',m:'54b409e5978e66e91c949064e639da050e530d3f-1627742577-1800-AW4QMM2K/SFddhaUDhYsYLqDD1TWMZ0mrTDeXkr62zA/ETo8txN8fztp+0tiJPolygjHF1fBgP2uK5i+VrrjiCc/zB5VsSl7Cjuckhk14lEv2PhFqiB39WLkWyfr8ldWuLrgNh5+nrLeN7TvoytC3bP55wwQbyESf9tUY4ouf3ml',s:[0xccbef4b9c9,0xba009a879d],}})();