Full Stack eCommerce Cart build (React, Redux, Node, Express, MongoDB)...From Scratch💥

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_full_stack_junkie]

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🤓

[@alejomakevids]

Greate job mate! Keep it up.

[@the_full_stack_junkie]

@@alejomakevids thanks🙏🤓

[@the_full_stack_junkie]

@@alejomakevids love your name btw 😂

[@pavanilla4374]

I learnt context api from your vidoe but u released this with redux 🙂🙂

[@the_full_stack_junkie]

Hope you found i helpful💪🤓

[@historianooficialunofficia2085]

increible project man, ive wanting for so long to unite node and react, thank you, very very much!

[@JoelGrayson]

Thank you so much for covering the different aspects of a web app. You are very generous!

[@awaraamin6850]

Thank you for sharing all of these for free! You guys are angels on the Earth!

[@SimPwear84]

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

[@unmoybiswas5190]

thanks for such an amazing video tutorial from scratch, it helped me to learn a lot. Thank you so much once again.

[@nijojoseph]

Best MERN tutorial video, I have seen. Congrats and keep up the good work.

[@partygrouppl]

Thanks a lot for this content. I've learned so much, and build similar project thanks to this video!

[@awara6984]

wow wow! Thank you so much for all the effort you have put into making this super useful video!

[@oscar51007]

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

[@the_full_stack_junkie]

Thanks so much really appreciated the comment 🙏

[@berrieberrie1555]

Thank you so much for the video from Malaysia 🇲🇾

[@mahendranath2504]

Thank you so much 👍🏼🙏 for all you have done to bring this to us, appreciate your efforts

[@the_full_stack_junkie]

Thank you very glad to hear this

[@yogeshyewale478]

Loved watching this Project taught me so much new things

[@huynguyengia2960]

Very detail. That's all I need.Ty

[@albertoguerra1154]

I love this video! You need hands on experience in react to understand this tutorial. This was amazing!

[@yaseswinamala5422]

Thanks for the tutorial

[@Kermin00]

Great tutorial, thank you!

[@johnandersontorresmosquera6830]

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 !

[@yasithsfonseka7658]

Thank you sir..!!!! I learnt so much things from this tutorial...

[@Naimadmdp]

New sub!!! Thanks for share your knowledge.

[@faridul.hassan]

It helps me very much to understand MERN. Thank you very much.

[@lindatochukwu3081]

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!!!

[@marvinsejaphala1240]

This is a great video, keep up the good work.

[@afif_alam]

Zajakallah khairan❤️thanks

[@anonysmooth648]

very nice! the structure of your coding is so clean and readable step by step and detailed keep up the good work!

[@the_full_stack_junkie]

Thank you so much for the positive comment🤓👌

[@asianroster4608]

I found only person on youtube that makes connection with mongoDB with end level simplicity

[@2kceltics]

I love you from Argentina! Best fullstack teacher ever! 😍

[@nhantrong7395]

Thank bro..!!!! I learn so much things from this tutorial...

[@tobjianouar7070]

Thank you sir ,great content.

[@funnyvideosforlife]

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.

[@the_full_stack_junkie]

Wow thanks so much for this feedback and positive comment.

[@felipejal711]

Thank you very much! This have been so helpfully to improve my skills Greetings from Colombia

[@the_full_stack_junkie]

So glad you found it usefull hope to make many more

[@shortclips5742]

One Word, Brilliant!!!

[@the_full_stack_junkie]

Thanks champ

[@jassegama97]

Thank you!!

[@KrzysztofJozwik]

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.

[@cybergatescommunicationnet6073]

Nice one Here. Thanks alot

[@ChrisReyCap]

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!

[@the_full_stack_junkie]

I so glad to hear my friend. Just keep working and it will all start falling in place💪. Thanks for the comment

[@yasharaleemsh3187]

Thank you for the video,

[@vinodpatel9983]

Fantastic Tutorial.

[@pranavthirumalai126]

LOLL @@ "So if you've seen my mongoDB crash course, you will know these things" (27:20)! Excellent tutorial and not too long

[@ramanjaneyappan7964]

Thank you so much for sharing your knowledge

[@the_full_stack_junkie]

My pleasure hope you found it useful

[@json9353]

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.

[@kiambojyms2196]

Great video... it will help me out in my current project

[@borislai9970]

I just wanna say , AWESOME

[@rakhisingh9797]

I noticed that you uploaded very useful videos videos , great bro 👍

[@axelekamba7333]

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.

[@noahkwon8326]

really like the workflow and how you really went step by step. keep it up! liked and subscribed

[@the_full_stack_junkie]

Thanks man!!🤓💪

[@mdfaiyaz5686]

Thank you Please make more projects on MERN with all functionality such as, login authentication and payment gateway.

[@abdelrahmanmagdy8946]

thank you so much❤💕👌

[@carlatemporosa2723]

Thank you so much. Helped me a lot in our project.

[@the_full_stack_junkie]

So glad to hear that is my ultimate goal🤓💪

[@muhammadazeem8852]

I LEARNED A LOT FROM THE VIDEO THANKS SO MUCH, KINDLY DO A VIDEO FOR CHECKOUT AND STRIPE CARD

[@michaelkinful1915]

Thank you very much

