Тёмный

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

PedroTech
Подписаться 205 тыс.
Просмотров 328 тыс.
50% 1

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

Наука

Опубликовано:

 

7 дек 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 213   
@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.
@State_exam_preparation
@State_exam_preparation Год назад
Keep throwing the projects!! Loving it🙌
@ariyansalari270
@ariyansalari270 11 месяцев назад
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!
@faizanahmed9304
@faizanahmed9304 Год назад
I appreciate your hard work man! Keep making such good content. I hope you'll be fine soon.
@Viitor159
@Viitor159 Год назад
esses projetos ajudam dms cara, junto com o seu curso então valeeeeu
@eduardovergara00
@eduardovergara00 10 месяцев назад
You are a Master! you make it very simple to understand! you have a new sub! thanks man!
@frischsticks
@frischsticks 4 месяца назад
Thanks a lot Pedro, your videos never disappoint!
@tiagobordin6580
@tiagobordin6580 7 месяцев назад
Outro projeto que está me ajudando a aprender JS e React concluído com sucesso Thanks Pedro
@vinaypatil8009
@vinaypatil8009 Год назад
Sir Need more great REACTJS projects. Thanks for everything ❤️☺️☺️
@cristianogonca6114
@cristianogonca6114 Год назад
Great and very useful video Pedro carry on your GREAT WORK :)
@nirajpatil3388
@nirajpatil3388 Год назад
i am fan of yours pedro. more success to you. please keep posting such projects
@DeaViNG
@DeaViNG Год назад
Great stuff, I'd love to see some Next 13 tutorials in the future
@henryuks8327
@henryuks8327 Год назад
thanks for all you do pedro. I really appreciate watching your videos they've helped through so many project.
@subhamsingh4615
@subhamsingh4615 11 месяцев назад
Have you deployed it, can you share the GitHub repo I am getting issues the build is failing again and again 😞
@vijaykumar-od7kx
@vijaykumar-od7kx 3 месяца назад
Many thanks Pedro, one of the best tutorial on Shopping cart. 😀
@sharjeelfaiq16
@sharjeelfaiq16 7 месяцев назад
I haven't seen such a great educational tutorial on RU-vid yet. Thanks a lot.
@user-uh9ib9oh9f
@user-uh9ib9oh9f 5 месяцев назад
Thank you very much it's very hard to find react beginner projects.
@arofficialtv3727
@arofficialtv3727 Год назад
Totally waiting for the full version of this Ecommerce website!
@osuagwudanielndubueze5919
@osuagwudanielndubueze5919 7 месяцев назад
Please more with backend implementation
@debbietampasheher3682
@debbietampasheher3682 10 месяцев назад
Thank you for explaining the file structure.
@MusaZeshan-qm9ru
@MusaZeshan-qm9ru Месяц назад
Well you have really made complex concepts very easy.
@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
@rafaelibarra280
@rafaelibarra280 4 месяца назад
Very good explained. Thank you very much!
@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 11 месяцев назад
@@arjun_anandan totally outdated if you ask me, except the course name
@eriikelnino6545
@eriikelnino6545 6 месяцев назад
@@singchauhon3394 i heard she updated it recently
@anaotero3896
@anaotero3896 4 месяца назад
Hi Pedro, thank you so much for this tutorial! Have you ever thought of doing one for a fullstack app?
@natashabuchichia3978
@natashabuchichia3978 Год назад
This worked really great! Thanks for the tutorial!
@adityabhat3043
@adityabhat3043 Год назад
Did u got the output!?
@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
@mongodb-hm6bl
@mongodb-hm6bl 2 месяца назад
excellent video for beginners , thank you so much for your efforts to make such a cool stuff
@sonamohialdin3376
@sonamohialdin3376 Год назад
Amazing tutorial thank you
@user-gened
@user-gened Год назад
Hey pedro thank you so much, other youtubers make it sound like its rocket sciense. 😮
@rafabenato6893
@rafabenato6893 4 месяца назад
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!
@osuagwudanielndubueze5919
@osuagwudanielndubueze5919 7 месяцев назад
Sir,, your tutorials is very helpful to beginner and intermidate level tech person,, I am a big fan thank you
@Nanashi-rq7lk
@Nanashi-rq7lk Год назад
Thanks. Your Video is very useful for me. I'm looking forward to watch your video again
@bobdpa
@bobdpa 9 месяцев назад
Thanks Pedro!
@aoquanghung7509
@aoquanghung7509 Год назад
Thanks bro, great video
@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!!
@georgeolufemi4285
@georgeolufemi4285 Год назад
Would you add the Backend part for this project ? Because I mean, an E-commerce site is not complete without the Backend...
@Lunolux
@Lunolux Год назад
great video, make it simple to understand, thx
@devwitheasy
@devwitheasy Год назад
Thank for sharing amazing idea my dear teacher
@felipefava6266
@felipefava6266 Год назад
Great video!
@prathamshinde9180
@prathamshinde9180 5 месяцев назад
Thanks for the tutorial.
@edmat6710
@edmat6710 7 месяцев назад
Wow, you are really smart! 💪🏽👏👏👏
@dysper971
@dysper971 Год назад
Your videos are awesome !! Thanks. Can you make more videos with some logic, some algorithm like this one ?
@tilwani_nikhil
@tilwani_nikhil Год назад
Keep up the good work , yes help us creating backend for checkout❤
@samialvi4226
@samialvi4226 9 месяцев назад
Thanks Mate!
@craiggazimbi
@craiggazimbi Год назад
Thanks Chief.
@raphaelrocha313
@raphaelrocha313 Год назад
Great tutorial! Maybe I may ask for a dashboard react tutorial video with login (JSON server , no firebase please )
@JonasKr.
@JonasKr. 4 месяца назад
Great video 👍
@richthekid7522
@richthekid7522 Год назад
Thank you Pedro
@mangalakarunarathne3008
@mangalakarunarathne3008 Год назад
Great Tutorial... Waiting for MERN stack project...
@cap26803
@cap26803 5 месяцев назад
Thank you bro!
@kgoutham7626
@kgoutham7626 Год назад
Hai Pedro , Application looks awesome Can you continue this cart application with back end also.it would be helpfull.
@karammm
@karammm 5 месяцев назад
oh. my. goooodness!! I'm in love. TOT I love this so much..
@ismailananouche9980
@ismailananouche9980 Год назад
Pedro can you just please make a whole e-commerce website this will let us learn a lot of things
@imranansari2288
@imranansari2288 10 месяцев назад
love u bro from india thanks u for giving awesome project
@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!
@MindfulMinutes0797
@MindfulMinutes0797 9 месяцев назад
It was good if its also have a search filter.. But its really helpfull to me..!
@monisiqbal1313
@monisiqbal1313 Год назад
can you also use local storage, if a user refreshes the website by mistake so it will lost the data
@tetthys3620
@tetthys3620 Год назад
Great tutorial
@fahadzidan8591
@fahadzidan8591 Год назад
GOAT bro !
@manikantanimma9662
@manikantanimma9662 8 месяцев назад
I just have one question, what props did you pass to the ShopContext ?
@theultimategamer7202
@theultimategamer7202 Год назад
Waiting for more react and nextjs projects.
@lathagm666
@lathagm666 8 месяцев назад
Thank You So Much 🙂
@javascriptexpanse
@javascriptexpanse Год назад
thanks, what theme is your vs code using
@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?
@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
@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.
@chanmyaemaung
@chanmyaemaung Год назад
Awesome!
@user-fs9ru6fm2h
@user-fs9ru6fm2h 9 месяцев назад
Hi Pedro, great tutorial! But i don't seem to understand how the getDefaultCart function works. Can you explain better?
@alexandere1418
@alexandere1418 Год назад
Can you create a video for the best UI framework for react and I almost collapsed on concluding which is best.
@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
@juniorMr
@juniorMr 7 месяцев назад
man ,this guy is 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.
@JoshLearningFrontend
@JoshLearningFrontend Год назад
Brother , witch vscode theme you use in this 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.
@SLMYanimatic
@SLMYanimatic Год назад
I know this is a somewhat late comment but what do I do about the shop products/elements not having a key?
@imranansari2288
@imranansari2288 10 месяцев назад
totalyy awesome
@abdulrahmanrufai8119
@abdulrahmanrufai8119 9 месяцев назад
Hello Pedro, can you pls drop the code that puts a search input that searches for product and adds to cart
@naolkebede321
@naolkebede321 3 месяца назад
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
@osuagwudanielndubueze5919
@osuagwudanielndubueze5919 7 месяцев назад
Please can you do a video on the checkout payment method,, and and more videos with backend data structure implementation,, Gracia
@ranjanbastia9706
@ranjanbastia9706 4 месяца назад
Thanks.
@dragosp.7635
@dragosp.7635 Год назад
Hi Pedro, can you recommend a channel for Angular please?
@DavidMauas
@DavidMauas 5 месяцев назад
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.
@rightcliquegod7653
@rightcliquegod7653 Год назад
Hey Pedro, what are your thoughts on the Chat GPT?
@Hit-it-get
@Hit-it-get 2 месяца назад
nyc,do you have checkout tutorial about it?
@ebubechukwunmumu8250
@ebubechukwunmumu8250 10 месяцев назад
Pls what react version and react dom version was used in this video
@tellychakar
@tellychakar 4 месяца назад
@pedro TECH, why my react js dont catch route routes router please reply
@BrajagopalMukherjee
@BrajagopalMukherjee Год назад
hi pedro one request can u bulid some trading application with chart and graphs && nextjs series ?
@kwamenadadson
@kwamenadadson Год назад
You are the GOAT 😎
@Veneris96
@Veneris96 11 месяцев назад
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.
@RoopaJR
@RoopaJR Год назад
I am getting undefined error in the product.jsx file at "const amt = cartItems[id];" , any idea?
@Angela-Gee
@Angela-Gee Год назад
please make a payment gateway integration also for this project
@nevinesamaan406
@nevinesamaan406 Год назад
why cartItemCount is getting an error (NaN) ???
@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🥺?
@tienhuynh2435
@tienhuynh2435 9 месяцев назад
that cool bro
@niyazkassenov2790
@niyazkassenov2790 Год назад
I see a man of culture, I see a fellow Mac Miller fan✊
@wajdanakmal8325
@wajdanakmal8325 9 месяцев назад
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.
@user-pz9cd5pt4w
@user-pz9cd5pt4w 11 месяцев назад
What is the vs code font you use
Далее
7 better ways to create a React app
7:08
Просмотров 523 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 420 тыс.
React Tutorial for Beginners
1:20:04
Просмотров 2,7 млн
Why Signals Are Better Than React Hooks
16:30
Просмотров 457 тыс.
Learn React With This One Project
42:38
Просмотров 709 тыс.
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 484 тыс.
React JS Explained In 10 Minutes
10:00
Просмотров 242 тыс.