Full Stack eCommerce Cart build (React, Redux, Node, Express, MongoDB)...From Scratch💥
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Today we will be building a full stack e-commerce cart from scratch using React and Redux for our frontend and Node, Express and MongoDB for our backend. We will be doing everything on our own from setting up the backend API to styling our components.
I really hope you enjoy this video and if you did please don't forget to LIKE and SUBSCRIBE 🤓!!
Let me know in the comments below what you thing of this type of videos and i i should make more like them. And if you have any suggestions on what video you would like me to do next let me know down below.
Timestamp:
==========
0:00:00 Intro
0:02:29 Folder Structure and Setup
0:14:15 Backend Build
0:18:30 Setting Up MongoDB Atlas
0:22:08 Setting up product model
0:25:46 Data import script
0:30:52 Building out Routes and Controllers
0:38:56 Frontend File Cleanup
0:40:13 Frontend Build & Styling
2:30:56 Setting Up Redux Store
3:42:15 Final Build Testings
3:45:24 Outro
My personal website
=================
www.thefullstackjunkie.com
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
Hope y'all enjoy this video let me know what you think if the tuts are to lengthy or do you enjoy these longer project builds?
GitHub Link:
github.com/LloydJanseVanRensburg/mini-mern-ecommerce-project
Don't forget to Like and Subscribe🤓
Greate job mate! Keep it up.
@@alejomakevids thanks🙏🤓
@@alejomakevids love your name btw 😂
I learnt context api from your vidoe but u released this with redux 🙂🙂
Hope you found i helpful💪🤓
Thank you for sharing all of these for free! You guys are angels on the Earth!
Thank you so much for covering the different aspects of a web app. You are very generous!
Best MERN tutorial video, I have seen. Congrats and keep up the good work.
You're an amazing instructor that makes complex topics look easy. I really appreciate you taking your time and sharing your knowledge with us. Love from South Africa, Cape Town.
PS: Can you please in the future create a MERN tutorial with different schemas and how database relationships work? That would be dope. Thanks
increible project man, ive wanting for so long to unite node and react, thank you, very very much!
LOLL @@ "So if you've seen my mongoDB crash course, you will know these things" (27:20)! Excellent tutorial and not too long
Hey thank you so much for this video, I’ve learned so much from it and finally understood some concept that I was lost for for months! I’m excited to go through the rest of your videos. Don’t stop what you’re doing
Again thank you
Thanks so much really appreciated the comment 🙏
Thank you so much for the video
from Malaysia 🇲🇾
wow wow! Thank you so much for all the effort you have put into making this super useful video!
I love you from Argentina! Best fullstack teacher ever! 😍
Excellent tutorial, great detailed explanation. I did everything and it worked perfectly. The best way of learning react is doing a project and this is one suitable one. Thanks for sharing your knowledge !
Thank you so much 👍🏼🙏 for all you have done to bring this to us, appreciate your efforts
Thank you very glad to hear this
thanks for such an amazing video tutorial from scratch, it helped me to learn a lot. Thank you so much once again.
I love this video! You need hands on experience in react to understand this tutorial. This was amazing!
Thanks a lot for this content. I've learned so much, and build similar project thanks to this video!
You are the best!!!! all these goodies in one video? thanks alot for this, it really helped me , God bless u sir...all the way from Nigeria!!!
New sub!!! Thanks for share your knowledge.
You are a true teacher explaining everything. Thank You for your time and effort. I know what it takes to make videos like this. Awesome contributions to the community.
Wow thanks so much for this feedback and positive comment.
Thanks for the tutorial. I've been trying to make a career switch to more web technologies. I've been stuck in the 'tutorial hell' but you've given me an insight on how much I need to know to get started. I think after this video, I can start making my projects :) Your English is great and very easy to understand!
I so glad to hear my friend. Just keep working and it will all start falling in place💪. Thanks for the comment
Thank you sir..!!!! I learnt so much things from this tutorial...
Very detail. That's all I need.Ty
That's a lot of hours of my life I'll never get back. Earned my like and my subscribe, keep up the good work.
Loved watching this Project taught me so much new things
It helps me very much to understand MERN. Thank you very much.
Nice one Here. Thanks alot
Thank bro..!!!! I learn so much things from this tutorial...
I found only person on youtube that makes connection with mongoDB with end level simplicity
very nice! the structure of your coding is so clean and readable
step by step and detailed keep up the good work!
Thank you so much for the positive comment🤓👌
Thank you very much! This have been so helpfully to improve my skills
Greetings from Colombia
So glad you found it usefull hope to make many more
This is a great video, keep up the good work.
Thanks for the tutorial
Great tutorial, thank you!
Great video... it will help me out in my current project
Thank you sir ,great content.
Thank you such a good turtorial and I like the lengthy videos. If people dont like it you can allways just make a playlist with shorter once.
Really appreciate your work sir! I had basic react/redux background but still found this tutorial is hard to fully understand. I spent two weeks to complete this project, it's been a hardwork but I make it, thank you again! For me the hook functions part is the most difficult because the last time I used react is been one year ago and back to that time I used class components, my suggestion here is you can explain the logic behind redux state management while coding, that would be better to those who are new to react/redux. I hope you enjoy your day and keep the good work!
Thanks champ just keep learning and working and you will great. I will be using redux toolkit in the upcoming videos hope to mae things more clear in those videos thanks for the feedback
Fantastic Tutorial.
Thank you so much for this. After coding bootcamp I was struggling to find ways of understanding some parts of React and after this, I have MUCH more understanding. This helped me so much. Thanks again
Wow great to hear 👏
@@the_full_stack_junkie Hi, this is a question someone posted before but in my redux, the getProducts is just showing loading: true, products: [ ]. I have the data in my mongodb atlas but somehow the homescreen just shows "loading...". do you know what might be the problem? it looks like the request is sending but the success part never happens
I just wanna say , AWESOME
Thank you so much for sharing your knowledge
My pleasure hope you found it useful
One Word, Brilliant!!!
Thanks champ
Thank you for the video,
your ways of explaining things it's awesome, like it. Can you please add on that of it the payment or checkout functionalities? Thank you in advice.
I noticed that you uploaded very useful videos videos , great bro 👍
Thank you so much. Helped me a lot in our project.
So glad to hear that is my ultimate goal🤓💪
really like the workflow and how you really went step by step. keep it up! liked and subscribed
Thanks man!!🤓💪
Very good tutorial. I found that is no longer used in React now. After google, I found that is used instead, which can help avoid the error 'Switch' is not defined react/jsx-no-undef.
Nice to hear a local voice! keep up the good work boet!
Hahaha thanks champ🇿🇦🤓
You project help me to learn to much Thank You
Zajakallah khairan❤️thanks
This may have been a long video, but it literally covers a whole stack from start to finish. Very easy to understand, great content to learn from. I hope you put out more content like this because I myself and I am sure there are others that would benefit from your knowledge! Great video man
Thank you so much champ. Full stack Reddit clone coming soon.
@@the_full_stack_junkie That would be awesome!
I LEARNED A LOT FROM THE VIDEO THANKS SO MUCH, KINDLY DO A VIDEO FOR CHECKOUT AND STRIPE CARD
Thanks a lot for the video. It would be great if you next video about NEST NEXT and TypeScript
Thank you
Please make more projects on MERN with all functionality such as, login authentication and payment gateway.
Thanks for save my life....... 😉😉😉😉😉😉
Thanks for the great tutorial, I learned a ton of info about Redux, kindly may i ask why you didn't use try & catch in CartItem action like you did in product action? Thanks again for your time and your tutorial
Thanks for the tutorial, I really appreciate.
Kindly help me on how to do the deployment to heroku part
Thank you so much 😊How can I include a search bar for this? And a form to put the product items from UI rather than from backend
Very helpful
Hey ! Here I'm requesting you to create a short tutorial on redux with functional vs reduc with class components..
It probably confusing for some people like me.
Please just short video 🙏
And thank for providing such awesome content, specially that ecommerce tut❤️
Great Stuff!
🤓👌
Hello, I love your video because you take the time to go thru all steps of a full stack. Don't apologize for taking good quality time to explain stuff to us. Slow down, I will pause and take a break if I so need, but when you speed up because you think it takes to long, it breaks the rythm. Also, I can speed up if I already know the stuff. So please keep doing your magic and don't bother the duration. :)
Thanks for the feedback champ!🤓🤘
Thank your for this coure full stack
Loved this. Really looking forward to seeing alot more react content from you.
Thanks my man content coming today👌
Hi FSJ,
your tutorial is super helpful. CSS was painful, but I could learn a bit of new things. I've got some question for now :)
1. Is your approach close to best practices? It feels like
2. At 2:42:34 I get a bit headache. Why do you override the existing item? In line 8 we noticed the product already exist.
Add: Ok now I got it. It's like updating the existing item
3. Would it not better name "product -> product_id" ?
Thank you!!
thank you so much❤💕👌
very good!
Thank you very much
excellent tutorial
Thank you so much
Thank you very much bro
Your very welcome
finally i found you my man! your perspective when you code really close with me. LOL nice to meet you. Hello from indonesia
Glad to hear champ!!💪🤓✌
@@the_full_stack_junkie can I get Use Case diagram
Successfully finalized the project and now I can confidently say I have good command on Redux. Thank you for brilliant lengthy content.
Nice video thanks a lot for this video
My pleasurr
i'm just starting now hopefully i can make it hahahaha
Great video. You nailed it. Could you if possible proceed with checkout and authentification? Thanks for the good work. Your clarity in explaining stuff makes the video even two times shorter.
Thank you so much for the wonderful content, material and explanations. It's a long video but worth watching and learn the MERN stack.
Nice copy! I will watch though
This was awesome and I really appreciate it , do you have any videos on deploying MERN applications such as this one?
Thanks for the video.
Love from India❤️
Hope you found it helpful and if you have any other topics let me know!
@@the_full_stack_junkie please make video for JavaScript data structures
Man, your Afrikaans accent is so classy!
Hahaha thank you 💪🤓🇿🇦
hey, how to use qtyChangehandler function on different types of product category which is stored in separate file in database??
Thanks you very much. I have a problem with save the cart in my project level basic. I don't know cart data should be save in localStorage or in User database or in Cart database. Hope u explain for me 🥰
Man you've just became my favourite content creator. I know sooner or later you will start charging for your course, and to be honest, fair enough... but I'm your fan.
Your code is clean, it matches the style I like, using css name convention, you don't repeat yourself, and above all, the way you explain everything it just sinks.
I'm confident to say that I've learnt more from your content than anyone else.
Also, the projects you tackle, most of the times have real life usage, in most cases I replicate your tutorial so many times that I end up learning.
Congrats and keep up the awesome job!
I hope your channel grows and I will be there to support you.!
Geez man this comment truly means the world to me thank you for your kind words and support i really do appreciate it🙏
I have big projects planned for the future so keep watching currently just busy with client work but once that is done i will be uploading big real world projects again. Thanks for your support and kind words this is what keeps me wanting to make more and more quality videos😇🤓
Thank you so much sir.
Please guide to. Create an E-learning website with online login n video classes with record button
Thank you
I would be great 😌 if you include how to deploy to heruku and git
Best on TH-cam ❤️
Thanks champ🙏
Hey, I find an error under cartScreen.js - cannot read the property length - undefined , I couldn't resolve it, why it occurs? Please let me know.
Hi FSJ
Super Video, And COLON it is :-)
Question, i am having issue wrapping my head on how to create/use a big collection.
in the examples I have looked at as well as yours are always 4-5 fields in the collection, but in the real world a product, users, customers etc may have 100's of fields per collection.
How would you approach this in the models?
Can we separate the models in chunks? like Name model, address model, phone model, authorization model etc...
Is having as many fields have a real impact on performance?
Hope you can enlight me :-)
thx
Norm
Thanks a lot for great stuff. Really helped me to understand things from scratch...!!
Hi, I have posted 2 issues on your github link. Can you please help me here?
Server running on port 5000
MongoDB connection FAIL
Unable to connect to MongoDB. I'm stuck.
thank you!
My pleasure!🤓👌
Great content.What other functionality can I add to this tutorial and where to find them.
I have an issue at 3:34:17 where you simply update the qty from the cartItem and send the data to the parent component that is the cart screen. and the qty is updated in the cart and the data is showing, but in my situation when I update the qty in the cartItem section like you but I get a return of an array from the parent component which contains the actual object I want, can you please tell me why this is happening as the first time it was an object coming from the cart screen but after updating qty the data is coming as an array ?? BTW thanks for making such an amazing tutorial by explaining each detail.
good tutorial, only caveat i see there is no backend dashboard, example how to upload and manage product seamless. hope to see in upcoming video.
can you make video on how to integrate payment gateway for the shopping cart ?
Nice video. I don't understand at 2:43:55. I looked at the entire cartReducer, for action ADD_TO_CART, you are checking the item for payload to see if it is in the cartItems. If it is (existItem is truthy), then why you map the cartItems again to add the item?
Thank you ,Thank you Thank You, May God Bless you. From Stellenbosch ?
🙏🇿🇦
I have an error, when sending a request for a particular product using id, the request gets sent with product. for example instead of sending a request to localhost/api/products/id, it sends to localhost/product/api/products/id. How can i fix this ?