[@gamesandmoregames8946]

Very helpful

[@HanJin-lg8km]

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.

[@marwenmaatougui116]

Thank your for this coure full stack

[@sibajenesikasukwe]

Thanks for the tutorial, I really appreciate. Kindly help me on how to do the deployment to heroku part

[@user-sl7hx4bs7q]

Thanks a lot for the video. It would be great if you next video about NEST NEXT and TypeScript

[@yx1566]

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!

[@the_full_stack_junkie]

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

[@NandoLofi]

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

[@the_full_stack_junkie]

Wow great to hear 👏

[@kannabim1437]

@@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

[@atcatc4455]

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

[@tareknebli2052]

You project help me to learn to much Thank You

[@alchelvly3391]

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

[@the_full_stack_junkie]

Thank you so much champ. Full stack Reddit clone coming soon.

[@arkmy]

@@the_full_stack_junkie That would be awesome!

[@ashikrabbi4300]

Thank you

[@mrwatt4356]

Loved this. Really looking forward to seeing alot more react content from you.

[@the_full_stack_junkie]

Thanks my man content coming today👌

[@dndLeitch]

Nice to hear a local voice! keep up the good work boet!

[@the_full_stack_junkie]

Hahaha thanks champ🇿🇦🤓

[@sammbende2]

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.

[@AnujGupta-kw9sw]

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❤️

[@sandeepaishara7062]

Thanks for save my life....... 😉😉😉😉😉😉

[@futbalist5293]

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

[@markeem321]

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" ?

[@titi2424]

very good!

[@g.shanmugasundaram1747]

Thank you so much for the wonderful content, material and explanations. It's a long video but worth watching and learn the MERN stack.

[@rendyartha4950]

finally i found you my man! your perspective when you code really close with me. LOL nice to meet you. Hello from indonesia

[@the_full_stack_junkie]

Glad to hear champ!!💪🤓✌

[@kat77717]

@@the_full_stack_junkie can I get Use Case diagram

[@Aiducateur]

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. :)

[@the_full_stack_junkie]

Thanks for the feedback champ!🤓🤘

[@rodrigonovaes7812]

Great Stuff!

[@the_full_stack_junkie]

🤓👌

[@oshricohen3993]

thank you!

[@the_full_stack_junkie]

My pleasure!🤓👌

[@pjos2981]

Thank you so much sir. Please guide to. Create an E-learning website with online login n video classes with record button

[@remi2959]

This was awesome and I really appreciate it , do you have any videos on deploying MERN applications such as this one?

[@murali7370]

Thanks for the video. Love from India❤️

[@the_full_stack_junkie]

Hope you found it helpful and if you have any other topics let me know!

[@murali7370]

@@the_full_stack_junkie please make video for JavaScript data structures

[@htcsaj7876]

Great content.What other functionality can I add to this tutorial and where to find them.

[@mohamedrifkan6577]

I would be great 😌 if you include how to deploy to heruku and git

[@zainulabideen7628]

Thank you very much bro

[@the_full_stack_junkie]

Your very welcome

[@alaminhowlader36]

excellent tutorial

[@the_full_stack_junkie]

Thank you so much

[@amrosaad9730]

thanks.

[@normandrioux2529]

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

[@leguizbsit3162]

i'm just starting now hopefully i can make it hahahaha

[@jakubgadzala7474]

Nice copy! I will watch though

[@SunitaDevi-hs7pz]

Nice video thanks a lot for this video

[@the_full_stack_junkie]

My pleasurr

[@rodrigonovaes7812]

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.!

[@the_full_stack_junkie]

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😇🤓

[@chuanluuinh9276]

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 🥰

[@TheYourfriend123]

Successfully finalized the project and now I can confidently say I have good command on Redux. Thank you for brilliant lengthy content.

[@mohinderverma1765]

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.

[@vst87]

Thanks a lot for great stuff. Really helped me to understand things from scratch...!!

[@vst87]

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.

[@yhr4052]

Man, your Afrikaans accent is so classy!

[@the_full_stack_junkie]

Hahaha thank you 💪🤓🇿🇦

[@AnujGupta-kw9sw]

Best on KZbin ❤️

[@the_full_stack_junkie]

Thanks champ🙏

[@thobelanitabalaza8566]

Thank you ,Thank you Thank You, May God Bless you. From Stellenbosch ?

[@the_full_stack_junkie]

🙏🇿🇦

[@ramanjaneyappan7964]

can you make video on how to integrate payment gateway for the shopping cart ?

[@javascriptworld98]

hey, how to use qtyChangehandler function on different types of product category which is stored in separate file in database??

[@professordeyi5177]

Thank you so much. I've learnt a lot from this content. Please Keep doing such long projects tutorials they are really helpful.Your video is awesome. I think it would be nice if you put the log In functionality and the payment section. thank you. Love from Zimbabwe

[@SnehasishGhoshSg]

Great piece of work. Why did you leave the CRUD operation in the MongoDB. That would have completed this 100%, given you have put soo much effort in this. Thanks man.

[@the_full_stack_junkie]

Hey man so I am planning a full ecommerce build. But I have been busy with uni and work and have gotten around to recording this yet. Thanks for comment and patience

[@jiezhang6723]

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?