Learn MERN Stack with Project in 2 Hours | MERN Stack Crash Course for Beginners

This video is a complete MERN STACK (React, Nodejs & Express) Crash Course for beginners. The video covers different Nodejs, Express, MongoDB, TypeScript, Tailwindcss and React implementation in one single project.
The video showcase the MERN Stack concepts and their use in practical project. The Project also help us to learn how we connect the frontend and backend app. How is the project structure and API integration.
We will build an URL shortener app.

⭐️ Support my channel⭐️

⭐️ Full Source Code ⭐️

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:18 - Topics to Cover
0:02:08 - Project Architecture
0:06:07 - Installing Dependencies
0:06:55 - Create Express Server
0:10:24 - Adding TypeScript to Project
0:14:47 - Nodemon & TS-NODE config setup
0:17:16 - Connect app to Mongodb database
0:21:23 - Adding middleware to project
0:22:32 - Adding API Routes
0:25:27 - Adding Controller and Functions
0:25:59 - Adding Model with Mongoose Schema
0:29:11 - Controller Functions and MongoDb operations
0:31:15 - Add Create Short URL Function
0:34:06 - Add Get All URLs Function
0:37:11 - Add Get URL Function
0:39:11 - Add Delete URL Function
0:40:25 - API Testing
0:42:33 - Project Setup using VITE
0:46:05 - Adding Tailwind css to Project
0:46:47 - Header & Footer Component
0:53:24 - Adding Container Component
0:55:48 - Adding Form component
1:06:53 - Form Handling
1:08:50 - Axios API integration - Create Short URL
1:13:05 - Adding Data Table Component
1:17:05 - Axios API integration Fetch Short URLs
1:22:42 - Render Data Table List
1:26:53 - Adding Icons using Heroicons
1:28:50 - Copy clipboard feature
1:30:40 - Delete Short URL
1:32:50 - Re-render Container Component
1:38:25 - Sort Data in MongoDB
1:40:20 - Outro

⭐️ Crash Courses ⭐️

🔗 Social Medias 🔗

⭐️ Tags ⭐️

⭐️ Hashtags ⭐️
#nodejs #express #react #mernstack #projects #beginners

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[MuhammadRafiq-fxzz]

You were from whom I learned Backend and now I will learned and improve backend, great sir keep it up

[sdawdwadaufyuaiudi]

thank, just in time to restart myseft and start to get a job

[engineer]

if you have provided project demo in starting then it will really save me . i am your fan of how you structure these 2 hours video i really love your node video of contact manager with user authentication

[HSNMSD]

brother i am front end beginner student : I watched your video till 22:41 from start to end you have remembered what you setup, what deb dependencies, how to connect json and create config files and connect to mongoose this all are the game of practice or just you are know the it will this way.

what in the industries do when need to work on project they need to setup and config in every employees system this things

please tell me bro.

how do you learn to connect this flow you building projects is like you are the real developer or hacker.

i'm really not kidding bro you are typing is also very accurate and fast to manage time.

i like this video than any other youtuber bro and learned

what is the type of dependencies in node js
how to connect to database and handle errors in files
and nodejs cmds

[regilearn]

For next project please use tanstack tables and inline edit those row column data

[TheEmmanuelN]

Thank you Dipesh! Have you considered to do a PostgresSQL project? aka - PERN

[mayanksh]

Nice project. Begineer friendly. Can you please use pnpm in any upcoming video.

[dhanarajccs]

Hi Dipesh,
Could you upload postgres crash course ?

[RohitSharma-nxzt]

I've noticed that the click counter isn't functioning as expected and is not getting updated.
Would love to see your take on this

[RavindraSingh-lppl]

Dipesh bro....ye series krke can i get job in mern ? as i am good with react