Learn MERN Stack with Project in 2 Hours | MERN Stack Crash Course for Beginners
9.3 هزار بار بازدید -
4 ماه پیش
-
This video is a complete
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/...
⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshma...
⭐️ Full Source Code ⭐️
https://buymeacoffee.com/dipeshmalvia...
⭐️ Node.js for beginners Playlist ⭐️
Node.js Tutorial For Beginners
🔥 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 - Learn Node.js & Express with Project ...
🔗 React Crash Course - Learn React JS with Project in 2 Hour...
🔗 JavaScript Crash Course - JavaScript Tutorial for Beginners | J...
🔗 HTML5 Crash Course in 1 Hour - HTML5 Crash Course for Absolute Begin...
🔗 CSS Crash Course in 1 Hour - CSS Crash Course For Absolute Beginne...
🔗 Social Medias 🔗
Twitter: Twitter: IMDmalvia
Facebook: Facebook: programmingwithdipesh
Instagram: Instagram: dipeshmalvia
LinkedIn: LinkedIn: 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.
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/...
⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshma...
⭐️ Full Source Code ⭐️
https://buymeacoffee.com/dipeshmalvia...
⭐️ Node.js for beginners Playlist ⭐️
Node.js Tutorial For Beginners
🔥 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 - Learn Node.js & Express with Project ...
🔗 React Crash Course - Learn React JS with Project in 2 Hour...
🔗 JavaScript Crash Course - JavaScript Tutorial for Beginners | J...
🔗 HTML5 Crash Course in 1 Hour - HTML5 Crash Course for Absolute Begin...
🔗 CSS Crash Course in 1 Hour - CSS Crash Course For Absolute Beginne...
🔗 Social Medias 🔗
Twitter: Twitter: IMDmalvia
Facebook: Facebook: programmingwithdipesh
Instagram: Instagram: dipeshmalvia
LinkedIn: LinkedIn: 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.
4 ماه پیش
در تاریخ 1403/02/20 منتشر شده
است.
9,311
بـار بازدید شده