MERN Stack Full Tutorial | User authentication, JWT, Node.js, MongoDB, React and more

Learn how to create a full-stack web app using the MERN stack.. You'll learn how to initialise a React App, connect it with a NodeJS Server, create a MongoDB database using mongoose and add authentication using JSON Web Token.

The MERN stack is a web development tech stack consisting of MongoDB, ExpressJS, ReactJS NodeJS and enables you to build feature-rich single page web applications using a single programming language, JavaScript. Some developers consider this to one of the key reasons why the MERN stack is so popular. You can use your proficiency in a single language to manage both the frontend and backend of your web application.

Timestamps
0:00 Video starts
0:45 Understanding MERN Stack
1:57 Initialise React app
4:20 Initialise node app
6:40 Create an express server
8:18 Build a simple app
8:36 Working with frontend
12:50 Working with backend
15:20 Working with MongoDB
24:45 react-router-dom
27:33 Authentication
40:20 Solving Errors
49:44 Outro

👉 Checkout codedamn on social:

If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.

👋 About Me:
Hey! I'm Mehul Mohan, a CSE'21 graduate from BITS Pilani, Goa. I started coding early in life, at the age of 13 when I created my first blog on Blogger. I am listed in Google, Microsoft, Sony, eSet, etc. Hall of Fame for reporting vulnerabilities in their systems.

🍎 I am Apple's WWDC'19 Scholar - visited San Francisco and attended WWDC.

🚀 Currently working on my own startup - codedamn.

Connect with me:

🏷 Video Tags:
Build a MERN Stack Application
Full MERN Stack Tutorial
Learn the MERN Stack
MERN Stack Course

[davibentim]

Awesome tutorial.

Fair warning as a beginner, it took me much longer than the 49 mins of the video to be able to code along and get everything working. There's a lot of things that were deprecated in newer versions of React and took some digging and googling to figure things out, but in the end, that made the learning better.

Also, if you just clone the repo he provided, you won't be able to follow along as well since the final code is much different than the beginning. Better to code along to understand his thought process.

Thanks for the video, Mehul

[yagami-light]

for those who are following this now, useHistory is no longer a part of react-router-dom, instead make use of useNavigate() hook such as navigate("/login", { replace: true })

[saudkhan]

i can't use 'import jwt from 'jsonwebtoken' due to a webpack v5 issue. Pleaseee helpppp ?

[mikayilgacek]

If you're watching that tutorial a few months after that video do yourself a favour and do not follow it.
Or at least try to install the node dependencies used in that video. If you're using newer versions a lot of stuff won't work.
I wasted a lot of time trying to fix NPM issues.

[devendradangare]

Strange. Installing jsonwebtoken on server side was fine. But in order to use it on the dashboard page which is in the client side. cd client and npm i jsonwebtoken is giving me tons of error about crypto and THEN USE in client u can remove it and install
>npm i jwt-decode
its work to me

[alastairtooth]

Love the video mate. Just a note though that the React-Dom-Router process you listed has since been updated in their V6. You need to add a 'Routes 'bracket around the 'Route' (as well as adding 'Routes' to your import), then swap out your 'component' for 'element', and wrap Login and Register in a self-closing tag (i.e. component={Login} becomes element={<Login />})

[ridl]

Mehul, please! Docker and all CI/CD stuff in the part 2! it would be fantastic! big please here :D
and yep, thank you!

[kirito]

u cannot just import jsonwebtoken inside react
after webpack 5. its give polyfill error

[bhavyagada]

Hey Mehul, can you make the video on how to deploy mern stack applications?
I am facing some issues each time I try and takes hours to figure out so a proper guidance would help.

[thirdyraza]

hey, i would like to know your extensions, especially in predicting the next lines. THANK YOU FOR THIS VIDEO, IT HELPED ME A LOT FOR OUR CAPSTONE PROJECT

[עידןאמברמוביץ]

Am I the only one who has problem with the line "import jwt from 'jsonwebtoken'" in the client side in the dashborad file? if anyone had this problem and was able to solve it, please let me know how!

[wallstudios]

Nice video! But I get this error when using jwt in frontend: Module not found: Error: Can't resolve 'crypto' in

[vaalarivan_p]

im getting the following error:
Uncaught ReferenceError: process is not defined in please help me resolve this error, ive searched over an hour

[leonardohurovich]

Module not found: Error: Can't resolve 'jsonwebtoken'

Do you have any idea how to solve this error? It happened when I was halfway through the authentication part

[jackielegs]

When you start implementing jwt, if you get the 'BREAKING CHANGE' error in regards to webpack 5 then do the following.

npm i jwt-decode

**instead of importing jwt from 'jsonwebtoken'**

import jwt from "jwt-decode";

[gamegem]

VM34:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON Please any one can solve it out

[ramziosta]

@15:22 I am still getting an empty object {}, I can see the data in payload in network tab in browser, and If i send a request using POSTMAN it logs it in the console and to the database

[developer_hadi]

Bro please, make a video on how to don't let any url to send requests to my api, using cors, I mean that I want only a specific urls to send requests with specific methods to my api, and also do the front end because I could implement the server but with the front end there's an error i don't know how to do the headers thing

[codencamp]

if you get this error message Error message "error:0308010C:digital envelope routines::unsupported", try writing this line on your start script: "start": "react-scripts --openssl-legacy-provider start".

if you get this error "'React' must be in scope when using JSX" try writing this to your imports:
import React, { Component being use goes here } from 'react';

[Orionzmx]

Hi you can't use 'import jwt from 'jsonwebtoken' on the frontend due to a webpack v5 issue. Does anyone know how to solve this?