How To Create Full Stack E-Commerce Website Using React JS, MongoDB, Express & Node JS 2024
HTML-код
- Опубликовано: 1 янв 2024
- Learn How To Create Full Stack Ecommerce Website Using React JS, MongoDB, Express JS and Node JS | React JS Project to Make Full Stack E-Commerce Website
❤️ SUBSCRIBE: @GreatStackDev
👉 Source Code (Frontend + Backend): greatstack.dev/go/ecom
In this single tutorial we will make a full stack eCommerce website using (MERN) React JS, MongoDB, Express and Node JS or Online Store using React JS. We will make the e-commerce front-end website to display products, product cart and login registration page using React JS.
Then we will make the back-end of the website using express, node js, mongo db and react js. Where we will create the APIs to add product, display product, update product, update cart items and login registration API. We will also make the admin panel of our eCommerce website to add product, update product on our e-commerce website.
Download the assets: drive.google.com/file/d/1Nw2R...
Admin Panel Assets: drive.google.com/file/d/1xSn3...
👉 React Introduction Tutorial: • What Is React (React J...
#ReactJS #ReactJsTutorial #WebDevelopment #GreatStack
-------------------------------------
Build more React JS projects:
Complete Portfolio Website In React:
👉 • How To Make Portfolio ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Gene...
Create Weather App In React
👉 • How To Create Weather ...
-------------------------------------
Recommended HTML and CSS Projects:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack
2:54:07 If anyone has any trouble getting cart totals as 0, put the 'return totalAmount' statement outside the for loop
I am experiencing an error in the cart section of the website. Whenever I click on the cart option, the page goes blank. The cart components are working fine. Do you have any suggestions or solutions to this problem?"
Thank u bro, you saved me!
@@christianfer956 bro can you help me out
Thanks bro it helps me
Broooooo thanks a lot 🤜🤛
Excellent job, first time commenting on a tutorial due to the fact that you can actually follow along and learn, your not just copy and pasting but actually understanding whats happening. I recommend this video to everyone....beginner and all.
@@aymenmohsni8164check your code for an error
You might’ve missed a small detail in it maybe a closing tag ; or something
bro does it have payment gateway can I use this site for commecial use after creating it??
can u mail me the code???
Why I am getting an error code : Out of memory(in the browser), after I have reached the ShopCategory.jsx part. at 1:31:53? also I am wondering why do you have the ---- 6.9K (gzipped: 2.7K) right after the import React from react. I don't have that.
This video is the best!! 4:58:53 for backend / 5:56:45 for admin / 7:25:15 end admin panel
Aside your amazing skills and tutorials, i must admit, your typing skills are exceptional lol. I've watched so many developers and tutorials and they always mistype or they are typing really slow. But you Sir, not only you are typing like a Ferrari but you don't even misspel. Impressive 👏
I have been recently developing an E-commerce page for a company, and i was stuck with the backend, and thank fully, just saw your video and going with the integration, thanks alot man
05:26:52 I am getting an error 404 not found
cannot post /upload
please help me
How ?
@@ygn7901 please share the backend :)
@@afsalaftrwrds I can help you if you need
@@afsalaftrwrds check the routes again sometimes we forget the "/" after adding the address
Thank you so much man I will never forget you in my life time😇
what an awesome video!!!. thank you for posting videos like this for free. it means a lot!!
I am really getting a lot out of this - thank you so much! I wanted to suggest that you might save some time with server restarts if you use npx nodemon so start the server instead; unless there is a reason not to that I am unaware of (and I a beginner so there very well could be).
Good video for beginners to start with MERN stack, in the video everything is covered from frontend to backend.But you can skip parts like 2hrs and all because its making the website ressponssive
navbar and full website is responsive or not?
i was just looking for this video bro thanks a lot .. bro you dont know hwo much help me by this video after learning backend i was looking for a video that will help me to do a project .. thanks a lot
Hello . Have you completed this ??
Bro i watched you since 4 or 3 years you learned me alot
OMG thank you --- I was almost disappointed when the first video ended at the point it did. I thought you left me stranded but you made a complete version. I love greatstack!!!!
I need assets folder. You have?
Brother i am begginer and followiing your javascript projects in that 22 videos are there now this vdo is bookmarked
You are awesome ,please keep it up ,
This really helped me keep it up guys 🎉🎉🎉
Thanku so much sir for give me this video as a gift in new year
Thank you so much bro 😊
Amazing video thank you so much, I hope he'll update this project with new features like shipping, favorite product, radius corner. Guys put like if you support this request so he can see our comment.
Unfortunately I didn't start yet, I watched the whole video, but I'll consider doing it very soon.@@ygn7901
This video is incredible. Thank you so much for making it!
Does anyone else feel like they're friends with this guy now after completing the entire project? 😂
thank you, this tutorial is very helpful for me, I've learned alot from this
Please make a timestamp! This is a really good Full stack app!
7:17:23 If ur UI looks like this, in which product details container shrinks, use width.
.listproduct-allproduct{
width: 100%,
overflow-y: auto;
}
At 1:37:35 my mens page images and assets are not displaying. But in the women's page and kids page my women and kids images are displaying respectively. Someone plz help me
@@ReganMusicx go check your all_product file and change the name of category i was facing the same issue with the kids file but i change kid to kids and it works
Super sir , please do this full stack developer projects more and more
Waiting for mern stack project from a long time
Thank you so much
is it fully responsive
@@lioneldestiny1390 No, there are hardcoded values
Bhai tum ne ye project banaya hai?
One of the few if not the only 9 hour+ long step by step guide and almost no errors or setbacks. Great job man
i am facing an issue
product.jsx is not displaying breadcrums and product display
can anyone help?
@@tabrezasif8588 did you check if your name is good? Maybe you misspelled
you have whats app
even if i use hero element here it is also not working
i can use them evrywhere but cannot at product.jsx
to everyone who is stuck at product display and breadcrumbs
see what he has written at the begining it closes once at product
Thanks a lot bro ....... This was really helpful
hey can u show me plz show your routes
please explain more what to do
Awesome video, taught complete process of creating a e-commerce website with ease hats off to you.
Nicely Explained ...Very Helpful
A Blessed New Year to all 🥳🎊🎉😇🙏
Longest share of a full tutorial at 9 hours 9 minutes 47 seconds. 🤩
Best illustration I have ever seen , net and clean, coding and above all well organized . can you please
make Video to illustrate how to add vendors to the website where vendors can add or delete products
Can you tell me from where I can get all the images that he has got added in the assets folder at timestamp:9:50
description box me download link hai@@utsavjain8731
@@utsavjain8731 in this vedio bio they provide link you can get it there
just completed this mind blowing tutorial with all necessities thanks bro for sharing this , gone through many adds just for your content to be worthy .
Bro can you help me
My product page information is not showing.
It will be a great help
Well done, dude. It's great and simple to comprehend, but I would like it if you could add a timeslap to the video. It is going to be really helpful and simple to comprehend. Regards
I am a self taught coder. I completed so many udemy courses but this tutorial tought me much more than those courses.
I like practical projects and GreatStack is the only YT channel i follow to do practical coding. Tha nks for this awesome tutorial.
were you able to find a job as a self taught dev??
@@user-bb8nt4tz8u still a student 🥲
Amazing Video, LOVED IT! Learn so many things. thanks for this video.
Also, Can you make a video on how we can deploy this project on Netlify, render, or any other platform?
did you complete this project can you tell is this is a complete project??
@@Jafir-cz6js yea it is
Thanks a lot man. you are the best.
Very helpful. Thank you so much.
Amazing Video websites are working properly without errors
can you please send source code
can you help me
can u plz give source code it give errors
Can you share me your code? pls, im hurry up, thank you very much!
That's a cool project & I want to build this weekend. ✌️
I've just saw the demo, you didn't implement the payment integration!? It'd be a complete full stack, if you do that implementation 😉❤️
Btw one more thing, if you could add the timestamps, then it'd be also helpful ❤
No payment integration. I noticed that too
Actually we need to purchase API from banks or different mobile banking platforms. And some of the viewers may be watching from different countries. So it good not to include payment option , we can consider this as a portfolio project.
so a portfolio can have e commerce that does not use payment options?@@ashmitbastola1388
@@ecohealthz is this responsive
Ever since I started watching your video tutorial l have learn alot... thanks so much
It’s a amazing keep going 🎉😊
Backend starts from 4:59:00
Thank you
can u pls provide me source code i am getting multiple errors in my code
bro if u have source code plz also tell me
@@deepikamaheshwari-xy5hx
Bro can u. Plz give me source code I am getting error at CartItems I am unable to fix it for weeks 😢
If someone getting issue at 02:54:00 (problem not showing total items) try returning the totalAmount outside the for loop in the ShopContex file
thanx bhai
@@prasadmule9798 bro is this responsible site??
really thanks!
Bro can u plz give source code I am unable to fix error for weeks in CartItems 😢
Thanks Bro
It was great Thank you ❤
grate project..
waiting for this, thank you for amazing video❤❤
hi
bro i am facing a problem when when printing Popular
@@Vampire_robux69 what problem
you are doing a great job sir thank you sir
I made it work using React with TypeScript 100%. this is so challenging with refactor some lines to avoid errors.
Why I am getting an error code : Out of memory(in the browser), after I have reached the ShopCategory.jsx part. at 1:31:53? also I am wondering why do you have the ---- 6.9K (gzipped: 2.7K) right after the import React from react. I don't have that.
Bro can u plz give me source code I am. Facing issue at 2:38 I am unable to fix issue at CartItems for weeks 😢
Best video ever found so simple and professional approach highly recommend ❤❤
Can you please the github source code ? I have an error at 2:38:00 at displaying the product in Cart page after adding the arrow function.
@@aymenmohsni8164bro I am having the same error if u fix it plz give me source code or github😢
finally completed whole website.
took me 2 weeks to complete.
thank you sir.
have you saved the repo at github??
@@dakshkhandelwal2294 do share it, if you find
can you help me I have an error on 2hour in video ProductDisplay he cant find Product proprety name image
import React, { useContext } from 'react'
import './ProductDisplay.css'
import star_icon from '../Assets/star_icon.png';
import star_dull_icon from '..//Assets/star_dull_icon.png'
import { ShopContext } from '../../Context/ShopContext';
const ProductDisplay = (props) => {
const {product} = props;
const {addToCart} = useContext(ShopContext);
return (
{product.name}
(112)
₹{product.old_price}
₹{product.new_price}
A lightweight, usually knitted, pullover shirt, close-fitting and with a round neckline and shot sleeves, worn as an undershirt or outer garment
Select Size
S
M
L
XL
XXL
{addToCart(product.id)}}>ADD TO CART
Category :Women, T-Shirt, Crop Top
Tags :Modern, Latest
)
}
export default ProductDisplay@@newthings7024
@@dakshkhandelwal2294 no
thank you soo much for this project
Thankyou for this always be happy bro.....
if anyone gets an error where the total and subtotal is showing 0, at 2:55:09 , put the return totalamount statement outside the for loop.
Bro can u plz give me source code as I am getting error at 2:38 but unable to fix it for weeks 😢
@@user-id7je6ku4n can you give me a source code too cos im getting an error at 1:49 i tried so hard .
At 37:44 My hero images and texts are not displaying on the web page even though i followed each step. Someone plz help me.
sir please make a video on how to deploy this website on vercel. please sir
Ecellent sir make more vedios on MERN
Thank you, very educative
Awesome project. I just started creating this e commerce website in react. Once i complete it i will share with you for your review.
This 9 hours course has much more learning than my whole 4 years engineering program. Thanks for this complete mern stack project. ❤
Completed 💯✅
@@Sunit_Kumar did you face any challenge?
many but ended project with no issues@@AnkitYadav-nr4cy
@@AnkitYadav-nr4cy yep
@@Sunit_Kumar your GitHub link?
i waswaiting for a long time
pretty good job mate, props. Can you show a more production ready way of adding responsiveness?
Thank you for this blessed Project Great Stack Thank you for teaching us for free
Please add stripe payment in next video in continuonation to fhis video is
your project is good but if you use tailwind css in this project everything maybe really really good
05:26:52 I am getting an error 404 not found
cannot post /upload
please help me
@@afsalaftrwrds same error
did u get how to make it work?
Thanks Teacher for you doing this amazing job. please add forget and reset password and dashboard of the product of men,women and kids and username. we waiting you teacher in the next video👍
Thank you ❤❤
Abhi watch later mai rakh kiya baadme dekhunga aaram se 😀❤️
8:16:20 I am stuck here i wasted two days successfully issue was that data was fetching from admin list product but not displaying on the browser any one have a solution please replay
Same issue 😢
mismo problema, ayuda!
ya resolvi, como tal no hay error, simplemente ya no se usa allproducts.js, ahora toca subir los productos desde el administrador y luego los podemos ver en cada categoria, cuando sale vacia una categoria es porque no hemos agregado nincgun producto desde el administrador, asi que ya saben, toca subir todo desde el administrador para poder ver los productos en cada categoria
Sir how can I solve that issue
@@sukruthchirala7753 como tal no hay problema, simplemente ya no usamos data.js ni all_products.js ni new_collection.js, ahora toca agregar todos los productos desde el administrador y ya saldran en nuestras categorias, asi que ingresam los productos desde el administrador y con su respectiva categoria y se veran despues en nuestro pagina principal
thanks sir for making this video ..
Finally Completed👍🙌
Hey can you help me please?
hnji boliye@@DD-wr8dm
can you help in breadcrum section if shows undefined
share the source code pls
@@amankhorajiya1198 hey bro can u help me for deployment of this project?
8:16:20 I am stuck here i wasted two days successfully issue was that data was fetching from admin list product but not displaying on the browser any one have a solution please replay
It's the 13th day and still I didn't solve my problem kyo ki ho hi nai rahi koi hai jo madad kar sake?
now its 15-05-2024 I completed this project 😮💨😌
I am also facing same problem give a solution
ya resolvi, como tal no hay error, simplemente ya no se usa allproducts.js, ahora toca subir los productos desde el administrador y luego los podemos ver en cada categoria, cuando sale vacia una categoria es porque no hemos agregado nincgun producto desde el administrador, asi que ya saben, toca subir todo desde el administrador para poder ver los productos en cada categoria
Do you know why you're having that issue?
bhai sabko jake bari bari se add kardo yar from admin panel
@@jaiswalsourabh8027 bhai pata hai yr ye kar liya hu kab se lekin ab dikkat ye aari hai ki female ka fetch hora hai data lekin kids or men ka nai hora
Bhut bhut dhanyawad 🙏🙏 😊
You are a great developer I have successfully completed both front and backend though some parts are bit complicated but the way you code is amazing
Hello please help me
Bro can you help me
My product page information is not showing.
It will be a great help
43:11 yha pe ye 100% zoom hai ya phir km hai?? kyuki mera toh 100% me aisa nhi dikh rha, 67% pe aisa dikh rha h
same mera v screen me bara ho rha
67% PE KRKE RKHO.@@its_adit
any idea ki kaise sahi hoga?
At 2:30:15 , after i added my product to the cart, the console should have been updated to 1 acc to the id, but i can't get the result.Can anyone tell what could be the reason?
is this solved now
i too have the same problem
@@sdharshini5227 i can help you i already finish this project
@@user-co1fy8hf1shave yoy completed this project?
is this solved now help me
gr88 project . sir make a video strapi because it may work easy for react js developer and easily understand for begginner
superb video
Bother can someone help me my breadcrum page is not visible after that i cannot move on with it can someone assist me
me too
Me too broo 😢
I solved it by correcting the route in app.js to:
Also import product.jsx in your app.js
@@DA-gu5rg Thanks buddy
@@AkashSharma-lf5jq👍
backend start from 5:00:00
Bro can u please share me source code as I am unable to fix error at CartItems 😢
Thank you.. great work
thank you very much sir, I learned a lot of things, thank you for everything, learned a lot and made a lot of experience with your learning, always be healthy, good people
do u have code??
can u send it to me??
hi can you help me I have an error
Can you share me your code? pls, im hurry up, thank you very much!
Bro can u plz give me source code I am getting error at 2:38 in CartItems but unable to fix it for weeks 😢
first viewer
Because of your by me a coffee your subscription is not growing, atleast you should provide source code man
If we follow this video at the end we will get source code & skills also, if they provide source code then many of us will modify code and use it they dont watch the video also , may be this is reason
Why do you want everything for free, will you work for free after having these skill set
You sound really dumb.
Bro he is getting money directly instead of views, which is the whole point of the channel probably to market his project and sell it
Just pay him
Love your videos
Please bring a video on how to add payment gateway after this and receive orders.
The god of web dev. I appreciate your work. 🎉🎉 i assume you have a solid foundation in network engineering as well. 😊😊
05:26:52 I am getting an error 404 not found
cannot post /upload
please help me
@@afsalaftrwrds just
write storage function like this..
const storage = multer.diskStorage({
destination:'./upload/images',
filename:(req,file,cb)=>{
return cb(null,file.originalname)
}
})
Great job , really thank you very much . I recommend this video to everyone .you 're the best
Did you use the source code ?
no @@shreyansh3011
no@@shreyansh3011
no@@shreyansh3011
Thank you so much❤❤
Very helpful and easy to follow. Thank you !
Hey bro, can you please share with me the source code of cartItem.jsx ? I have an error only when I add the arrow function
Man thanks for all this project was so helpful for me and also you explain it too good, thank you so much keep the great work
Thanks Man💫
good video for beginners
boss you have done a great job. some suggestions from my side in 2024 you should use next app and tailwindcss and typescripts in frontend
Excellent project, but you should use tailwind frame work instead of normal css.
Sir plzz teach the payment getway method using stripe and connect it to dbms in this e-commerce website please sir. It would be a big help
Thanks a lot 😊😊
Thanks a lot !
Your new subscriber Thanks for this video bro thanks alott
Thanks for the sub
@@GreatStackDev You deserve this but more than this broo keep helping bro
thanks
why you are not using axios please explain may be its more easier than this?
Course is great! A lot to learn and understand!
Can you please the github source code ? I have an error at 2:38:00 at displaying the product in Cart page after adding the arrow function.
@@aymenmohsni8164
import React, { useContext } from 'react'
import './CartItems.css'
import { ShopContext } from '../../Context/ShopContext'
import remove_icon from '../Assets/cart_cross_icon.png'
const CartItems = () => {
const { getTotalCartAmount, all_product, cartItems, removeFromCart } =
useContext(ShopContext)
return (
Products
Title
Price
Quantity
Total
Remove
{all_product.map((e) => {
if (cartItems[e.id] > 0) {
return (
{e.name}
${e.new_price}
{cartItems[e.id]}
${e.new_price * cartItems[e.id]}
{
removeFromCart(e.id)
}}
alt="Remove"
/>
)
}
return null
})}
Cart Totals
Subtotal
${getTotalCartAmount()}
Shipping Fee
Free
Total
${getTotalCartAmount()}
PROCEED TO CHECKOUT
If you have a promo code, Enter it here
Submit
)
}
export default CartItems
MariaAbba is my account name (I am with the glasses on the profile photo). The project name is e-commerce. You can check there too if needed.
@@aymenmohsni8164 const CartItems = () => {
const { getTotalCartAmount, all_product, cartItems, removeFromCart } =
useContext(ShopContext)
return (
Products
Title
Price
Quantity
Total
Remove
{all_product.map((e) => {
if (cartItems[e.id] > 0) {
return (
{e.name}
${e.new_price}
{cartItems[e.id]}
${e.new_price * cartItems[e.id]}
{
removeFromCart(e.id)
}}
alt="Remove"
/>
)
}
return null
})}
Cart Totals
Subtotal
${getTotalCartAmount()}
Shipping Fee
Free
Total
${getTotalCartAmount()}
PROCEED TO CHECKOUT
If you have a promo code, Enter it here
Submit
)
}
export default CartItems
@@aymenmohsni8164 MariaAbba is my profile (I am with the glasses)
it seems like you're using the index as the key in the getDefaultCart function. However, if your all_product array contains unique identifiers (such as product IDs), it's better to use those identifiers as keys. Using indices might not be suitable if the order of items changes in the future.
05:26:52 I am getting an error 404 not found
cannot post /upload
please help me
@@afsalaftrwrdsbro can u plz give me sorce code because I am getting an error at 2:38 I am unable to fix it for weeks 😢
After replacing the all_product API are we to upload all the images through the admin panel? i believe that is how the products will be sent through the api to the shopcontext ?. Please i need an answer thank you.
Thanks sir 🙏🙏
Really good video. Just one suggestion, could you add timestamps/clips on front end back end\ and other activities.
is it responsive??