Build a Full Stack Application using MERN | MERN Tutorial for beginner
HTML-код
- Опубликовано: 25 фев 2023
- 🔴Connect with me 1 :1 -
➜ topmate.io/himanshushekhar
A basic MERN stack application is a web application built using four technologies: MongoDB (a NoSQL database), Express (a Node.js web framework), React (a front-end JavaScript library), and Node.js (a JavaScript runtime). This type of application allows developers to build dynamic and responsive websites or web applications with a powerful back-end and an interactive front-end. The MERN stack is a popular choice for web development because it allows for efficient and streamlined development, as well as scalability and flexibility for complex projects. With the MERN stack, developers can create full-stack web applications that are fast, secure, and easy to maintain.
Article link - whataboutcoding.com/build-a-s...
Hope you guys found it helpful.
Main Channel
➜ / himanshushekhar020
➜Say hi -
Instagram - / himanshu.create
➜Contact - methimanshu020@gmail.com
➜About me
Hi Guys, thanks for tuning in. I am a software developer, having 3+ yr of experience in the IT industry. I like teaching and creating content, so why not create it upon my profession and daily lifestyle.
You'll either find my videos educational or entertaining, sometimes both🤗
🙏 Thanks for your love and support. It means a lot to me.❤️
Sooo helpful, I just wanted to know how to build a complete mern stack app, as I already know each one of them just didn't knew how to compile all of them together. You are so underrated, thanks for making this video
very helpful project for understanding the frontend+backend basics
Today completed this mini course this is very knowledgeable, and conceptual mern stack course. Now i am able to move for advance topic and learning advance concept in MERN stack . THankyou so much sir.......making more tuturials like this in MERN stack
bhai me Allah se duwa karunga apke liye or apke parivar k liye or Allah apko kamyabi ata farmaye. ap bahut accha kaam kar rahe hai me apka tahe dil se shukriya karta hoon.
Thanks for such love and appreciation
Jai shree Ram..🙏
best explaination in simple language : kudos!
Very nicely explained. Thanks:)
Bhai I have watched your shopping cart and redux videos it was too easy to understand I want you to say that please make video using lazy loading , suspense , closoure like real world projects
I hope you succeed in future with your channel God bless you
Really helpful video. Just a small suggestion when you are doing setTimeout at 1:28:36, make sure to use clearTimeout function to cancel all the timeout.
Best video for mern ❤ thanks you sir
thankyou from the bottom of heart
Really helpful for beginners,, I recommend
Thank you, sir, for your video. I watched it until the end, and although it took up my entire day, the most crucial aspect was your decision to start the project from the backend. It's a great idea that sets you apart from other RUclipsrs. Thanks again, and have a great day!
Thnx alot for the comment . Made my day
Best ever tutorial i watch
The video script covers building a Full Stack Application using MERN for beginners. It includes storing user input data, handling form events, creating components in React, defining user models, handling data efficiently, setting up basic application with React, Node, and MongoDB, and managing data for backend operations. It emphasizes error handling, updating operations, integrating routing, and interacting with databases.
Key moments:
00:07 The video script demonstrates setting up a basic application with React, Node, and MongoDB, including creating APIs and handling dependencies.
-Setting up a basic application with React, Node, and MongoDB.
-Creating APIs and handling dependencies.
-Running the application and loading modules.
08:12 The video covers installing and configuring different packages, setting up servers, and interacting with databases through commands.
-Demonstrates installing and configuring server packages like Express and setting up automatic restart.
-Shows installation of small updates, configuring scripts, and creating APIs with Express packages.
-Illustrates installing and linking MangoDB, running servers, and interacting with databases through commands.
-Explains creating and interacting with databases, setting up environments, and playing with database commands.
16:24 Creating a user model is crucial for database interaction, ensuring unique data entry and preventing errors.
-Defining the structure of a user model is essential for building a database, guiding data entry and ensuring database functionality.
-Model creation involves specifying data types and required fields like email, ensuring unique entries to avoid repetition and errors.
25:07 Creating and interacting with a model in a database involves steps like creating a collection, storing and updating data, attaching created and updated data, and testing the functionality.
-Model creation involves defining a schema, exporting the model, and interacting with the database through the model.
-Interacting with the model includes converting and working with data, storing the schema in the database, and utilizing the model as a web interface.
-Handling errors in data interaction requires catching and processing errors, sending responses, and testing the data to ensure proper functionality.
-Testing the created data involves sending data, parsing the body, and checking for errors to ensure the correct functioning of the model.
34:30 The video explains database operations, user data handling, and routing features. It demonstrates copying, importing, and exporting data, along with managing user IDs and API requests.
-Demonstrates copying, importing, and exporting data in the database.
-Explains user ID management and API requests for routing features.
-Discusses creating, deleting, and finding operations for user data.
-Shows handling single user data, including copying and deleting IDs.
42:43 The video showcases the process of copying, pasting, and updating user data in a React application using Bootstrap.
-Copying and pasting user IDs and names for updating data.
-Updating user data by changing names and IDs in the application.
-Integrating routing and creating components in the React application.
-Importing and configuring routing in the React application.
53:36 Creating components and managing form submissions in React, including storing user input data and preventing default form behavior.
-Storing user input data and preventing default form behavior.
-Handling form events and creating components in React.
1:04:06 The video script demonstrates backend development tasks like response handling, method writing, and error management, along with creating APIs and managing data.
-Handling responses and writing methods for post requests.
-Converting and sending data in the body of requests.
-Error handling and capturing errors in the backend.
-Creating APIs and managing data for backend operations.
1:15:57 The video script demonstrates creating a van function, managing data, and setting responses effectively, including error handling and data storage.
-Handling data and setting responses efficiently is crucial for effective data management.
-Storing data properly and handling errors are essential components of data management.
1:26:17 The key point emphasizes the importance of handling response results, removing data, and updating operations effectively in web application development.
-Handling response results is crucial for user interaction and data management in web applications.
-Removing data accurately ensures a clean database and efficient application performance.
-Updating operations require careful implementation to maintain data integrity and user experience.
-Handling errors effectively is essential for providing a seamless user experience and ensuring data accuracy.
1:36:45 The process involves updating user data, submitting changes, and navigating through various pages on the website to ensure accurate information.
-Submitting data involves hitting the submit button after making changes to user information like names and emails.
-Navigating through different pages and methods to update user data, including handling responses and ensuring correct data submission.
Generated by sider.ai
Just cleared what is what ❤ thank you bhayya
Followed your tutorial on your website, I'm getting CORS error. I used the same code as given in the tutorial please help.
Very Helpful Sir
hello sir, this is showing "Node.js v20.7.0
[nodemon] app crashed - waiting for file changes before starting..." while creating express router, and my code is correct. please provide the solution🙏
Amazing video to understand the basic flow of MERN stack, Thank you so much for sharing.
Thnx alot
want more videos of such type
Loved this tutorial and believe me it seems like he is teacher you physically in front of you..this video is that much natural 😍💎 Thanks Boss!!!
Made my day.thanks alot🙂
I have done thanku so much
was Very helpful 😍
soothing teacher
Error: Cannot find module './models/userModel' . How to solve this error?
Post not working
Thank You Bro
Wowwwww best video ever tqqqqqqqqq sir ❤❤❤❤ sir really tq from heart ❣️❣️
Glad it helped. Thanks
This video is very helpful for all beginners, its like as I expected before start watching this video.
Thankyou very much sir for your premium content (for me its like premium).
Thxn for the comment , you made my day🙂
Thankq bhaiya bhut ache trike se apne smjhaya h ❤💯
Thnx alot🙏
What are the things he teaches in thia tutorial
Bhai thankyou yaar
Glad it helped🙂
thank you so much bhaiya . Really helpful video
Glad it helped
Thank you so much for the video. I have faced many errors while creating this project but also I get satisfaction and another level of happiness in solving them anyway. I'm very happy that I have created a full stack web application😄😄😃
Super glad it helped. Keep learning
How to import just by a click?
Plz make a part two video about it's deployment in vercel or any cloud platform.. Sir I'm trying with vercel and getting errors like cors etc even after I have used cors in server.js..
Deploy the backend in render. And the front end in the vercel.
Hi brother, I am from Punjab. Thanks a lot for this video. I didn't see a single error on my side with the help of your knowledge. Please bring more videos on mern stack Projects. Thanks Thanks alot : )
Super glad it helped.
services me mongodb show nahi kr rha ..
My code is OK but await doesn't work why
hey brother ,their is an error coming from backend terminal and i am not getting it
connected successfully with db
running Successfully at 5000
CastError: Cast to ObjectId failed for value "{ _id: 'favicon.ico' }" (type Object) at path "_id" for model
"user"
at SchemaObjectId.cast
(C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schema\objectId.js:250:11)
at SchemaType.applySetters (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schemaType.js:1236:12)
at SchemaType.castForQuery (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schemaType.js:1653:17)
at cast (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\cast.js:304:34)
at Query.cast (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:4798:12)
at Query._castConditions (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:2206:10)
at model.Query._findOne (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:2526:8)
at model.Query.exec (C:\Users\HARDIK\Desktop\mern
app\back end
ode_modules\mongoose\lib\query.js:4342:80)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async C:\Users\HARDIK\Desktop\mern app\back end
outes\userRoute.js:34:24
{
stringValue: `"{ _id: 'favicon.ico' }"`,
messageFormat: undefined, kind: 'ObjectId',
value: { _id: 'favicon.ico' },
path: '_id',
reason: BSONError: input
must be a 24 character hex
string, 12 byte Uint8Array, or an integer
at new ObjectId (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\bson\lib\bson.cjs:2361:23)
at castObjectId (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\cast\objectid.js:20:14)
at SchemaObjectId.cast (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schema\objectId.js:248:12)
at SchemaType.applySetters (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schemaType.js:1236:12)
at SchemaType.castForQuery (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\schemaType.js:1653:17)
at cast (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\cast.js:304:34)
at Query.cast (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:4798:12)
at Query._castConditions (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:2206:10)
at model.Query._findOne (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:2526:8)
at model.Query.exec (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\mongoose\lib\query.js:4342:80),
valueType: 'Object'
}
node:internal/errors:490
ErrorCaptureStackTrace(err);
^
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:399:5)
at ServerResponse.setHeader (node:_http_outgoing:645:11)
at ServerResponse.header (C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\express\lib
esponse.js:795:10)
at ServerResponse.send
(C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\express\lib
esponse.js:175:12)
at ServerResponse.json
(C:\Users\HARDIK\Desktop\mern app\back end
ode_modules\express\lib
esponse.js:279:15)
at C:\Users\HARDIK\Desktop\mern app\back end
outes\userRoute.js:38:25
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'ERR_HTTP_HEADERS_SENT'
}
Node.js v18.16.1
[nodemon] app crashed - waiting for file changes before starting...
thanks
hii, mera uppdate.jsx wala form load nahi ho raha hai, please help
sir 1:08:26 on that how it will work sir that data didn't fetch let you explain this one
Big fan sirr 🌼
Thank you so much sir
Most welcome
Nice
lot of think to learn full Stack web I tried but failed at @1:09:44 ......
definitly I will learn and come back again. thanks for helping...
🖤💕💕💕
Same error in create operation
You might have done the CORS configuration before the routes in the server.js file
same error did you find any solution
When I am trying to fetch the all users it logs that can not read the properties of undefined, even though the results was coming what I expected
same problem here, did you fix this, if yes please let me know?
@@user-fl1km1jq1d no
git link of your code plzzz
8:40 kya kiya app n
mera
nodemon app crashed bata raha
Mere ui me error nahi show ho Raha he pls help me
Bhai MERN Project aur v banao na...from development to deployment.
sir code please
1:06 yha pe mere me fetch eror aa raha hai
anyone give me sorce code
can any one tell the how to uploads the images in mongo db, name, email , age are working fine but I want to use the images.
any one please help...
You need to save image url as string and use it where you want it to
use multer for image
thank you
Finally done it 😊
👍🫶
bhai ye wale project kiye ho to iske source code provide kara do plz
Please add timestamps
thank you but link of your website not opening
Its working now
thnk u very much
Put timestamps
Sir i am a CSE student, naukari kaise lgegi? paisa kama pauga kbhi ki ni, depression aa raha h ab to.. please help
us bro🥲
When I am trying to get single user, it return the promise object, how can set the name, email and age in input fields....?
Please reply me brother, I am waiting for you
frontend 47:19
1:31:50
Sir Advance course Lekar Aaye beginners course RUclips per bahut hai
Noted
@@whataboutcoding haan sir advanced bhi bataiye please. intezar rahega hume
brother mera nodemon crash hora hai local host 5000 reload karne pe backend ka
wo ilsiye hora the beacuse jub get api banaye hunmne backend me to waha send(200) ese ek rextra response bej rhe the use hatatao
@@rohitrox73 bhai mera bhi same hai please apna git url do na
Bro
Bro mera bhi same prob hai please help
@@rohitrox73 solution batao yrr
31:00 post is not working
Same error mila tha ...and then maine server.js ke file me hi saare routes create Kiya toh error chale gye ..vo alag se dusra routes ki file create krne se vo error aara .syd koi package ya module Miss ho skta hai isliye vo work nahi kar raha
Changing destructuring syntax from square brackets [] to curly braces {} for
const { name, email, age } = req.body;
resolved the issue for me.
Patch not working
mera bhi same issue aa raha hai ( failed to fetch ), kaise resolve kiye
sound is not good
Noted
@@whataboutcoding but sound is perfect i guess!!!
harry's project