My Complete Frontend Interview Prep Course - roadsidecoder.com/course-details (50% Discount for limited time)
@rafaXD053 жыл бұрын
Whoever is watching this video, let me tell you one thing. You'll be asked to make such project in your frontend interview. Make the most use of this video. Thank you for putting such an amazing content on KZbin bhai 😍❤️
@RoadsideCoder3 жыл бұрын
Yes, It'll be very helpful in machine coding round.
@Sky-yy3 жыл бұрын
Thank you for your comment to let others know the importance of this video bro
@sudhanshumishra9353 жыл бұрын
Yes, i got an assignment which was exactly similar to this 3 days ago, but sadly i coudln't implement the filter functionality......anyways now i have learnt about state management through this video
@shujathaliirfan26623 жыл бұрын
I agree
@ssumit1963 жыл бұрын
thanks buddy, I was just wondering about this.
@vamsikrishna79573 жыл бұрын
Great tutorial!!If anyone is getting a blue background in Navbar dropdown badge,set {10}..the background color gets removed.
@purangurung45592 жыл бұрын
for route we can use
@davidbaraiya26492 жыл бұрын
Yes this is v6
@sumittimori8342 жыл бұрын
You could've told for FAKERJS alternative faker doesn't work anymore or is it
@chetandhadd321 Жыл бұрын
@@sumittimori834 they bro...im getting error The above error occurred in the component any help
@AmitGhosh-lj3oc Жыл бұрын
@@sumittimori834 did you find any alternative?
@PeterMehr Жыл бұрын
@@AmitGhosh-lj3oc You can use @faker-js/faker instead: --> install it with: npm install @faker-js/faker --> then import it in Context.js: import { faker } from '@faker-js/faker'; --> and then use it in Context.js: const products = [...Array(20)].map(() => ({ id: faker.string.uuid(), name: faker.commerce.productName(), price: faker.commerce.price(), image: faker.image.url(), inStock: faker.helpers.arrayElement([0, 3, 5, 6, 7]), fastDelivery: faker.datatype.boolean(), ratings: faker.helpers.arrayElement([1, 2, 3, 4, 5]), }));
@quynhbeautycosmetic Жыл бұрын
00:00 Build a shopping cart app with complex state management in React using Context API and useReducer hook. 05:35 Creating a navbar with search and cart icon 16:16 Using Faker library to generate fake data 21:26 Creating a cart reducer in a React app 31:56 Creating a rating component and a single product component 37:18 Creating functionality for add to cart and remove from cart 47:34 Building a cart page with React Bootstrap 52:59 Creating a shopping cart app with subtotal and total pricing 1:03:34 Implementing product filtering functionality 1:09:23 Implementing filters and sorting for products
@jenso4132 жыл бұрын
For anyone else curious about the Array(prod.inStock).keys(); evidently keys() is also an array method! I thought it was just an object method. What he is doing here is creating an array the length of the number of products in stock. For example, if there was 5 products in stock, there would be an array with 5 elements (all undefined initially). Then, the keys method converts an array to an iterable object with the array keys(indexes). This is then spread into an array and mapped over, essentially making each array element an index. I think a simpler and more understandable solution would simply be to use the index parameter from the map function, the result seems to be the same.
@usamaarifshah74992 жыл бұрын
hey
@fahadahmed35082 жыл бұрын
@@usamaarifshah7499 Thanks for the explanation!
@tanjimanim23912 жыл бұрын
This is a great tutorial. I used this in my project and I want to point out two things. 1. the store/global state will be gone once the page refreshes. Use localstorage to store that. 2. The reducer function used in this video are not pure functions, as you are assigning values on reducers, which is not a good practice.
@oussamaaitboulahna48492 жыл бұрын
Hi brother , can u tell me how did u store ur data into localstorage and fetch it again , cuz for me im only get [object,object] ??
@tanjimanim23912 жыл бұрын
@@oussamaaitboulahna4849 share your code brother
@shariqansari40562 жыл бұрын
@@oussamaaitboulahna4849 Convert your data into string , then store in local storage.
@oussamaaitboulahna48492 жыл бұрын
@@shariqansari4056 Oh Thanks Man
@abbaskagdi12 жыл бұрын
This comment needs to be on top
@noobCoder263 жыл бұрын
I am learning a lot from this channel man .I dont understand why this channel is so underrated
@RoadsideCoder3 жыл бұрын
You can change that by sharing it to more people 😁🙏
@noobCoder263 жыл бұрын
@@RoadsideCoder I am doing that for sure
@anonimato19872 жыл бұрын
I am so greatful for the "!important" trick. This is the first time I'm seeing this. So useful!!! Thank you so much!
@RoadsideCoder2 жыл бұрын
Glad it was helpful!
@sohadmad18232 жыл бұрын
I can't express how much I am grateful to you, you really saved my life! Thank you very much, you are the best instructor I've learnt with him!
@RoadsideCoder2 жыл бұрын
You're welcome ❤️
@BrijeshSingh-dp1ku3 жыл бұрын
Please keep making such tutorials these are really great 👏
@RoadsideCoder3 жыл бұрын
Thank you, I will
@elad39582 жыл бұрын
Thank you brother, I became an instant fan of your work/channel.
@RoadsideCoder2 жыл бұрын
🙏🙏
@jugalsuthar97513 жыл бұрын
such a great session I learn so many things from this video...thanks and make more videos like this..
@AshishGupta-be2yz Жыл бұрын
Very amazing project with indepth explanation. Learned many of new things related to reducer. Thanks a lot bhai.
@ndahayokevin76262 жыл бұрын
Incredible I love your tutorials, you are on of the best Tech youtubers I like most
@RoadsideCoder2 жыл бұрын
Thanks a lot 🙏
@Hrit Жыл бұрын
This is actually a very clean way to write a shopping cart. Thanks for the video man!
@Iambiu Жыл бұрын
Bro can you forward the link of your shopping cart code bro
@debasmitamallick6489 Жыл бұрын
This project is just awesome! I learned a lot from this video. Thanks a ton❤
@Admin-up4hh Жыл бұрын
Very underated Video . This is what I wanted... Thanks ..💯
@shamaunnabi35083 жыл бұрын
You are Just Amazing ....We need More Tutorial Like This....Please Upload More Beginner Projects
@RoadsideCoder3 жыл бұрын
Thank you, I will
@Dhivyathaya Жыл бұрын
Thank you for uploading it, Piyush. It's really helpful for us to understand the concept. I can see the hard work and effort you put into it. Once again thank you.
@bardhan.abhirup2 жыл бұрын
Hey, firstly, thanks a lot for your tutorials and interviews. I genuinely feel like I've learnt a lot through them Having said that, if you don't mind a bit of feedback, your naming conventions and general consistency needs some attention. I feel it's all over the place. I know during the interview demos you tend to code faster but in these expositions when you have the luxury of time, i think it's worth paying attention to since you have a lot of viewers. Just my opinion. Regardless of that, I highly appreciate the effort you put in to your content. Thanks once again!
@RoadsideCoder2 жыл бұрын
Hey, Thanks a lot for your feedback. And I have improved this in my recent videos after realising this. ❤️
@alextalha_2 жыл бұрын
the best video by contextApi
@oncoding4520 Жыл бұрын
Have been seen some of your videos and you are really a great teacher. Please keep doing some more content for us :)
@abubakaryasin86103 жыл бұрын
I learned a lot from you Great content
@RoadsideCoder3 жыл бұрын
Thanks man. ❤️
@akashawasthi95153 жыл бұрын
utub recommending this piece of work
@RoadsideCoder3 жыл бұрын
Awesome 🔥
@mishka.g8462 Жыл бұрын
That's really great!! keep going!!!🤩
@mohitsaud20713 жыл бұрын
Thank you for this wonderful tutorial.
@RoadsideCoder3 жыл бұрын
Welcome mate
@Ravikumar-wv2xq2 жыл бұрын
hello sir great tutorial perfect combination of useReducer and contextAPI. it's working same as like as redux.
@vinayakjaimini771611 ай бұрын
hiii bro i am facing problem in running this project can u help
@iqbal59423 жыл бұрын
you deserve more subscribers and likes 💖
@RoadsideCoder3 жыл бұрын
Thanks man. You can support me by sharing this to people who need it.
@시고르자브종-i1h2 жыл бұрын
Thank you for your kind explanation! btw I wonder if there is a way to lose focus on the green cart button at "50:15" when moving to the cart page. I tried document.activeElement.blur() but it doesn't work. Probably it's hard to control the bootstrap component?
@saint115io Жыл бұрын
Thank you very much professor for this amazing project, this opens and expands my knowledge to know more about Reducer, provider state, etc.
@RoadsideCoder Жыл бұрын
Glad to hear that !
@mma-dost2 жыл бұрын
Thank you Bhaiya for this tutorial. Really great video 🔥🙏👌❤️👍👍
@RoadsideCoder2 жыл бұрын
🙏🙏
@BrijeshSingh-dp1ku3 жыл бұрын
Best resource for React 🔥🙌
@saurabhtiwari-kg9vn Жыл бұрын
Bhai kya khate ho 🤔 itna energy rahta hai 😄 Bhokal video h 🔥🔥
@rajbhatia27842 жыл бұрын
you are awesome mentor, well done mate!
@niranjanjathar37482 жыл бұрын
Thanks for such a great video on context api
@sk1992 жыл бұрын
your projects are super helpful brother..⭐❤
@azizulhakim15343 жыл бұрын
amazing content brother. You deserve more subs, One request: if possible please use a loud microphone.
@RoadsideCoder3 жыл бұрын
Thanks brother, I'll improve the audio quality 🤘
@parvathyvd2 жыл бұрын
Thank you so much for making such a wonderful project.
@krutidewda315210 ай бұрын
very useful video. Thankyou so much for this.
@RoadsideCoder10 ай бұрын
Thanks! I have created an indepth course covering all such topics - roadsidecoder.com/course-details
@IvinAustan Жыл бұрын
Thanks a lot, such an great video with nice explanation. 👍
@vaibhavjadhav1702 Жыл бұрын
thank you for this amazing project🙂
@lle51592 жыл бұрын
This is too awesome, I've learned a ton by this video. Thank you very much! Just a little question: `alignRight` in is not working in my end. Has anyone caught the same thing?
@kelongFX2 жыл бұрын
yes it says something about the dom i didnt quite get it
@lle51592 жыл бұрын
@@kelongFX I use CSS to align the dropdown menu, that I set position: relative for container and position: absolute for dropdown-menu
@cat_onthe_2 жыл бұрын
Remove 'alignRight' and add Worked for me.
@andress95252 жыл бұрын
You can add inline styling to the tag like so: style={{ alignRight: true }}
@nobodyneedstoknow1282 жыл бұрын
align={'end'}
@josatienganh7 ай бұрын
It's a great video! Thanks a lot!
@chiranjeevichowdary59483 жыл бұрын
Waited for this a long time
@RoadsideCoder3 жыл бұрын
Haha yeah
@sushmitagupta2 жыл бұрын
Great tutorial! It helps me a lot while adding some feature in my E-commerce project but I'm using my own database and I have not added the "inStock" in my database so can you please tell me how can I add that and use in the qty increment feature of cart cards.
@Ajithmani-bm1ji2 жыл бұрын
You got a answer
@baridzimaximillem67433 жыл бұрын
You are amazing man keep it up
@RoadsideCoder3 жыл бұрын
Yo thanks mate!
@namethse01 Жыл бұрын
thanks bro, though manything outdate and alot update after time, but it still a good tutorial to start and easy to understand
@islamel7adidy8982 жыл бұрын
بتتكلم اسرع من حياتي م براحه ي غالي
@korndev68622 жыл бұрын
Great Tutorial. i would like the react + typescript + combine reducers tutorial plz.
@MrPeepa2 жыл бұрын
"A is only ever to be used as the child of element, never rendered directly. Please wrap your in a " what to do if i get this error?? because if i wrap with it says [home] is not a react component or react.fragment
@dangerzone-1363 жыл бұрын
Really great video. I am looking something like that. Thank you very much..
@RoadsideCoder3 жыл бұрын
Glad u liked it 🙏
@MrAndykofi3 жыл бұрын
Great job, thanks for sharing
@hood_love_189 Жыл бұрын
complicated video, took a while for me to understand the useState hook, but a good job overall...
@navinkumarsahu1159 Жыл бұрын
Please bring more such contents
@manojsuggala4666 Жыл бұрын
Good video with clear Explanation. I tried implementing this project, But I didn’t get the output. I got an error saying that: Module not found ‘Faker’ can’t resolve in src/context/context.js. Even I install the package by npm install faker, the error is not re-solving. Can any one help me in resolving the error Thanks in Advance.
@mprasanth182 жыл бұрын
In interviews is it okay to use plain css modules instead of bootstrap?
@l.seciltuncay7921 Жыл бұрын
great tutorial ⭐⭐⭐⭐⭐ thanks
@huyenminh26313 жыл бұрын
From VietNam thanks you so much
@RoadsideCoder3 жыл бұрын
Welcome 🤟
@iqbal59423 жыл бұрын
Amazing video bro ❤️🙌
@RoadsideCoder3 жыл бұрын
Thanks man❤️
@sushilkumar-ef7gh Жыл бұрын
Only when components need lot of different state than , its recommended to use state hook else switch on reducer or redux
@souleymanecisse86443 жыл бұрын
Great content , thanks for sharing
@RoadsideCoder3 жыл бұрын
Glad you liked it 🙏
@GauravPatel-kh1sq3 жыл бұрын
Very Nice explanation with real project. thank you. Can you create/share video with Backend API calling like realword application?
@RoadsideCoder3 жыл бұрын
I already have a mern stack tutorial series. You can check it out!
@alanouri99652 жыл бұрын
Thank you man!
@purusharma81922 жыл бұрын
Please make more react projects....thanks a lot btw are you in akshay saini discord voice chat on first day😁
@RoadsideCoder2 жыл бұрын
Yes i was
@TajminurRahmanmeshadowscream3 жыл бұрын
Great tutorial. So much helpful. I have a question though. How to initialize state with products from API call? Because you're loading dummy products which are synchronised call. How about an async call using API? I tried but the initial state in useReducer initialized first before the products from API get loaded. What do you think?
@RoadsideCoder3 жыл бұрын
You can do it the same way, that dummy data is also the result of an api call from faker
@chafikgouasmia80892 жыл бұрын
Thanks dear oracle : )
@sahanan71172 жыл бұрын
Hi.. In creating page router, I have written same code as yours but their is error in my output... Please help me out
@devsingal83732 жыл бұрын
thank you bhaiya so much this hepls a ton, i was stuck in my cart app but this helped me get a new perspective thank you so much can you also make full working ecommerce website video plzzzzzzzzzzzzzzzzzzzzzzzzzzzz
@RoadsideCoder2 жыл бұрын
Yeah sure bro!
@alphonsesossou4283 Жыл бұрын
Thanks so much for this awesome course. I am making an excellent use of it. Only one minore issue. Children props is flagged with the error message "Children is missing in props validation". I am using react app created through latest vite. Any hint on what to add to the app so that error disappears? I should mention that the context provider function in jsx nor js.
@KartikNavale-f1e Жыл бұрын
I found the error while installing the faker, anyone can help me in this? Error- Module not found: Error: Can't resolve 'faker' in 'D:\Projects\e-commerce\src\context'
@simranmundada2 жыл бұрын
I am getting module not found error which says can't resolve faker in my project
@Insane.18_7 Жыл бұрын
Hi bro thank you so much. You helped me a lot by sharing this content ❤. Can I know one thing, is this responsive, I mean is this compatible for smaller devices like mobile applications?
@nageshworshah83143 жыл бұрын
I don't understand at 41:31 ADD_TO_CART feature. I don't know what's going on there did you guys understand this?
@RoadsideCoder3 жыл бұрын
In this I'm first spreading the state so that we take everything that's inside of the state, then in cart variable we are taking everything inside of cart by spreading it and then adding a new product.
@SagarTakoresdt3 жыл бұрын
40:29 Can you please explain how this destructing work while using spread operator, understand, but fill like something missing
@RoadsideCoder3 жыл бұрын
You can try to google. Will find awesome resources
@artemkhasin37352 жыл бұрын
Is it possible to specify versions of all nmp's you are using, and react version as well. Every time I'm installing something it is not working the propper way. I follow the code line by line and check each character but the result is different. I actually stoped wne you installed "faker", since it is not working at all, it just says module is not found
@shruthichandran27962 жыл бұрын
Try in react 17
@blah99603 жыл бұрын
Hey thanks for awesome tutorials. Please make a video on redux persist and how user are not able to see persist local storage data in production level
@RoadsideCoder3 жыл бұрын
Hey, Have you followed my MERN Stack Tutorial with redux?
@blah99603 жыл бұрын
@@RoadsideCoder yes i followed but there is no redux persist implementation
@RoadsideCoder3 жыл бұрын
@@blah9960 I have done it, in our store.js when the app loads, it takes user from localstorage
@subhamdudheria95232 жыл бұрын
Why did you use ... before state in 40:29
@afsaruddin59673 жыл бұрын
Hi Mentor, How can I fetch data from rest api in context instead of faker api? Kindly give me some hints.
@RoadsideCoder3 жыл бұрын
Hey, yes u can with axios or fetch
@himankshu10 ай бұрын
So what will happen if you add some items and then hard refresh the page? Does the cart items updated to its initial state? If yes, how would you fix it?
@garima65712 жыл бұрын
Great man
@PoojaSingh-ev2dh Жыл бұрын
I must say your video is really helpful. But i have a doubt that from where this sort is coming?? const{productState : {byStock, byFastDelivery, byRatings, searchQuery, sort}, productDispatch } = CartState(). Why we are destructuring sort?? its not defined in productReducer state Please let me know
@pupil_19 ай бұрын
case "SORT_BY_PRICE": return { ...state, sort: action.payload }; here they are mentioning
@parmaryash44063 жыл бұрын
Amazing
@meitoli Жыл бұрын
in case you have a problem when you click the add to cart and the remove from cart and all items selected. There is an error in the case ADD TO CART, thanks to CHATOpenAI, the code: case 'ADD_TO_CART': return {...state, cart:[...state.cart, {_id: action.payload.id, ...action.payload, qty: 1}]};
@priyankashingne81432 жыл бұрын
This is really helpful video i m trying to create a same project but i m getting problem to access faker
@poojab32722 жыл бұрын
Module not found: Error: Can't resolve 'faker' in 'C:\shop cart\shopping-app\src\context i got this error even after i install faker i dont know what to do . please help me
@shaimantidas98942 жыл бұрын
Me too🙂 did u resolve?
@camo49702 жыл бұрын
try this import { faker } from "@faker-js/faker";
@celticspyd58879 ай бұрын
sir i want to know If a customer clicks on order btn to order and the order list should received at the admins page/panel without any database or backend possible?? if yes how sir?
@shujathaliirfan26623 жыл бұрын
superrrr bro
@RoadsideCoder3 жыл бұрын
Thanks man
@sportsynews750 Жыл бұрын
have you guys have any problem while importing faker
@vaibhavsharma8012 Жыл бұрын
Good Project
@rounakbhattacherje3426 Жыл бұрын
in the filter component for the stars , the onClick prop is receiving back the (i=index) from its Rating component , but in react data flow direction is unidirectional, so how is this phenomenon possible??? anybody who understood- care to explain, (i m very new to react, hence this is something very new to me). Thanks in advance
@RonyRoy3659 ай бұрын
How I will create increment and decrement button . Alternative of select and option. Can you tell me. I created but not working properly
@nishantbindhani9434 Жыл бұрын
how is ur dropdown menu position like this (end of dropdown menu container is aligned with the end of dropdown button)
@zakyasharmeen58153 ай бұрын
sir as we have generated data from the faker.js so the data is going to be called as dummy data or the dynamic data coming from api?
@RoadsideCoder3 ай бұрын
dynamic
@hellocoding2614 Жыл бұрын
faker is not working for me , it's continuously showing me error that module not found , even I've installed it properly again and again ? can anyone helps me out of it?
@pramodravuri610810 ай бұрын
npm i faker@5.5.3
@skskssss1262 жыл бұрын
I was asked to implement a cart app using redux or context api. I made this once but due to lack of practice(not making projects with redux or context api) i was not able to make app completely.
@bhattyash152 жыл бұрын
In which company interview brother and at which round they asked ?
@skskssss1262 жыл бұрын
@@bhattyash15 It's a startup and since I've already done some projects for several clients, they just wanted to see how much time i would take to make the cart feature. And as I've already mentioned that the projects i made didn't have redux, so I had to recall whatever I've learned from all the cart feature videos. I almost finished the feature using context api and it was the first round.
@kayman95762 жыл бұрын
@@skskssss126 where you coding right in front of them?
@skskssss1262 жыл бұрын
@@kayman9576 yeah
@width192 жыл бұрын
@@skskssss126 can you google?
@johnkucharsky69272 жыл бұрын
Great job! May i ask you, what do you do for living? Are you working as a programmer currently?
@RoadsideCoder2 жыл бұрын
Yes I'm doing a full time job.
@johnkucharsky69272 жыл бұрын
@@RoadsideCoder may i ask you what i should know to find a job as a react developer? Do i need to learn cms(contentful etc. ) or maybe node?
@RoadsideCoder2 жыл бұрын
@@johnkucharsky6927 How's your skillset in react?
@johnkucharsky69272 жыл бұрын
@@RoadsideCoder well, i do responsive layout with tailwind. UseState and useeffect, router, receive data from api. Todo app, local storage. And useconetxt and usereducer i'm not comfortable with yet. Also tried contentful a little
@meidadb59922 жыл бұрын
Thank you❤️
@sarthakkanungo9790 Жыл бұрын
why it is throwing error in single product component ,Cannot read properties of undefined (reading 'some')
@codedude82532 жыл бұрын
whenever I add items to cart in Context it works fine , but when I go to Cart page the cart Context gets reset and it becomes empty.What should I do ? I thik its happening due to when I route to cart page the page gets refreshed.