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

Ғылым және технология

Deploy your application RIGHT NOW with Hostinger!: hostinger.com/pedrotech (get 10% off with code PEDROTECH)
Code: github.com/machadop1407/shopp...
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#reactjs #coding

Пікірлер: 215

  • @billt5410
    @billt5410 Жыл бұрын

    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 Жыл бұрын

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

  • @haciendadad
    @haciendadad Жыл бұрын

    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.

  • @ariyansalari270
    @ariyansalari270 Жыл бұрын

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

  • @user-db2ug8tr5o
    @user-db2ug8tr5o Жыл бұрын

    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!

  • @State_exam_preparation
    @State_exam_preparation Жыл бұрын

    Keep throwing the projects!! Loving it🙌

  • @Viitor159
    @Viitor159 Жыл бұрын

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

  • @faizanahmed9304
    @faizanahmed9304 Жыл бұрын

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

  • @vinaypatil8009
    @vinaypatil8009 Жыл бұрын

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

  • @tiagobordin6580
    @tiagobordin65808 ай бұрын

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

  • @georgeolufemi4285
    @georgeolufemi4285 Жыл бұрын

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

  • @eduardovergara00
    @eduardovergara0011 ай бұрын

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

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

  • @sharjeelfaiq16
    @sharjeelfaiq168 ай бұрын

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

  • @anaotero3896
    @anaotero38965 ай бұрын

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

  • @nirajpatil3388
    @nirajpatil3388 Жыл бұрын

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

  • @arofficialtv3727
    @arofficialtv3727 Жыл бұрын

    Totally waiting for the full version of this Ecommerce website!

  • @osuagwudanielndubueze5919

    @osuagwudanielndubueze5919

    8 ай бұрын

    Please more with backend implementation

  • @user-uh9ib9oh9f
    @user-uh9ib9oh9f6 ай бұрын

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

  • @altinalidema1209
    @altinalidema1209 Жыл бұрын

    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

    Жыл бұрын

    Happy to hear that!

  • @altinalidema1209

    @altinalidema1209

    Жыл бұрын

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

    Жыл бұрын

    P.S:specific product not project in the end

  • @cristianogonca6114
    @cristianogonca6114 Жыл бұрын

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

  • @hemanthkumar3743
    @hemanthkumar3743 Жыл бұрын

    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

    Жыл бұрын

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

  • @eriikelnino6545

    @eriikelnino6545

    7 ай бұрын

    @@singchauhon3394 i heard she updated it recently

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

  • @DeaViNG
    @DeaViNG Жыл бұрын

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

  • @vijaykumar-od7kx
    @vijaykumar-od7kx4 ай бұрын

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

  • @rafabenato6893
    @rafabenato68935 ай бұрын

    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!

  • @raphaelrocha313
    @raphaelrocha313 Жыл бұрын

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

  • @frischsticks
    @frischsticks4 ай бұрын

    Thanks a lot Pedro, your videos never disappoint!

  • @bsw4245
    @bsw4245 Жыл бұрын

    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

  • @monisiqbal1313
    @monisiqbal1313 Жыл бұрын

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

  • @osuagwudanielndubueze5919
    @osuagwudanielndubueze59198 ай бұрын

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

  • @MusaZeshan-qm9ru
    @MusaZeshan-qm9ruАй бұрын

    Well you have really made complex concepts very easy.

  • @mongodb-hm6bl
    @mongodb-hm6bl3 ай бұрын

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

  • @youngwolf1009
    @youngwolf1009 Жыл бұрын

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

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    My pleasure!!

  • @alexandere1418
    @alexandere1418 Жыл бұрын

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

  • @user-fs9ru6fm2h
    @user-fs9ru6fm2h10 ай бұрын

    Hi Pedro, great tutorial! But i don't seem to understand how the getDefaultCart function works. Can you explain better?

  • @kgoutham7626
    @kgoutham7626 Жыл бұрын

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

  • @debbietampasheher3682
    @debbietampasheher368211 ай бұрын

    Thank you for explaining the file structure.

  • @user-gened
    @user-gened Жыл бұрын

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

  • @dysper971
    @dysper971 Жыл бұрын

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

  • @s.mabsarrashid5591
    @s.mabsarrashid5591 Жыл бұрын

    Can you like build ERP apps containing tables dropdown pagination sorting filtering printing tools for react etc. Really appreciate your hard work.

  • @naolkebede321
    @naolkebede3214 ай бұрын

    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

  • @manikantanimma9662
    @manikantanimma96629 ай бұрын

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

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

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

  • @SLMYanimatic
    @SLMYanimatic Жыл бұрын

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

  • @natashabuchichia3978
    @natashabuchichia3978 Жыл бұрын

    This worked really great! Thanks for the tutorial!

  • @adityabhat3043

    @adityabhat3043

    Жыл бұрын

    Did u got the output!?

  • @wylakers1250
    @wylakers1250 Жыл бұрын

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

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    More to come!

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

  • @satansauce666
    @satansauce666 Жыл бұрын

    Awesome Pedro as always, really like your style and flow! Learned a lot of important things from you watching these and you solidify my knowledge as i watch these, even tho i already know most of the stuff you present. In this vid here a thing which is really giving me a hard time with JS: code timestamp around @35:50 shows these state management fns. My question is where does the "prev" come from? There is no "prev" in the state you setup with useState(function()). Am i missing something, because i've watched this vid in pieces over 2 to 3 nights. JS annoys me after since i've learned TS so i just want some clarification can a dev just throw new variables in the middle of a function (in this case addToCart()) and the build is just okay with it..

  • @satansauce666

    @satansauce666

    Жыл бұрын

    More accurate timestamp would be @34:24 when you said "i'm just gonna grab the previous value of the state" and just pass in that prev

  • @khosroyavari8914

    @khosroyavari8914

    Жыл бұрын

    @@satansauce666 if you're still wondering about that, the function that resets the state is set up in a way that the argument represents the previous state, so you can name it anything and it will still reflect the previous state, or rather the current state that you're modifying.

  • @phumin2738
    @phumin2738 Жыл бұрын

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

  • @Nanashi-rq7lk
    @Nanashi-rq7lk Жыл бұрын

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

  • @javascriptexpanse
    @javascriptexpanse Жыл бұрын

    thanks, what theme is your vs code using

  • @DavidMauas
    @DavidMauas6 ай бұрын

    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.

  • @RoopaJR
    @RoopaJR Жыл бұрын

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

  • @rafaelibarra280
    @rafaelibarra2805 ай бұрын

    Very good explained. Thank you very much!

  • @malayalampositive
    @malayalampositive Жыл бұрын

    @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

  • @wajdanakmal8325
    @wajdanakmal832510 ай бұрын

    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.

  • @nevinesamaan406
    @nevinesamaan406 Жыл бұрын

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

  • @syedhamid-ky3su
    @syedhamid-ky3su3 ай бұрын

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

  • @ismailananouche9980
    @ismailananouche9980 Жыл бұрын

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

  • @tilwani_nikhil
    @tilwani_nikhil Жыл бұрын

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

  • @markgamal694
    @markgamal6945 ай бұрын

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

  • @abdulrahmanrufai8119
    @abdulrahmanrufai811910 ай бұрын

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

  • @osuagwudanielndubueze5919
    @osuagwudanielndubueze59198 ай бұрын

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

  • @MindfulMinutes0797
    @MindfulMinutes079710 ай бұрын

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

  • @dragosp.7635
    @dragosp.7635 Жыл бұрын

    Hi Pedro, can you recommend a channel for Angular please?

  • @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🥺?

  • @devwitheasy
    @devwitheasy Жыл бұрын

    Thank for sharing amazing idea my dear teacher

  • @BrajagopalMukherjee
    @BrajagopalMukherjee Жыл бұрын

    hi pedro one request can u bulid some trading application with chart and graphs && nextjs series ?

  • @rightcliquegod7653
    @rightcliquegod7653 Жыл бұрын

    Hey Pedro, what are your thoughts on the Chat GPT?

  • @sonamohialdin3376
    @sonamohialdin3376 Жыл бұрын

    Amazing tutorial thank you

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

  • @tellychakar
    @tellychakar5 ай бұрын

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

  • @ebubechukwunmumu8250
    @ebubechukwunmumu825011 ай бұрын

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

  • @Lunolux
    @Lunolux Жыл бұрын

    great video, make it simple to understand, thx

  • @JoshLearningFrontend
    @JoshLearningFrontend Жыл бұрын

    Brother , witch vscode theme you use in this video?

  • @mangalakarunarathne3008
    @mangalakarunarathne3008 Жыл бұрын

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

  • @edmat6710
    @edmat67108 ай бұрын

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

  • @sharazerbhatti2118
    @sharazerbhatti2118 Жыл бұрын

    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

    9 ай бұрын

    Same happens to me

  • @Lashistoriasdelilith
    @Lashistoriasdelilith Жыл бұрын

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

  • @jennysquesttowellness
    @jennysquesttowellness Жыл бұрын

    Hello Pedro. Can you build an app with an admin view with special rights vs a normal user view?

  • @denniszenanywhere

    @denniszenanywhere

    Жыл бұрын

    This is good tutorial but can someone guide me to a complete tutorial that will work when I launch it. Including sign in process and back end like many recommended.

  • @chibuikeukandu5419
    @chibuikeukandu541919 күн бұрын

    Pedrooo👍 Really good tutorial

  • @prathamshinde9180
    @prathamshinde91806 ай бұрын

    Thanks for the tutorial.

  • @Breakfast-lm2vx
    @Breakfast-lm2vx24 күн бұрын

    Which platform are you using to code??

  • @Angela-Gee
    @Angela-Gee Жыл бұрын

    please make a payment gateway integration also for this project

  • @Hit-it-get
    @Hit-it-get3 ай бұрын

    nyc,do you have checkout tutorial about it?

  • @azbeatz8451
    @azbeatz845110 ай бұрын

    why did we set cart[i]=0 in contextapi

  • @aoquanghung7509
    @aoquanghung7509 Жыл бұрын

    Thanks bro, great video

  • @theultimategamer7202
    @theultimategamer7202 Жыл бұрын

    Waiting for more react and nextjs projects.

  • @spawnrequash
    @spawnrequash Жыл бұрын

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

  • @imranansari2288
    @imranansari228811 ай бұрын

    love u bro from india thanks u for giving awesome project

  • @karammm
    @karammm6 ай бұрын

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

  • @craiggazimbi
    @craiggazimbi Жыл бұрын

    Thanks Chief.

  • @lucasferreira8229
    @lucasferreira8229 Жыл бұрын

    I'm learning Vue JS, but I also wanna learn React JS . Do you guys thinks it's too much to learn both at the same time?

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    I would say, try to get really good with one of them. Its better to master 1 skill then to be ok with many skills

  • @felipefava6266
    @felipefava6266 Жыл бұрын

    Great video!

  • @user-pz9cd5pt4w
    @user-pz9cd5pt4w Жыл бұрын

    What is the vs code font you use

  • @bobdpa
    @bobdpa10 ай бұрын

    Thanks Pedro!

  • @bheeralingbheeraling3316
    @bheeralingbheeraling33169 ай бұрын

    Compiled with problems: A ERROR Mc App is 6.0-44 Module not found: Error: Can't resolve./components/Header.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eacti\src ERROR in /src/App js: 7.0-54 Module not found: Error: Can't resolve ./components/ProductList.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src ERROR in /src/App is 8:0-48 Module not found: Error: Can't resolve './components/Cartiist.js' in 'C:\Users ajab\OneDrive\Desktop eact-project eact1\src Sir this error come sir why sir plz slove sir

  • @darelbvcr687
    @darelbvcr687 Жыл бұрын

    can u make similar app using typescript and next js?

  • @samialvi4226
    @samialvi422610 ай бұрын

    Thanks Mate!

Келесі