Learn MERN Stack with Project in 2 Hours | MERN Stack Crash Course for Beginners
Vložit
- čas přidán 5. 08. 2024
- 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 - www.dipeshmalvia.com/courses/...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
⭐️ Full Source Code ⭐️
buymeacoffee.com/dipeshmalvia...
⭐️ Node.js for beginners Playlist ⭐️
• Node.js Tutorial For B...
🔥 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 & Expres...
🔗 React Crash Course - • Learn React JS with Pr...
🔗 JavaScript Crash Course - • JavaScript Tutorial fo...
🔗 HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
🔗 CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
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.
thank,just in time to restart myseft and start to get a job
You were from whom I learned Backend and now I will learned and improve backend , great sir keep it up
Glad to hear that!
For next project please use tanstack tables and inline edit those row column data
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
Really thank
Welcome!
Thank you Dipesh ❤
Welcome!
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
Noted!
great project...
Thank you! Cheers!
Hi Dipesh,
Could you upload postgres crash course ?
Thank you Dipesh! Have you considered to do a PostgresSQL project? aka - PERN
I am currently working on it. Will complete soon.
@@DipeshMalvia thank you Sir! Always the best.
Please start spring boot
Nice project. Begineer friendly. Can you please use pnpm in any upcoming video.
Noted
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
For now, there wasn’t any provision to reflect the counter immediately as when you click on the link you navigate to new tab and have no control to update the state. When the page gets refresh the counter updated value will be fetched from DB
Dipesh bro....ye series krke can i get job in mern ? as i am good with react
We can practise for the job using the concepts here but It is difficult to let you will get as job or not as depends on what type role you apply and your experience. If you get questions around the topics of this video you should be able to explain them how to implement.
First
Thanks!
create the advance project
Will look for it.