Ecommerce App using React JS and Redux with Fetch API 2021 | React JS Project for Beginners

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 315

  • @TutorialsDev
    @TutorialsDev  Рік тому +2

    Anybody who is facing any proble m *(regarding react router v6 and react 18)* or want to see an *updated version* of this video can watch this new video => ua-cam.com/video/m2fFde492Ew/v-deo.html.
    *Please don’t forget to Subscribe the channel* ua-cam.com/users/TutorialsDev

  • @ebukajohn5325
    @ebukajohn5325 2 роки тому +8

    Please next time you post a video like always display the source code, so that even a beginner can learn, someone has been trying for days to code this eccormerce websites because the video is not well explanatory, but with source it helps a lot

  • @rhemamusic6502
    @rhemamusic6502 Рік тому +6

    The video skipped a part in 47:35 (Cart.jsx)...Some steps there arent in the video. Maybe a video edit or source code will help

    • @sahanaks4858
      @sahanaks4858 Рік тому

      Even In source code it's not there

  • @Nicolas-ox7te
    @Nicolas-ox7te Рік тому +3

    Gracias!!! Te escribo en español para que sepas que hiciste un video completamente universal!! y entendible... Thx master!

  • @shabanamehr3368
    @shabanamehr3368 2 роки тому +3

    Thanks a lot for such efficient effort. I am learning react, redux and db management. your vedio is to the point.

  • @niteshchaurasiya1531
    @niteshchaurasiya1531 2 роки тому +12

    Really video is very helpful . but if you provide the source code, it is very useful for beginners . And if you explain with audio then it was great.

  • @WildHowlYT
    @WildHowlYT Рік тому +3

    A great use case of Redux, nice work 👍

  • @ravindrareddy5392
    @ravindrareddy5392 2 роки тому +2

    getting CORS issues while taking ${id} followed by url i.e in products/id page not getting the image and titles , any suggestions

  • @joelmantoss3596
    @joelmantoss3596 2 роки тому +4

    Thank you for this wonderful tutorial on Redux. God bless your efforts.

  • @SamuelMinale21
    @SamuelMinale21 2 роки тому +29

    It was a good tutorial but finally, in the Cart section you cut out some code and it makes the tutorial incomplete. An hour wasted.

    • @thyagarajn616
      @thyagarajn616 2 роки тому +4

      Brother to say honest they just want views and su bscribe.. learn from w3schools or buy text books or kindle.. most of the UA-cam videos are fake.

    • @SamuelMinale21
      @SamuelMinale21 2 роки тому +2

      @@thyagarajn616 it looks like that. But there are a lot of good UA-camrs who gives us a great tutorial. Anyway as you have said it is the number one choice to study on a fully responsible sites but sometimes you think watching a tutorial on UA-cam is a shortcut and when you encounter with such a non-responsible UA-camr, you know you made a mistake. Anyway I hope the UA-camr will fix this issue and apologies in his next video.

    • @sushantbhagat512
      @sushantbhagat512 Рік тому +1

      Total wastage of time ...i tried and go along with the video for hour and later realized code doesn't work even the store portion says module doestn work

    • @way2sdhana
      @way2sdhana Рік тому

      100% true

    • @sports4yoo
      @sports4yoo Рік тому

      Thank you Samuel for telling us.i was also working on it.

  • @dragonthefairygod5053
    @dragonthefairygod5053 2 роки тому +31

    when you come to the part when using Switch use Routes and instead of components={Home} use element={} due to updates with react dom the component switch has been changed to Routes

    • @xcrxwadda8287
      @xcrxwadda8287 2 роки тому

      Yeah

    • @HEYY_SKY-45
      @HEYY_SKY-45 2 роки тому +1

      Update React Router Dom to version 5.2.0 or 6

    • @bogdanseliman8138
      @bogdanseliman8138 2 роки тому +2

      That's true. Another one: You must include the CSS styles for skeleton to render (import "react-loading-skeleton/dist/skeleton.css")

    • @KumarPrince21
      @KumarPrince21 2 роки тому

      Yes you are right but after using Routes instead of Switch the whole webpage becomes blank nothing is visible after changes

    • @mirzairtiza5113
      @mirzairtiza5113 2 роки тому

      @@KumarPrince21 getting some kind of same issue when i redirect to detail page with id, nothing is visible. in latest react router dom

  • @prathimakanadam505
    @prathimakanadam505 2 роки тому

    Super helpful 👍...would like to watch more n more useful videos like this from ur channel..

  • @agusrifaldi4680
    @agusrifaldi4680 2 роки тому +7

    hi pal, can you please share the cart.jsx file cause in 47:37 you've not explain in the video?

  • @RychAhlberg
    @RychAhlberg 5 місяців тому

    40:08 is there a property called “qty” in the data? Or where did you define it?

  • @developpeurfront-end3681
    @developpeurfront-end3681 2 роки тому +1

    uh okay! thank you for the cut at the end .. I couldn't even finish .. uh maybe we should do it's editing properly, or at least give the link of a github .. LOL

  • @nijinjoy9312
    @nijinjoy9312 Рік тому +1

    In this export switch is not found in react -router-dom??

  • @ulrichatin1349
    @ulrichatin1349 6 місяців тому

    excuse me but when you use rfc to generate basic code form, what commande do you touch?

  • @TutorialsDev
    @TutorialsDev  Рік тому

    Source code: github.com/Muhammad-Feroz/React-Ecommerce-App

  • @mehrdadbabahoseinpour1697
    @mehrdadbabahoseinpour1697 2 роки тому +7

    Could you please explain how handle button function in card component works?

  • @muhammadagungakbar6488
    @muhammadagungakbar6488 7 місяців тому

    i got error in switch in app.js and index.js
    i dont know if switch on version react dom 5.1 or already update? how i solve this?

  • @tarynborba2779
    @tarynborba2779 2 роки тому +1

    Was the GitHub or source code link ever provided for this video? Also, the Cart.jsx is not clear and video seem to cutoff.

  • @raipinky7258
    @raipinky7258 Рік тому +1

    Amazing video, very helpful 👏

  • @kellykaufman007
    @kellykaufman007 2 роки тому +1

    As a beginner I found this video to be waaaaay too fast, maybe in the future you could slow down the pace? Otherwise great step by step tutorial!

    • @chrisr2063
      @chrisr2063 2 роки тому +1

      Omg youre so precious.
      You can slow down the video speed via settings option. Smooches and keep doing comedy.

  • @hashirhasmy1042
    @hashirhasmy1042 3 роки тому +2

    Can u get the database connection for this using express or any other backend

  • @tonmoykhan96
    @tonmoykhan96 2 роки тому +1

    Good job bro, but if you add search box in navbar and using search filter method then this tutorial is best on youtube...

  • @rohitrox73
    @rohitrox73 Рік тому

    i am geetibg stuck on this pls help Line 48:29: Assignments to the 'compmount' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

  • @waleedmonim2372
    @waleedmonim2372 2 місяці тому

    on the terminal it says compiled successfully but, on the browser, a blank white screen.

  • @hieufoden6854
    @hieufoden6854 Рік тому

    this video is redux with react ? redux with reduct toolkit ? please tell me.

  • @Isr-techkido
    @Isr-techkido 2 роки тому

    Hi, The Cart component's code didn't show clearly, you just pasted the code and didn't show the full screen for us to review @45:59

  • @rishabdutt2600
    @rishabdutt2600 2 роки тому +2

    bro I am facing problem cart.jsx can you please share the full code of it.

  • @arvinmoradi5162
    @arvinmoradi5162 2 роки тому +21

    hello man and thank for amazing video .
    can you please put the source code ?

  • @danilarealestate3420
    @danilarealestate3420 Рік тому

    What about the cart component? none of the options passed in comments have worked

  • @jeromeblaek3521
    @jeromeblaek3521 Рік тому

    How do l change api to be able to upload my own products and customize the site for my business?

  • @pavan_s5129
    @pavan_s5129 Рік тому

    If i follow this total process......will this web site will responsive??

  • @neerajshukla6622
    @neerajshukla6622 3 роки тому +2

    Amazing video, learned a lot..Hope for more such videos in future.

    • @TutorialsDev
      @TutorialsDev  2 роки тому +1

      Sure 😊

    • @oleksandrmykhailov2668
      @oleksandrmykhailov2668 2 роки тому +1

      @@TutorialsDev hey, thank you for this video. but it is not finished, the part with Cart I mean. Can we expect 2nd part my friend? :)

    • @oleksandrmykhailov2668
      @oleksandrmykhailov2668 2 роки тому +1

      @@TutorialsDev or maybe you can share github with us of finished project at least?

    • @dattaghadage4436
      @dattaghadage4436 Рік тому

      @@TutorialsDev last me skip q kiya card vala

  • @gurmeharsingh7718
    @gurmeharsingh7718 2 роки тому +1

    hi, i am getting filter is not defined error, i was hoping if you could help me

  • @mdarifrahman6571
    @mdarifrahman6571 2 роки тому +1

    Sir, it doesn't have an admin user for the admin to make some edits.....Can you make for us please????

  • @pavan_s5129
    @pavan_s5129 Рік тому

    Please sir clear my dout....is this process is responsive or not?????

  • @pavan_s5129
    @pavan_s5129 Рік тому

    Hello sir can i use this codes and total process......will these works or not?? Please sir respond

  • @Degamer790
    @Degamer790 Рік тому

    Thanks for this amazing video! Are we allowed to use this project in our portfolios?

  • @nasstaiko
    @nasstaiko 2 роки тому +1

    thank you, the tutorial is very good, follow the tutorial and I will develop it again for an assignment at university, teach json please

  • @AliZamanian-x1l
    @AliZamanian-x1l Рік тому

    but what about final price that should pay??

  • @muzammilkhan517
    @muzammilkhan517 2 роки тому

    where is qty comes from in handleCart reducer function??

  • @ahadalichowdhury24423
    @ahadalichowdhury24423 3 роки тому +4

    One request brother, please make a video about useState and useEffect in a project and with explain

  • @simonedusi7190
    @simonedusi7190 2 роки тому +6

    Great video, straight to the point.
    Can I get the git repo link?

  • @sumayeablash952
    @sumayeablash952 2 роки тому +1

    Sorry to say that
    I hate a music in educational viedo
    And
    Can you explain what you do
    I am a new in react
    This way (i mean music) can not help me😔

  • @abby8360
    @abby8360 Рік тому +1

    would have been better if you could have attached the github link for this project.

  • @chmuzammil2277
    @chmuzammil2277 25 днів тому

    Why the first product added twice , you click just for once. I am facing the same problem , anyone who can help me out

  • @zineddineamariche
    @zineddineamariche 2 роки тому

    thanks bro you saved my live

  • @treedash1653
    @treedash1653 2 роки тому +8

    Can you give the source code?

  • @patitorodri
    @patitorodri 2 роки тому

    great video! thank you

  • @itsmeAwaisMalik
    @itsmeAwaisMalik 2 роки тому

    amazing bro... But little explanation is necessary. but a really great effort...

  • @engineercodes313
    @engineercodes313 Рік тому

    Did you complete the deployement of the above project, if yes then can we get the link...

  • @LearningStudent123
    @LearningStudent123 3 роки тому +1

    we're supporting you,, please, upload your next react project,, we want to learn

    • @TutorialsDev
      @TutorialsDev  3 роки тому +3

      Thanks for Supporting Me 😊 Keep Supporting me and New React Project will be Uploaded Soon.

    • @worldislamiccenter1901
      @worldislamiccenter1901 2 роки тому +4

      @@TutorialsDev Please Cart.jsx is not clear. Update that component complete. I want to understand

  • @MuhibSami
    @MuhibSami 3 місяці тому

    bro how u can run your program? tell the commands

  • @jacobkelcy4087
    @jacobkelcy4087 2 роки тому +8

    I'm coding along and am having an issue with the return statement componentMounted = false around line 20 in products component. its giving me the error " To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect." If anyone else caught that and have the solution pls lmk.

    • @lle5159
      @lle5159 2 роки тому +2

      check your code again bro, i'm having no issue following this part

    • @utkarshraj5475
      @utkarshraj5475 2 роки тому +3

      Same bro getting same error what is the reason 🤔

    • @fracasgaming4837
      @fracasgaming4837 2 роки тому +1

      Yep same error did u get any solution of this error

    • @shihabkhandoker8706
      @shihabkhandoker8706 2 роки тому +1

      Same problem facing ,and as a result show component is not showing in my page ,,, please any solution?

    • @rohitrox73
      @rohitrox73 Рік тому

      same

  • @applehridoy1087
    @applehridoy1087 3 роки тому +1

    this project have any user profile ? i mean , when a buyer want to order something then he need to signIn/signUp first

    • @TutorialsDev
      @TutorialsDev  3 роки тому +2

      Not on this Project. But will Upload a Complete Project with User Authentication 😊

    • @applehridoy1087
      @applehridoy1087 3 роки тому

      @@TutorialsDev brother please do hurry

  • @sonuyadav1103
    @sonuyadav1103 Рік тому

    hello i tried but don't solve this error plzzz help VM84:1
    Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at getProduct (product.jsx)

  • @RenuSharma-kr1dg
    @RenuSharma-kr1dg 2 роки тому

    Pls help me to get image in card.. Because Just image name and data is showing in my card...

  • @temurazmm1477
    @temurazmm1477 2 роки тому

    thanks so much. best practise bro

  • @engraminullah5358
    @engraminullah5358 2 роки тому

    love u man

  • @muhajirajir5238
    @muhajirajir5238 2 роки тому

    Thank you for this amazing Video, I can`t show the handle button funtion to...pleas explain or complete this mission please...thanks

  • @BriceFRanklinFongangOuafo
    @BriceFRanklinFongangOuafo Рік тому

    Thanks for the tuto can we fine the source code on git????

  • @adriancamilovillajimenez8010
    @adriancamilovillajimenez8010 2 роки тому

    Hi good morning, it's great, but, you cut the video in a really important part, the shopping cart. ¿Could you share the source code of it?

  • @subhasisdas9916
    @subhasisdas9916 2 роки тому

    mam my products id not fetched
    its says unable to read thst json file

  • @jacobkelcy4087
    @jacobkelcy4087 2 роки тому +1

    video cut at the cart component section is there anyone who has source code for that?

  • @mdtasib4058
    @mdtasib4058 2 роки тому +2

    Hey brother! You did not show part of the cart. That was the main thing. Please give me the source code so I can do the job.

    • @ExpressRajavillage
      @ExpressRajavillage 3 місяці тому

      import React, { useState } from 'react';
      import { useDispatch, useSelector } from 'react-redux';
      import { addCart, delCart } from '../redux/actons';
      const Cart = () => {

      const state=useSelector((state)=>state.handleCart)
      console.log("cart",state)
      const dispatch=useDispatch();
      const addProduct=(product)=>{
      dispatch(addCart(product));
      }
      const delProduct=(product)=>{
      dispatch(delCart(product));
      }
      return (

      Cart
      {state.length === 0 ? (
      Your cart is empty...
      ) : (

      {state.map((product,id) => (





      {product.category}

      {product.title}
      Rating :{product.rating && product.rating.rate}



      Price : ${product.qty*product.price}


      delProduct(product)}>-
      {product.qty}
      addProduct(product)}>+



      ))}

      )}

      );
      };
      export default Cart;
      you can use this cart component

  • @ronakjangir4456
    @ronakjangir4456 Рік тому

    Video is half at 47:36 video is cut and don't get remaining code in cart.js.. Please provide remaining video or code..

  • @EsTeh_Manis2
    @EsTeh_Manis2 11 місяців тому

    Im subscribe bro 👍

  • @TheContentCraftsMan
    @TheContentCraftsMan 2 роки тому

    This video is awesome. But you have not explain the Cart.js component clearly in the last two minutes. That was not good

  • @marcelocabrera9701
    @marcelocabrera9701 2 роки тому

    Can you explain the cart.jsx ? isn´t the code.... Thnkz

  • @asadbekkholdarov2658
    @asadbekkholdarov2658 2 роки тому

    thank you, good job, and can you make a video for interview on js and react

  • @arpitgupta5607
    @arpitgupta5607 7 місяців тому

    bro where to get this bg photo can u send link

  • @olivierboisse1678
    @olivierboisse1678 Рік тому

    Do you have a github repository with the source code ?

  • @princejha9707
    @princejha9707 3 роки тому +3

    nice works :) but it would be very helpful if you would have explained it.

    • @TutorialsDev
      @TutorialsDev  3 роки тому +2

      Will Try 😊

    • @varadarajureddy4690
      @varadarajureddy4690 2 роки тому +1

      Yea even I felt the same... The content is really good.. for beginners like me it would have been helpful if he would have explained it...

    • @debalinadas2022
      @debalinadas2022 2 роки тому

      Give the code of cart

    • @tarynborba2779
      @tarynborba2779 2 роки тому +2

      @@TutorialsDev Was the GitHub or source code link ever provided for this video? Also, the Cart.jsx is not clear and video seem to cutoff.

    • @rohitrox73
      @rohitrox73 Рік тому

      @@TutorialsDev help me pls Line 48:29: Assignments to the 'compmount' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

  • @AShruthi
    @AShruthi Рік тому

    Please let me know how to resolve this:
    D:reactproj\emart>npm i bootstrap
    npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
    added 109 packages, removed 58 packages, changed 83 packages, and audited 1931 packages in 41s
    103 packages are looking for funding
    run `npm fund` for details
    75 vulnerabilities (13 low, 16 moderate, 42 high, 4 critical)
    To address issues that do not require attention, run:
    npm audit fix
    To address all issues (including breaking changes), run:
    npm audit fix --force
    Run `npm audit` for details.

  • @mohammedelhoussni
    @mohammedelhoussni Рік тому

    amazing thanks a lot

  • @dilsherath8485
    @dilsherath8485 2 роки тому +6

    Thank you for this amazing Video, please explain how handle button function work in Cart

    • @sarkseven
      @sarkseven 2 роки тому +4

      I also need that

  • @shaikemran8755
    @shaikemran8755 2 роки тому +1

    State.length not working

  • @oumarsy5787
    @oumarsy5787 Рік тому

    can i see the top of the cart.jsx file? or if someone have that code...

  • @TahreemShaikh-ph2hs
    @TahreemShaikh-ph2hs Рік тому

    can anyone please help for this issue, data not displaying after async fetch

  • @Rty-j2u
    @Rty-j2u 9 місяців тому

    Great❤

  • @behnamasgari4432
    @behnamasgari4432 2 роки тому

    very very good job😍❤

  • @prajaktadanake2370
    @prajaktadanake2370 2 роки тому

    I am not getting create card component code in this video plz check or share github code for this project

  • @quocdoan4653
    @quocdoan4653 2 роки тому

    thank for amazing video..

  • @sirshendusantra4911
    @sirshendusantra4911 2 роки тому +1

    I am doing this project. But got stuck in some points. can you send me the whole source code please ?

  • @nayanikasur5535
    @nayanikasur5535 Рік тому

    man how did the products just come like that from products.image @18:00 min

  • @prepschool3732
    @prepschool3732 2 роки тому

    When I am writing this. Switch code
    Switch is not imported error show ho rha hai
    When I using .. routes it's totally blank page showing

    • @namanbhagat7371
      @namanbhagat7371 2 роки тому +1

      Switch was used in older verion now use route.

  • @skullstriker07
    @skullstriker07 8 місяців тому

    Where is the background image broo

  • @nuwlobe
    @nuwlobe Рік тому

    i don't know about the new version reducer/store.js the code isn't work it . teach me ps it doesn't work

  • @zankaster3935
    @zankaster3935 2 роки тому

    Is the app responsive? I don't see it mentioned anywhere

  • @ebukajohn5325
    @ebukajohn5325 2 роки тому

    Can someone tell me how to making the cart.js page to be displayed and working
    I just need the source code

  • @RohailJohn
    @RohailJohn Рік тому

    will u check the end part of the video it stuck ..

  • @mahdioueslati5211
    @mahdioueslati5211 2 роки тому

    cart component doesn't show in the video

  • @fullstack_projects
    @fullstack_projects 2 роки тому

    im followed u r video but where is total price??

  • @pavan_s5129
    @pavan_s5129 Рік тому

    How can i create admin panel to this project

  • @anilmanda670
    @anilmanda670 2 роки тому

    Nice video. but end of video cart.jsx code is not visible

  • @ankushmaity2635
    @ankushmaity2635 2 роки тому

    In 32:01 min why did he do {product.rating && product.rating.rate}

  • @rbmax33
    @rbmax33 Рік тому

    why you cut the most important part (Cart)

  • @shrinidhikv8862
    @shrinidhikv8862 2 роки тому

    Hello brother .. it's giving me can't resolve
    Redux/store error