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

Поделиться
HTML-код
  • Опубликовано: 7 сен 2024

Комментарии • 515

  • @the_full_stack_junkie
    @the_full_stack_junkie  3 года назад +79

    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🤓

  • @asianroster4608
    @asianroster4608 3 года назад

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

  • @HanJin-lg8km
    @HanJin-lg8km Год назад +2

    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.

  • @2kceltics
    @2kceltics Год назад +1

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

  • @TheYourfriend123
    @TheYourfriend123 2 года назад +2

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

  • @funnyvideosforlife
    @funnyvideosforlife 2 года назад +5

    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.

  • @alchelvly3391
    @alchelvly3391 3 года назад +14

    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
      @the_full_stack_junkie  3 года назад

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

    • @arkmy
      @arkmy 3 года назад

      @@the_full_stack_junkie That would be awesome!

  • @NandoLofi
    @NandoLofi 2 года назад +1

    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
      @the_full_stack_junkie  2 года назад

      Wow great to hear 👏

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

  • @lindatochukwu3081
    @lindatochukwu3081 3 года назад +1

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

  • @KrzysztofJozwik
    @KrzysztofJozwik 2 года назад +1

    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.

  • @yhr4052
    @yhr4052 3 года назад +6

    Man, your Afrikaans accent is so classy!

  • @JoelGrayson
    @JoelGrayson 2 года назад +1

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

  • @awaraamin6850
    @awaraamin6850 2 года назад +1

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

  • @Aiducateur
    @Aiducateur 2 года назад +1

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

  • @rendyartha4950
    @rendyartha4950 3 года назад +3

    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
      @the_full_stack_junkie  3 года назад

      Glad to hear champ!!💪🤓✌

    • @kat77717
      @kat77717 3 года назад

      @@the_full_stack_junkie can I get Use Case diagram

  • @berrieberrie1555
    @berrieberrie1555 3 года назад +1

    Thank you so much for the video
    from Malaysia 🇲🇾

  • @oscar51007
    @oscar51007 3 года назад +20

    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

  • @sandeepaishara7062
    @sandeepaishara7062 3 года назад +2

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

  • @albertoguerra1154
    @albertoguerra1154 2 года назад +1

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

  • @rodrigonovaes7812
    @rodrigonovaes7812 3 года назад +4

    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
      @the_full_stack_junkie  3 года назад +1

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

  • @ChrisReyCap
    @ChrisReyCap 3 года назад +6

    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
      @the_full_stack_junkie  3 года назад +2

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

  • @yx1566
    @yx1566 3 года назад +1

    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
      @the_full_stack_junkie  3 года назад

      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

  • @nijojoseph
    @nijojoseph 3 года назад +2

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

  • @johnandersontorresmosquera6830
    @johnandersontorresmosquera6830 2 года назад +1

    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 !

  • @SimPwear84
    @SimPwear84 2 года назад +3

    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

  • @mohamedrifkan6577
    @mohamedrifkan6577 3 года назад +2

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

  • @leguizbsit3162
    @leguizbsit3162 Год назад +1

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

  • @anonysmooth648
    @anonysmooth648 3 года назад +3

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

  • @yogeshyewale478
    @yogeshyewale478 2 года назад +1

    Loved watching this Project taught me so much new things

  • @awara6984
    @awara6984 2 года назад +1

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

  • @mdfaiyaz5686
    @mdfaiyaz5686 3 года назад +3

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

  • @unmoybiswas5190
    @unmoybiswas5190 3 года назад +1

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

  • @json9353
    @json9353 3 года назад

    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.

  • @pranavthirumalai126
    @pranavthirumalai126 3 года назад

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

  • @SnehasishGhoshSg
    @SnehasishGhoshSg 3 года назад +2

    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
      @the_full_stack_junkie  3 года назад

      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

  • @yasithsfonseka7658
    @yasithsfonseka7658 3 года назад +1

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

  • @historianooficialunofficia2085
    @historianooficialunofficia2085 3 года назад +4

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

  • @nhantrong7395
    @nhantrong7395 3 года назад +1

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

  • @AnujGupta-kw9sw
    @AnujGupta-kw9sw 3 года назад +2

    Best on RUclips ❤️

  • @axelekamba7333
    @axelekamba7333 3 года назад +1

    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.

  • @faridul.hassan
    @faridul.hassan 3 года назад

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

  • @FacundoTroitero
    @FacundoTroitero 2 года назад +1

    I followed this tutorial and made the hole thing work 100%. I hope Im able to undertand at least some of the things that are happening here one day. The whole redux part doesnt make any sense to me. Does anyone actually understand anything about that or devs just copy and past like I do?

    • @the_full_stack_junkie
      @the_full_stack_junkie  2 года назад +1

      I think the more you use it the more it start making sense. Nobody just knows the under the hood workings of things at the start but after a while you start seeing patterns accross program in general and things start making sense. You can basically see Redux or any state management as on big gaint object store in memory that your application can subscribe to and view work with things through actions and these actions then user reducers to manupilate this gaint object. Then all things that are internally subscribe to this gaint object will then be picked up by react and then rerendered.
      But just keep reading and building and don't stop. It will all come together slowly but surely.

  • @sammbende2
    @sammbende2 2 года назад +1

    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.

  • @huynguyengia2960
    @huynguyengia2960 3 года назад +1

    Very detail. That's all I need.Ty

  • @priya_18nusrat
    @priya_18nusrat 2 года назад +1

    Zajakallah khairan❤️thanks

  • @kiambojyms2196
    @kiambojyms2196 2 года назад +1

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

  • @mahendranath2504
    @mahendranath2504 3 года назад +1

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

  • @markeem321
    @markeem321 3 года назад +1

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

  • @borislai9970
    @borislai9970 3 года назад

    I just wanna say , AWESOME

  • @rakhisingh9797
    @rakhisingh9797 2 года назад

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

  • @shortclips5742
    @shortclips5742 3 года назад +1

    One Word, Brilliant!!!

  • @felipejal711
    @felipejal711 3 года назад +1

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

  • @partygrouppl
    @partygrouppl 3 года назад +1

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

  • @carlatemporosa2723
    @carlatemporosa2723 3 года назад +1

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

  • @ninjaz0rd
    @ninjaz0rd 2 года назад +1

    You were right, it is colon.

  • @dndLeitch
    @dndLeitch 3 года назад +1

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

  • @sibajenesikasukwe
    @sibajenesikasukwe 3 года назад +1

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

  • @mohinderverma1765
    @mohinderverma1765 2 года назад

    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.

  • @AnujGupta-kw9sw
    @AnujGupta-kw9sw 3 года назад

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

  • @noahkwon8326
    @noahkwon8326 3 года назад +1

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

  • @marvinsejaphala1240
    @marvinsejaphala1240 3 года назад +1

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

  • @Regardez62834
    @Regardez62834 3 года назад +1

    You project help me to learn to much Thank You

  • @cybergates597
    @cybergates597 2 года назад +1

    Nice one Here. Thanks alot

  • @mihir7126
    @mihir7126 3 года назад

    The only thing thing that’s ridiculous is that the PS5 costs $499 in this. Great video!

  • @zainulabideen7628
    @zainulabideen7628 2 года назад +1

    Thank you very much bro

  • @muhammadazeem8852
    @muhammadazeem8852 3 года назад

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

  • @yaseswinamala5422
    @yaseswinamala5422 7 месяцев назад

    Thanks for the tutorial

  • @mahmoudalmadhoun7174
    @mahmoudalmadhoun7174 3 года назад +2

    Brother, I hope to make a complete project with the deletion of the cards and uploading and with modification and login and a complete site from scratch until the end

    • @mahmoudalmadhoun7174
      @mahmoudalmadhoun7174 3 года назад +1

      Wonderful explanation, I always follow all your new things

  • @lubraluna
    @lubraluna 3 года назад +3

    If at 21:42 you get an error and your db doesnt connect to your cluster, go back to mongo atlas and at Network Access click "+ADD IP ADRESS", then click on the button that says "Add current IP ADRESS", Good luck

  • @Kermin00
    @Kermin00 3 года назад +1

    Great tutorial, thank you!

  • @tobjianouar7070
    @tobjianouar7070 3 года назад +1

    Thank you sir ,great content.

  • @ramanjaneyappan7964
    @ramanjaneyappan7964 3 года назад +1

    Thank you so much for sharing your knowledge

  • @murali7370
    @murali7370 3 года назад +1

    Thanks for the video.
    Love from India❤️

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад

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

    • @murali7370
      @murali7370 3 года назад +1

      @@the_full_stack_junkie please make video for JavaScript data structures

  • @jassegama97
    @jassegama97 2 года назад +1

    Thank you!!

  • @yasharaleemsh3187
    @yasharaleemsh3187 3 года назад +1

    Thank you for the video,

  • @franciscomastucci2581
    @franciscomastucci2581 3 года назад +2

    Great tutorial!. A lot of regards. I could follow unitl. 3:08:40. I changed the proxy url, but now the error is 431 "headers too large" please help me, im a junior and dont know how to resolve it. The code i typed is equal to the yours. So can we do anything to resolve this error?
    Thanks bro!!

  • @thobelanitabalaza8566
    @thobelanitabalaza8566 3 года назад +1

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

  • @marwenmaatougui116
    @marwenmaatougui116 3 года назад +1

    Thank your for this coure full stack

  • @michaelkinful1915
    @michaelkinful1915 3 года назад +1

    Thank you very much

  • @robino8589
    @robino8589 3 года назад +2

    Hello, Maybe it's a bit late to ask (I don't know if you're still watching the comments on this video) but I don't quite understand why create constants? When it's not mandatory because you could put them directly in the reducer like this: box "ADD_TO_CART": {}...

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Hey man so basically the reason for this it just to make importing and avioding spelling errors. If you would to work in teams this is a safer approach as one only needs to import the constants and not worry about the nitty gritty things like possible spelling error. It is totally optional and not required at all.

    • @robino8589
      @robino8589 3 года назад +2

      @@the_full_stack_junkie Oh thank you for your quick answer :o Yes I see, it's true that it's more practical this way and I understand the process! Thank you again for your quick answer, I never post comments but frankly your content is excellent.

    • @the_full_stack_junkie
      @the_full_stack_junkie  3 года назад +1

      Thanks champ💪🤓

  • @harryminnie6
    @harryminnie6 3 года назад +1

    Also from South Africa!

  • @abdelrahmanmagdy8946
    @abdelrahmanmagdy8946 3 года назад +1

    thank you so much❤💕👌

  • @Naimadmdp
    @Naimadmdp 3 года назад +1

    New sub!!! Thanks for share your knowledge.

  • @alaminhowlader36
    @alaminhowlader36 3 года назад +1

    excellent tutorial

  • @user-sl7hx4bs7q
    @user-sl7hx4bs7q 3 года назад

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

  • @ashikrabbi4300
    @ashikrabbi4300 3 года назад +1

    Thank you

  • @vinodpatel9983
    @vinodpatel9983 3 года назад

    Fantastic Tutorial.

  • @Shin-jj3qt
    @Shin-jj3qt 3 года назад +1

    I think this one is similar with Brad Traversy's MERN stack course in Udemy :D.

    • @Fatima-ie5kj
      @Fatima-ie5kj 3 года назад +1

      Yea exactly but who cares he's providing for free ,

  • @g.shanmugasundaram1747
    @g.shanmugasundaram1747 3 года назад

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

  • @pjos2981
    @pjos2981 3 года назад

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

  • @jakubgadzala7474
    @jakubgadzala7474 3 года назад +1

    Nice copy! I will watch though

  • @atcatc4455
    @atcatc4455 2 года назад

    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

  • @vst87
    @vst87 3 года назад +1

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

    • @vst87
      @vst87 3 года назад

      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.

  • @amrosaad9730
    @amrosaad9730 3 года назад +1

    thanks.

  • @professordeyi5177
    @professordeyi5177 3 года назад

    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

  • @SunitaDevi-hs7pz
    @SunitaDevi-hs7pz 3 года назад +1

    Nice video thanks a lot for this video

  • @remi2959
    @remi2959 2 года назад

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

  • @rodrigonovaes7812
    @rodrigonovaes7812 3 года назад +1

    Great Stuff!

  • @mrwatt4356
    @mrwatt4356 3 года назад +1

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

  • @enzavonmetatronics3109
    @enzavonmetatronics3109 2 года назад +1

    Hey Jun :-) Thank you master for your skills an knowledge to produce such a huge work.
    i am a bloody beginner with coding at all (since summer last year i study in a course, that dures one year. now we go into the inner with backend and frontend, and i have a real problem to understand the content.
    on this tut i sit since one week .. with babysteps.. THAAANK YOU! (only 20 minutes left now 'yay :-]'.. but .. i cannot make the ProductSite visible .. could it be, that the versions do not fit together and i have to rename something? :/

    • @the_full_stack_junkie
      @the_full_stack_junkie  2 года назад +1

      React router has been updated with breaking changes just check out the offical docs

    • @enzavonmetatronics3109
      @enzavonmetatronics3109 2 года назад

      @@the_full_stack_junkie oh ok .. hopefully will find the doc (*peace*) .. :-) thank You