# 3 MERN Project Series | Using Routers & Design React Components| Food Delivery App | Hindi 2023
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- 3 MERN Project Series | Using Routes & Design Components in React | Food Delivery App | Hindi 2023
MERN FULLSTACK PROJECT SERIES
MERN Stack stands for MongoDB, Express.js, React JS and Node.js.
This is the PART 3 of our MERN Stack Project Series in which we will be using react-router-dom and designing react.js components like Navbar, Carousel, Footer and Cards using #bootstrap
In this Fullstack Project Series we will be going to build a Food Delivery Web Application using #mernstack #mernstack in 2023 can arguably be considered as one of the top most, in demand #fullstack for #webdevelopment .There are huge demand for #mernstack #webdeveloper currently. In this series I'll be covering some very important topics from #mongodb , #mongoose , #react / #reactjs , #express / #expressjs and #nodejs .
✅✅-------------------MY GEARS-------------------------✅✅
Boya Mic: amzn.to/3K85nbx
HP Wireless Mouse & Keyboard: amzn.to/3toLDdS
Lenovo Laptop i5: amzn.to/3K6grpQ
Mouse Pad: amzn.to/3fmuEko
Google Pixel 4a: amzn.to/3nk0imH
Boat Earphones (BassHead): amzn.to/3zVPSPt
msi Monitor: amzn.to/3qnqEX2
✅ Content Creator & Video Editor: Arshdeep Singh - / arshdeep-singh123
SOCIAL MEDIA:
Instagram: / endtoend91
Concepts like useReducer , Context API, useContext, react hooks, createportal , async/await, promises will be covered from #react and #javascript .
Will be using #bootstrap 5 for making our application #responsive .
Will be using MongoDB Atlas for storing our data in a #database .
Viewers can ignore these tags:
#endtoend
javascript ,javascript mastery ,js mastery ,master javascript ,mern stack ,mern stack tutorial ,react full stack ,mongodb tutorial ,full stack ,mern stack tutorial 2023 ,mern tutorial ,mern stack project ,mern app ,mern app with authentication ,react node express mongodb ,mern stack traversy ,mern stack tutorial for beginners ,mern application ,full stack mern application ,mern stack crash course ,mern stack react ,mern stack social media ,full stack mern , react , reactjs, mongodb, node.js,6 pack programmer ,programming in hindi ,mern stack ,mern stack project ,mern app ,MERN STACK ECOMMERCE ,MERN STACK ECOMMERCE WEBSITE REACT ,REDUX ,MONGODB IN HINDI COMPLETE PROJECT ,mern stack ecommerce ,mern stack ecommerce project github ,mern stack ecommerce tutorial ,mern stack ecommerce website ,mern stack in hindi ,ecommerce website in hindi ,mern stack ecommerce website in hindi ,ecommerce website source code free download ,mern ,mern stack app ,mern full project ,mern stack ,mern stack in hindi ,prerequisites for mern stack ,mern stack full course in hindi ,mern stack tutorial in hindi ,mern ,mern stack ,react ,express ,node.js ,mongodb ,mern tutorial ,react full stack ,full stack ,mern stack tutorial ,react tutorial ,mongodb tutorial ,
pure din internet pr ek acha content search krne pr agr aese video mil jae tou din successful lgta h ....great job done bro.👍
People struggling with no image problem 👇
1.)Download whatever image you want to use to the public folder of your project.
2.) Don't copy the relative path of the image .
3.) use /image_name in the image source.
Example.
Hope it helps.
Happy Learning 🎉
The method of teaching is very good , you explained each topic very well
perfect explanation for every contents. ThankYou so much , i think nobody can struck at any point of code.
For beginners:-- For selecting all same name with shortcut key in vs code is "ctrl+d" in my case..... :)
Can u please tell me how to add image i get an application error
@@DiyaSharma-we4fp watch video from 38:23 again
1.) Download images in the public folder.
2.) Don't copy the relative path to the img src.
3.) use /img_name in the img src.
Example:
Hope it helps.
Happy Learning 🎊🎉
Thank you sir really this project seris very helpful
One of the best channel ❤
brother great video all concepts are very well explained .just a small request if you are coping pasting something please provide same in description of the video
noted 👍
Thanks sir, basic concept also cover , very good teach , Thanks a lot
Great Explaination..I m total beginner in react but the way you explained was really good
perfect explanation...thank u very much....keep and go ahead. u can make more videos like this.
One of the best channel😊😊
thank you sir. really enjoyed the sense of humor sir
1:59 haan bhai aa gyaa finally
Sir your channel is helpful can you plz make tutorial on datascience
bro React pr complete course dalo nice explanation h aapki
to help in converting HTML to jsx , we can use vs code extension directly
which?
i am getting error "You must provide a non-empty routes array to createRouter" on 10:21
pls help
your voice is very similar to eazysnippit
hhahaha Great i like your words you saying chup chap sa copy kr 😘😂😊
Thanks 🙏
after adding caraousel, it is working fine but sometimes the image size of caraousel is too large that we have to scroll a lot to get to the search box, also the image sizes in caraousels are diffent every time we scroll....got stuck in this....please provide suggestions
bro Unsplash link is not working
@@mechscitech6227 yes. i am facing same problem
bhai meri image transition fade or objectFit contain nahi chal re ha , kia issue hai
Best react channel for beginners
Perfectly explaining every components why, how and where to use
Your teaching style is really too good
Thank you so much sir for this course ❤️☺️
It helps to learn react meaningfully
As far as I know we need not to use exact in react router v6 and higher than this, please clear my doubt and correct me if M wrong
Which keyboard u use?
unsplash random image is not showing. is there any other source for image?
same problem
@@mechscitech6227 did u find the solution?
Same problm
also bootstrap is not working , and its shows lots of error
10:33 time stamp main bg-success karne parr the color has not changed to green
Same here
alag se style attribute ka use karka bg green kar do and postion fixed
Heyy! Did you find any solution for this ...i am facing the same problem
night rakh rahe he to abhi nahi ho raha..
bhai ye official bootrap se nahin aaya hai. that's why you face this type of problem.
How to add images? No matter what I do I can't add images in the file....somebody plz help or give an alternative solution
Pta chla?
@@ShreyaSingh-oe6gj
Mujhe bhi nhi a rha
Mere mai img nhi a rhi
@@shortvedio9676 People struggling with no image problem 👇
1.)Download whatever image you want to use to the public folder of your project.
2.) Don't copy the relative path of the image .
3.) use /image_name in the image source.
Example.
Hope it helps.
Happy Learning 🎉
People struggling with no image problem 👇
1.)Download whatever image you want to use to the public folder of your project.
2.) Don't copy the relative path of the image .
3.) use /image_name in the image source.
Example.
Hope it helps.
Happy Learning 🎉
@@ShreyaSingh-oe6gjPeople struggling with no image problem 👇
1.)Download whatever image you want to use to the public folder of your project.
2.) Don't copy the relative path of the image .
3.) use /image_name in the image source.
Example.
Hope it helps.
Happy Learning 🎉
At 25:10 I am not getting proper drop-down...the numbers or the test is not visible on green background
Could you please show the code
after set bg-success navbar-dark navbar color is not changing to green
hey ! Did you find any solution for this ....i AM facing the same problem
@@pragatirathore5497 hey! Did you find the solution? i am facing the same problem
just add the custom css(inline css)@@GopalSingh-gx5jm
Please paid d course laiye billkul starting to advance r regular video k saath we are wait
A resource is blocked by OpaqueResponseBlocking, please check browser console for details careousal me pic upload nhi ho rha ye bta rha hai sir kya karu mai
sir slide nhi hora carousel even after exactly doing like the video
my terminal is different initially
How do I get to the status before starting thr react dome?
which code formatter are you using?
select mai option tag ka use kyu nahi kiya aapne javascript kyu lagai hai sir ji
please increase text font size
My bootstrap navbar is showing runtime error for some reason, what could be the reason?
bookmark 12:09
unsplash random is not orking is there any alternative
I'm unable to generate random images from unsplash, it's showing we couldn't find that photo. Please help
Same
@@syedfaizanpasha3563 same here . thats why i downloaded the image and paste it in public/ images folder and used this link in img src
bhaiya me apka video dekh kr Food app abana rah hu pr ek place pr atak gay hu
wo unsplash ka images code me daal rah hu tho wo show nhi kr rah h site pe wo kaise thik hoga
my href is still href but it is working.....
oh damn what is it going on?
28:00 we are not including size feature.
really pissed of this unsplash api not working at all getting 404. Please to resolve. Other wise no point in moving ahead
you remind me of Amir Khan cuz of your voice hahaha
39:48 / 56:43
plz help the image in the the carousel is not fitting. what to do?
Did you solve the problem? if yes help me too.
@@fullstackdeveloper2025 No I tried but it is not getting fixed.
change the size and check
Bhaii mera sab compile ho raha hai but blank page ara haii... help chahiye
im using the fade carousel but the fade animation is not working for me
Sir dark mode kaam nhi kr rha jo apne last video mai batayaa thaa
koi aur link use karo uski jagah....
unable to slide the carousel even after importing all the modules
Same happened with with me.. Did you find any solution?
dusra carousel use krlo uske niche wla
in the laat part where we have to add image it is not working
I had to stop after 2 video as Bootstrap Navbar is not working.
why you did not shared a code?
link for carousel not working any alternate site
Why to use return ????
Sir meri src img show nhi ho rha h
People struggling with no image problem 👇
1.)Download whatever image you want to use to the public folder of your project.
2.) Don't copy the relative path of the image .
3.) use /image_name in the image source.
Example.
Hope it helps.
Happy Learning 🎉
sir image nhi show ho rahi haii browser pe
tell me solution. i'm facing same problem
image downlaod karo then paste it in public/images folder and then use this path in img src folder
can't we use react bootstrap instead of bootstrap 5 dark?
Can you able to see dark mode after using that href ??
@@chinmay1906 no it's not working now
Card ke image ka url kha se liya hi please provide link
my images are not being shown.
9:02
Sir carousel image is not showing there
same. if i use downloaded image
@@fullstackdeveloper2025 yup you have to download that image in public folder
How to solve this error ':' expected. ts(1005)
How do I add a symlink to it from project's node_modules? my error is ERROR in ./src/App.js 9:0-50
Module not found: Error: You attempted to import ../node_modules/dist/js/bootstrap.bundle which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
i am also facing the same issue
@@AdityaSharma-zy1ww fix your path
Give path in app.js
edited : I mean import all path in app.js file
@@rushipatil7057 thanks
17:31
navbar is not changing 4 times recheck my code i have applied cdn link
How to fix this error pls anyone help (ive tried all 3 below commands ):
Run `npm audit` for details.
PS F:\Project\mernapp> npm i react-bootstrap
added 17 packages, and audited 1381 packages in 8s
265 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
PS F:\Project\mernapp>
hi which node your using if your are using 20 then switch on 18 then work
sir, dash board bi add kare...jese websites me hotaa hy
That is admin panel. Ha vo bhi plan Kara hai. Kia Jaa sakta hai iske baad. 🤜🤛
sir jo apne unsplash ki link di hai vo work nhi krhe hai
card.js main url kahan se liya sir
mil gaya toh batadena bro
Can you please share the source code . Some of the functionalities are not working.
Its been shared in the last video's description of this series.
card ke image ka url thoo dedethe
sir card image display nahi ho rahi hai, source code ka link share karo
Same issue for me...Did you solve it?
@@shashwatanand5169 same issue iam facing carousal image is not displaying do you resolve it ?
same issue
sir apke code m problems h kuch code to run ho rhe h or kuch nhi...
or phele apne code ko change kr lete ho fr hame batate ho thode confusing h apka ye course....
sir i want your source code for cross check my project please send your git
repo if possible
Router dom me error aa rhi hai same work nhi kr rha haii
bjai jitnin mehnat series babane me ki hai ,utni hi wrong part hatane me krdeta,pura corousal banaya aur fir dusra corousal leliya
Can anyone provide carousel edited code
Card.js how to add image path
Sir can you provide source code?
Source code match nahi karta joh video meh kar raha hai
bhaiya img ka link dedo panner wali ka
sir ya image apna app kasa change hogi if any body knows tell me
bhai thoda font size increase kar ke code likhte na bhai 🥲
Sir image dikh nahi rahi he
Vo link ab kam nahi karegi, koi dusri website try karo.
github pr upload nahi hai code??
Github link diya hai description meh
@@aryandennis9683 kaha pe hain bhai link github ka
Carousel is not sliding and images are too big ....
Sir, could you please provide the code
did anyone get this error?
Error: error:0308010C:digital envelope routines::unsupported
have you solved this error?
just now i encountered this error
pls help me out
Bootstrap Js is not working 😢
what you have done then ?
@@AkanshaParmar-lm9hr I took cdn link And also installed in React bootstrap 5 not dark version and Then i added body color to black To look like dark Version
sir kiya ap source code provide kr dy gy plz
There is nothing showing in my localhost😢
if it shows blank screen, then it must be any error
Card pe image ka link provide karden
React-router-dom terminal me run karao
@@unstoppabledreamer2273 kese
404 error for random images 🙂
Code?
Time waste bro confuse point very code journey is right concept
pahle hi bootstrap sahi wal use kar leta itna time nahi jata
konsa sahi
Bahut confusing kr diya . Thodha to prepare kr lete Sir