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.

Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - https://www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero

⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshmalvia

⭐️ Full Source Code ⭐️
https://buymeacoffee.com/dipeshmalvia/e/267940

⭐️ Node.js for beginners Playlist ⭐️
https://youtube.com/playlist?list=PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:18 - Topics to Cover
0:02:08 - Project Architecture
0:03:44 - Project Setup & Node.js Installation
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 ⭐️
🔗 Nodejs Crash Course - https://youtu.be/H9M02of22z4
🔗 React Crash Course - https://youtu.be/0riHps91AzE
🔗 JavaScript Crash Course - https://youtu.be/sptS-bgg8Ro
🔗 HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc
🔗 CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc

🔗 Social Medias 🔗
Twitter: https://twitter.com/IMDmalvia
Facebook: https://www.facebook.com/programmingwithdipesh
Instagram: https://www.instagram.com/dipeshmalvia
LinkedIn: https://www.linkedin.com/in/dmalvia/

⭐️ Tags ⭐️
- Node.js URL Shortener Backend: MongoDB + TypeScript Deep Dive
- Node.js API Development: URL Shortener Backend Using TypeScript and MongoDB
- Building Scalable APIs: URL Shortener App with Node.js, MongoDB, and TypeScript
- Hands-On Tutorial: Building a URL Shortener Backend with Node.js, MongoDB, and TypeScript

⭐️ 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.

Видео Learn MERN Stack with Project in 2 Hours | MERN Stack Crash Course for Beginners канала Dipesh Malvia