React Shopping Cart Ecommerce Beginner Website - Build & Deploy A React Beginner Project

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

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

  • @billt5410
    @billt5410 Год назад +22

    Hi Pedro, many, many thanks to your work. I was struggling to find a good React tutorial, going thru different ways of setting up the environment. got stuck in a tiny concept and then switch to another tutorial, setting up and got stuck again. I was so frustrated by slowing down and not seeing any outcome even thought about skipping React... and then I found your channel. I've been building 2 web apps with you so far and can't wait for another. What I really appreciate is that I can tell you're also a learner by the way you teach, you remember how difficult it is to go from 0 to 1. Please keep making these. I aspire to be as good as you one day.

  • @joacomesa22
    @joacomesa22 Год назад +5

    Awesome content Pedrooooooo. Please make more vids like this one!!! You really helped me to understand how React works.
    Saludos desde Argentina! 🇦🇷

  • @hemanthkumar3743
    @hemanthkumar3743 Год назад +7

    hey! awsome tutorial for beginner like me. I had recently started learning frontend development, completed basic HTML,CSS and JS. Then i got enrolled in angela yu UDEMY course and completed reactJS section from it, which is really a good start. After that i am watching your project tutorial, now i can relate things that i know and even learnt new concepts like routes and state management.
    Thank you very much this video tutorial really helped me to level up a step into my react journey.
    I am confident and motivated as well to learn more.
    Could you please continue adding features to this website, or a guiding session is really appriciated.

    • @arjun_anandan
      @arjun_anandan Год назад

      But they said that the course is outdated is that so??

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

      @@arjun_anandan totally outdated if you ask me, except the course name

    • @eriikelnino6545
      @eriikelnino6545 Год назад

      @@singchauhon3394 i heard she updated it recently

  • @vinaypatil8009
    @vinaypatil8009 2 года назад +6

    Sir
    Need more great REACTJS projects.
    Thanks for everything ❤️☺️☺️

  • @haciendadad
    @haciendadad 2 года назад +9

    This is a really good video! Pedro, you are a really good teacher, good pace, you cover everything very well and this was a nice choice of project because it covers multiple React tools that I was looking to learn, the useContext API and React Router. The CSS provided and images are nice, it is those little things that show you put out quality.

  • @georgeolufemi4285
    @georgeolufemi4285 2 года назад +50

    Would you add the Backend part for this project ? Because I mean, an E-commerce site is not complete without the Backend...

  • @sharjeelfaiq16
    @sharjeelfaiq16 Год назад +3

    I haven't seen such a great educational tutorial on RUclips yet. Thanks a lot.

  • @vijaykumar-od7kx
    @vijaykumar-od7kx 9 месяцев назад

    Many thanks Pedro, one of the best tutorial on Shopping cart. 😀

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

    Keep throwing the projects!! Loving it🙌

  • @DavidMauas
    @DavidMauas Год назад +4

    Real nice video, but the cart code is very weird. Having 1,000 products or more, would have the cart stagger creating arrays with thousands of empty id values.
    There has to be an efficient way to refactor that to fit a dynamic scenario.

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

    Hey Pedro,thanks a lot for this tutorial. I learned lot of things from your videos.
    Bring more videos like this.
    All the best for you.

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

      Happy to hear that!

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

      @@PedroTechnologies and Pedro i wanted to ask you if you can make log in log out sing in and an input to search for specific product in this project and when you find a specific project to click on that project and to open another page with that specific project?

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

      P.S:specific product not project in the end

  • @Hanson-e4m
    @Hanson-e4m Год назад

    Thanks for this tutorial. It is really amazing and suits me a lot cause I novice in this program and ur explanation is so great!

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

    Great and very useful video Pedro carry on your GREAT WORK :)

  • @faizanahmed9304
    @faizanahmed9304 2 года назад +4

    I appreciate your hard work man! Keep making such good content. I hope you'll be fine soon.

  • @eduardovergara00
    @eduardovergara00 Год назад

    You are a Master! you make it very simple to understand! you have a new sub! thanks man!

  • @frischsticks
    @frischsticks 10 месяцев назад

    Thanks a lot Pedro, your videos never disappoint!

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

    This video launched in perfect time I'm just learning react js now like its crazy
    Huge thank you and God bless you 🔥

  • @osuagwudanielndubueze5919
    @osuagwudanielndubueze5919 Год назад

    Sir,, your tutorials is very helpful to beginner and intermidate level tech person,, I am a big fan thank you

  • @dev-b3p7x
    @dev-b3p7x 11 месяцев назад +1

    Thank you very much it's very hard to find react beginner projects.

  • @rafabenato6893
    @rafabenato6893 10 месяцев назад

    Acabei de encontrar o seu canal, muito legal. Gostei muito do tutorial e vou continuar assistindo seus videos. Pensei que voce fosse americano enquanto assistia o video mas fiquei feliz em saber que e brazuca. valeu!

  • @henryuks8327
    @henryuks8327 Год назад

    thanks for all you do pedro. I really appreciate watching your videos they've helped through so many project.

    • @subhamsingh4615
      @subhamsingh4615 Год назад

      Have you deployed it, can you share the GitHub repo I am getting issues the build is failing again and again 😞

  • @mongodb-hm6bl
    @mongodb-hm6bl 9 месяцев назад

    excellent video for beginners , thank you so much for your efforts to make such a cool stuff

  • @wylakers1250
    @wylakers1250 2 года назад +12

    Bro, Pedro I love you so much, thanks for this. Can you create more tutorials like this? Like intermediate ones please

  • @arofficialtv3727
    @arofficialtv3727 Год назад

    Totally waiting for the full version of this Ecommerce website!

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

    Outro projeto que está me ajudando a aprender JS e React concluído com sucesso
    Thanks Pedro

  • @nirajpatil3388
    @nirajpatil3388 Год назад

    i am fan of yours pedro. more success to you. please keep posting such projects

  • @killerkyun
    @killerkyun 2 года назад +15

    esses projetos ajudam dms cara, junto com o seu curso então
    valeeeeu

  • @user-gened
    @user-gened Год назад

    Hey pedro thank you so much, other youtubers make it sound like its rocket sciense. 😮

  • @MusaZeshan-qm9ru
    @MusaZeshan-qm9ru 7 месяцев назад

    Well you have really made complex concepts very easy.

  • @chibuikeukandu5419
    @chibuikeukandu5419 6 месяцев назад

    Pedrooo👍 Really good tutorial

  • @rafaelibarra280
    @rafaelibarra280 10 месяцев назад

    Very good explained. Thank you very much!

  • @nasssty284
    @nasssty284 Год назад

    Thank you Pedro!! great video as usual.... it would be nice to add some footer social media links to this project and i would really like to see it.... if its possible

  • @natashabuchichia3978
    @natashabuchichia3978 Год назад

    This worked really great! Thanks for the tutorial!

  • @anaotero3896
    @anaotero3896 10 месяцев назад

    Hi Pedro, thank you so much for this tutorial! Have you ever thought of doing one for a fullstack app?

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

    it was great bro the best cartShopping tutorial i've ever seen .

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

    Great stuff, I'd love to see some Next 13 tutorials in the future

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

    i'm using npm and cra, would it make any difference on the package ? i kinda stuck after adding context provider, the page won't load

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

    Keep up the good work , yes help us creating backend for checkout❤

  • @edmat6710
    @edmat6710 Год назад

    Wow, you are really smart! 💪🏽👏👏👏

  • @naolkebede321
    @naolkebede321 10 месяцев назад

    i wanted to get my PRODUCT from an api
    and if its not set already and set with a request how can i set it in shopping context
    or should i use useMemo
    If i used the useContext to store the product in a use state in the usecontext component i will have to add the cart items function inside ShopContextProvider function that will lead to NAN error

  • @Nanashi-rq7lk
    @Nanashi-rq7lk Год назад

    Thanks. Your Video is very useful for me. I'm looking forward to watch your video again

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

    Great tutorial! Maybe I may ask for a dashboard react tutorial video with login (JSON server , no firebase please )

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

    Hai Pedro ,
    Application looks awesome
    Can you continue this cart application with back end also.it would be helpfull.

  • @Veneris96
    @Veneris96 Год назад

    Why do I keep getting { "item id" : NaN} in console when clicking on the Add to Cart button? ): I'm trying to import the data array from an API call from another component (where it works brilliantly), but something's not quite right.

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

    why cartItemCount is getting an error (NaN) ???

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

    can you also use local storage, if a user refreshes the website by mistake so it will lost the data

  • @charuhas1602
    @charuhas1602 Год назад

    Thank you bro, the video was helpful

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

    @PedroTech.Hi Pedro I am appreciating your effort. But I have a suggestion for this kind of beginner project. I am a beginner started some months before. You are explaining very well in the start and end but in the middle ..I mean for example here in the useContext section you didn't explain the logic clearly for a beginner. It was good you can speed up start and end but explained more clearly in that section. I really like your videos and you are my React teacher. I studied react from your videos. It is just a suggestion..Love from Sweden

  • @parvezkhan1299
    @parvezkhan1299 10 месяцев назад +1

    coding start from 06:10

  • @tellychakar
    @tellychakar 11 месяцев назад

    @pedro TECH, why my react js dont catch route routes router please reply

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

    Can you create a video for the best UI framework for react and I almost collapsed on concluding which is best.

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

    Great video!

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

    hey guys I am struggling. As soon as i wrap the shopContextProovider around the components in my app.js, everything breaks. and i have a blank page. pls help

    • @uttir
      @uttir Год назад

      Same happens to me

  • @Lashistoriasdelilith
    @Lashistoriasdelilith Год назад

    I dont understand what's that of router and routes... I've never seen it before...

  • @wajdanakmal8325
    @wajdanakmal8325 Год назад

    I took this code in my vs code and when i do npm start it's not running instead giving error something like React-scripts are not internally or externally defined etc.

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

    Getting this error
    Cannot destructure property 'addTocart' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.

  • @markgamal694
    @markgamal694 11 месяцев назад

    there is an error in cart option in the project as
    export 'CartItem' (imported as 'CartItem') was not found in './cart-item' (possible exports: default) does anyone has a solution for it ??

  • @GoldenCricketTamil
    @GoldenCricketTamil Год назад

    It was good if its also have a search filter.. But its really helpfull to me..!

  • @imranansari2288
    @imranansari2288 Год назад

    love u bro from india thanks u for giving awesome project

  • @prathamshinde9180
    @prathamshinde9180 11 месяцев назад

    Thanks for the tutorial.

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

    Thank for sharing amazing idea my dear teacher

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

    Amazing tutorial thank you

  • @spawnrequash
    @spawnrequash Год назад +2

    Actually there is no too much state in this "beginner" project. Why did you use context ?

  • @aoquanghung7509
    @aoquanghung7509 Год назад

    Thanks bro, great video

  • @debbietampasheher3682
    @debbietampasheher3682 Год назад

    Thank you for explaining the file structure.

  • @syedhamid-ky3su
    @syedhamid-ky3su 8 месяцев назад

    My add to cart button is not working ...and all the ekements are coming in my cart ...

  • @JonasKr.
    @JonasKr. 10 месяцев назад

    Great video 👍

  • @itgiants5218
    @itgiants5218 Год назад

    Nice effort what I don't like is the fact of using the ordered product id for the process of cart functionality which is incorrect if you just change the products id to something random like 51, 32, 150, .... the function will not work.

  • @bobdpa
    @bobdpa Год назад

    Thanks Pedro!

  • @kolalaa
    @kolalaa Год назад

    oh. my. goooodness!! I'm in love. TOT I love this so much..

  • @RoopaJR
    @RoopaJR Год назад

    I am getting undefined error in the product.jsx file at "const amt = cartItems[id];" , any idea?

  • @Lunolux
    @Lunolux Год назад

    great video, make it simple to understand, thx

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

    Your videos are awesome !! Thanks. Can you make more videos with some logic, some algorithm like this one ?

  • @SLMYanimatic
    @SLMYanimatic Год назад

    I know this is a somewhat late comment but what do I do about the shop products/elements not having a key?

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

    thanks, what theme is your vs code using

  • @abdulrahmanrufai8119
    @abdulrahmanrufai8119 Год назад

    Hello Pedro, can you pls drop the code that puts a search input that searches for product and adds to cart

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

    Thanks Chief.

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

    GOAT bro !

  • @manikantanimma9662
    @manikantanimma9662 Год назад

    I just have one question, what props did you pass to the ShopContext ?

  • @samialvi4226
    @samialvi4226 Год назад

    Thanks Mate!

  • @phumin2738
    @phumin2738 Год назад

    Hi can I know what visual studio theme are you using in this video?

  • @ismailananouche9980
    @ismailananouche9980 Год назад

    Pedro can you just please make a whole e-commerce website this will let us learn a lot of things

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

    Great Tutorial... Waiting for MERN stack project...

  • @jaym7178
    @jaym7178 Год назад

    Hi I am building my own shopping cart on react js i finished learning react js and redux im lost on how to to build this project please advise me Thanks

  • @cap26803
    @cap26803 11 месяцев назад

    Thank you bro!

  • @lathagm666
    @lathagm666 Год назад

    Thank You So Much 🙂

  • @niyazkassenov2790
    @niyazkassenov2790 Год назад

    I see a man of culture, I see a fellow Mac Miller fan✊

  • @47joshua
    @47joshua 2 года назад

    Brother , witch vscode theme you use in this video?

  • @juniorMr
    @juniorMr Год назад

    man ,this guy is goat

  • @osuagwudanielndubueze5919
    @osuagwudanielndubueze5919 Год назад

    Please can you do a video on the checkout payment method,, and and more videos with backend data structure implementation,, Gracia

  • @tetthys3620
    @tetthys3620 Год назад

    Great tutorial

  • @ebubechukwunmumu8250
    @ebubechukwunmumu8250 Год назад

    Pls what react version and react dom version was used in this video

  • @sika_007
    @sika_007 Год назад

    Hey Pedro. I realized that when I refresh the page in the cart route, I get an error (404). I found out this has to do with react router only working on the client side and not the server side. Is there a way to fix this🥺?

  • @kwamenadadson
    @kwamenadadson Год назад

    You are the GOAT
    😎

  • @enesigeorge6981
    @enesigeorge6981 Год назад

    Hi Uncle Pedro, Thanks for this Content, it is very resourceful.
    MY QUESTION IS
    how do i update my cart icon with the total order as the user keep ordering.

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

    Thank you Pedro

  • @BanglaLifeUK
    @BanglaLifeUK 9 месяцев назад

    nyc,do you have checkout tutorial about it?

  • @f1_killer44
    @f1_killer44 Год назад

    21:40 the important part

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

    Waiting for more react and nextjs projects.

  • @arslanmuhammad4190
    @arslanmuhammad4190 Год назад +2

    I Love You Bro