MERN Stack Tutorial: Learn MongoDB, Express, React, Node.js

📚 Course Contents:
Ep 1: Introduction
Overview of the MERN Stack

Setting up the development environment
Creating your first MongoDB database

Ep 3: Express Setup
Creating your first Express application
Booting up the server

Ep 4: Express Routing
Understanding routing in Express
Setting up GET, POST, PUT, DELETE routes

Ep 5: Frontend Connection
Connecting the backend to the frontend
Introduction to API integration

Ep 6-8: Building React Pages
Setting up a React application
Creating components and pages
Managing state with React Hooks

Ep 9-10: Authorization/Authentication
Implementing user authentication
Protecting routes with JWT

Ep 11: Media Management
Handling image uploads
Integrating media management in your application

Ep 12: CSS Styling with Tailwind
Introduction to Tailwind CSS
Styling your application with Tailwind

💡 What You'll Learn:
Building dynamic user interfaces with React
Implementing user authentication and authorization
Managing media uploads and styling applications with Tailwind CSS

🔗 Useful Links:

📅 Schedule:
New tutorials every week! Subscribe and hit the bell icon to get notified.

Timestamps:
0:00 - Intro
0:18 - MERN Overview
4:25 - Course Structure
6:17 - Environment Setup
11:21 - MongoDB Setup
14:24 - Connecting Mongo to Code
19:29 - Creating a database + Sample entries
23:38 - IP Configuration
30:44 - Starting server
37:06 - Express Explained
41:55 - CRUD Operations
44:55 - Retrieve All
52:35 - Retrieve One
56:50 - Create One
1:00:25 - Update One
1:03:26 - Delete One
1:04:36 - Mounting/Testing
1:07:48 - Launching Frontend
1:10:49 - Testing Backend Routes
1:23:17 - Frontend API Functions
1:32:33 - Implementing API Functions
1:39:28 - Creating Pages
1:43:53 - Frontend Routing
1:51:19 - Dynamic Routing
1:52:55 - Navbar
2:03:43 - Rendering Navbar
2:07:06 - Home page
2:15:00 - Blog Card
2:24:08 - Sorting by Date
2:24:53 - Dynamic Routing (ReadBlog)
2:27:44 - ReadBlog Page
2:38:24 - CreateBlog Page
2:50:41 - About/Contact Page
2:53:15 - Creating User Collection
2:54:33 - Creating User Routes
2:59:55 - Creating a User
3:09:17 - Password Security
3:13:56 - Creating a User
3:18:39 - Login Authentication
3:24:41 - Login API Call
3:27:43 - Landing Page
3:34:01 - Authentication Token
3:44:51 - Axios authorization
3:48:45 - Backend Authentication Verification
3:57:39 - Authentication Testing
4:02:57 - Redirecting unauthorized pages
4:05:14 - Logout button
4:07:28 - Author field
4:09:44 - Profile page
4:18:57 - Creating an AWS bucket
4:23:25 - AWS Backend Code
4:27:08 - AWS Credentials
4:31:00 - AWS Routes
4:39:24 - AWS API Calls
4:45:55 - AWS - Mongo Connection
4:53:25 - Image upload
5:02:13 - ERROR FIX
5:04:16 - Displaying image
5:05:00 - Shadcn/Tailwind Setup
5:11:33 - Landing page
5:18:59 - Navbar
5:24:00 - BlogCard
5:27:29 - Home Page
5:28:41 - ReadBlog Page
5:34:38 - CreateBlog Page
5:40:23 - About/Contact Page
5:45:45 - Profile Page
5:50:40 - Styling Overview

[SethT-yx]

Really appreciate the way you're teaching this. So many tutorials out there just regurgitate code without explaining the idea behind them. You actually take time to explain the reasoning behind the code which has been great. Very much appreciated!

[JyotiskaSaha]

this is such a nice tutorial, I dont know why it has so less exposure

[saikruthin-pgjj]

hope you post more like this. i gain so much knowledge ❤😀

[alisher.m]

You are truly a fantastic teacher, please release more courses!

[nsabhiram]

I haven't started mern till now even though I wanted to. Your video genuinely caught my eye and am doing mern cuz of you.. Also, thank you so much for this much explanation along with the errors. Others just cut the part of all that but you are great.. Keep going....

[snnyv]

Thank you! For sharing. I'll go through this course not knowing much about mongodb, node and express. Liked and subscribed.

[jaegercrown]

Thank you for this tutorial and thanks for using tailwind css

[SethT-yx]

For anyone running into errors after an AWS first-time setup, here's 2 things I had to do that the tutorial didn't cover:

1. When you create the user, you give that user a new permissions policy with the PutObject, GetObject, and DeleteObject actions allowed. Without these permissions, you'll get an error saying access was denied from AWS.

2. Object versioning was not enabled for my S3 storage by default. That meant that AWS was not returning a VersionId field in the response for our post call. Go to your s3 storage, click on Properties tab, then enable Bucket Versioning. I know quickly after this, he showed that you could just use the image filename itself as an id instead of the VersionId, but still putting this info here in case anyone would rather use VersionId still.

After doing these 2 things, my app was finally able to create posts with a proper image ids.

[cheseedsharonbangura]

Please try providing the source code on github. Thanks, and I appreciate every single bit of your hard work.

[anon_nomis]

Is the source available? I'm a noob and I find it easier to follow when I'm not pausing constantly to furiously type code and catch up.

[devonglide]

Nice video. I'm constantly getting "key prop" errors though. Anyone else experiencing the same? Full warning is "Home.jsx:16 Warning: Each child in a list should have a unique "key" prop."

[avijitgoswami]

Appreciate your hard work. I have a request, if possible please provide the Source Code. It's healp us to follow along properly. Thank you!

[xtremxthereal]

Nice work! Is there any public github repo to check the final product? Had some problems with the image display and dunno why.

[nsabhiram]

Hello. I have an understanding of only React and Mongo.. I only have theoretical knowledge of node and express. Can I watch this directly to learn mern??

[bilal]

Is it is good practice to store token in session storage many sy no cookie is good

[nobody...]

fullstack also includes devops right ?is there admin panel also ?