I have watched you complete tutorial on 10 projects in react all are very good you explained each and everything very clearly but in this one at the last you made me confused i didn't understand what you are doing at last when creating functions in app.js exporting 😢. By the way thanks for such an amazing course.... Thank you that course have made me to be confident on basics of react
I redesigned the filters so it works with a combination of properties selected so it takes into account all the items with those properties instead of just one as your implementation
Hey Joseph, I also want to implement the filters which works with combination of properties but facing problems while implementing this. Can you share your code or any other recommendations from where I can learn this functionality
love the video. This is one of the most decent ecommerce project videos i have ever come across. One improvement is that i should download a monospaced font like Fira Code. Jetbrains Mono or Fragment Mono. Overall this video is perfect
@@huxnwebdevsorry for any confusion i might have caused. By downloading font i meant that u should use a monospaced font rather than a serif font since monospaced fonts are comfortable to read code with for long hours. But in the end the decision is yours
@@KimCarlos12 Thanks for the suggestions buddy, I've bought a font called (Dank Mono) which costs me £25 and I've used that in my FullStack JavaScript course, and to be honest this is the best font I've ever used. 🤜
Thank You. Because this particular content need for my project and its very important and useful content for create e-commerce websites. and one more say thank you more ....
I love this video! Question, how do I make so that I can select multiple categories. I can see that if I am choosieng 0-50$ and Blue, it just selects me blue
Love this video. could you please make another video of the Search and Filtering System for the table in React? Thanks for sharing your knowledge with us!
Hey! This video was very helpful, thank you. I was not able perform search operation even after following the change you mentioned. The filters work fine! Could you help me out or suggest anything so I can make the search work?
I'm not sure where the mistake occurred, but my hunch is that there might be a typo. Nevertheless, here is my GitHub repo. Feel free to clone that to your machine and investigate where the issue might be. 👇 github.com/HuXn-WebDev/React-With-10-Projects/tree/main/3.%20Projects/10.%20E-Commerce%20Advance%20Filtering
It might be a good idea to update the url when the user filter the products because if he wants to send a direct link to different person with all filters your approach will not work I think. Something like ?filters=&search=
Thanks for video! No need here use destructed title in filtering, because we don't have radio button with title if (selected) { filteredProducts = filteredProducts.filter( ({ category, color, company, newPrice }) => category === selected || color === selected || company === selected || newPrice === selected ); }
@@huxnwebdev You use title for radio buttons filtering, but no need, because we don't have radio button with title if (selected) { filteredProducts = filteredProducts.filter( ({ category, color, company, newPrice, title }) => category === selected || color === selected || company === selected || newPrice === selected || title === selected ); }
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Thanks for the course but when you try to create something why don't you create when it's needed because most of people are not understanding what are you creating and why are you doing that till the end. It's little bit confusing. But thanks anyway!
I'm glad you've enjoyed the video Billy, and I'm not sure about what part of the video you are talking about? because I've explain each and every single component in this video, Can you highlight the exact time where I skip something, Other then that thanks for your positive feedback🥂
@@huxnwebdev I mean whey you are creating "handler" functions you did little bit confusing, also ending is too confusing because of sending data through components next time can you make a with redux. Thanks!
Hey! Thanks for the amazing video. Can you please provide the code if we want to apply the dark mode to the current website. It will be very cool. Forward to looking for your answer. Thanks!!!
Here is the GitHub repository and there you'll found all the code, either clone the repo or download that in your machine and compare your code with mine. Repository 👇 github.com/HuXn-WebDev/React-With-10-Projects
Yap it will work, but rendering that amount of products at once on the screen will just crash your browser but if you somehow manage to do it, the filtering will work guarantee.
@@zahidulislam816 It's not about filtering The filtering part will work but If you're working with that amount of data then you'll have to provide some sort of paginations for your products.
I guess there would be a bug or a typo in your code, because I've never get complained that this project isn't working, Here is the project repo try compare your code with mine and it will definitely solve your issue 👇 github.com/HuXn-WebDev/React-With-10-Projects
I have just watched your video on 21 Jan 2024 and the 3 options for the Filter do not work correctly, an example might be Sandel, $150, black. It will show any price or other mistake, maybe the bug has been fixed in your GIT after this video was published???cheers mate, AWESOME TUTORIAL@@huxnwebdev
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Build 100+ Projects [HTML, CSS, JAVASCRIPT] 🔥
th-cam.com/play/PLSDeUiTMfxW7lm7P7GZ8qtNFffHAR5d_w.html
Where can I get all that data to paste in data.js
I have watched you complete tutorial on 10 projects in react all are very good you explained each and everything very clearly but in this one at the last you made me confused i didn't understand what you are doing at last when creating functions in app.js exporting 😢. By the way thanks for such an amazing course....
Thank you that course have made me to be confident on basics of react
I redesigned the filters so it works with a combination of properties selected so it takes into account all the items with those properties instead of just one as your implementation
hi Joseph! can you please share the code?
@@amallick252 can't share links here though
Can u give us ur github or something so we get the code?
Do you have telegram to drop me your code?
Hey Joseph, I also want to implement the filters which works with combination of properties but facing problems while implementing this. Can you share your code or any other recommendations from where I can learn this functionality
I have done this project Thank you so much Man with Lots of love From India : )
Thanks for the love buddy 🥂🥂
bhai api vagara sb chal rha achese???
This was really great 🔥👏🏾 Now I am about start your MERn stack Project you just dropped. Thank you so much for all these tutorials
I'm glad my content was helpful for you and i'd love to see you in MERN project 🤜
You really saved my life with this. You made one more human extremely happy. 👩💻
I'm glad it was helpful 🥂
you are an amazing teacher 😘😘😘
love the video. This is one of the most decent ecommerce project videos i have ever come across. One improvement is that i should download a monospaced font like Fira Code. Jetbrains Mono or Fragment Mono. Overall this video is perfect
Thanks for your positive feedback Kim, and I'm not sure what do you mean by downloading the font?
@@huxnwebdevsorry for any confusion i might have caused. By downloading font i meant that u should use a monospaced font rather than a serif font since monospaced fonts are comfortable to read code with for long hours. But in the end the decision is yours
@@KimCarlos12 Thanks for the suggestions buddy, I've bought a font called (Dank Mono) which costs me £25 and I've used that in my FullStack JavaScript course, and to be honest this is the best font I've ever used. 🤜
@@huxnwebdev Aaaw 🥰 I'm Glad i could help.
Done ✅ this project love form Sindh Pakistan ❤❤❤
Bro my input filter does not work
Bri is just legend! Nice way of teaching very friendly i enjoyed alot!
Bro just amazing Bro💯🔥
Thank You. Because this particular content need for my project and its very important and useful content for create
e-commerce websites. and one more say thank you more ....
Thanks for your positive feedback, I'm glad it was helpful 🥂
Thank-you so much Man with lots of love from India
So nice of you buddy 🤝
This video is very helpful for me ❤
Glad it was helpful!
@@huxnwebdev in 40:43 i can t find .sidebar-title
This is helpful. Thank you for this
You're so welcome!
I love this video!
Question, how do I make so that I can select multiple categories. I can see that if I am choosieng 0-50$ and Blue, it just selects me blue
Muy bonito.
Great tutorial.Much appreciated.
can anyone tell me how to use the above methods in this video in a dynamic data from an Api?
Thanks! I managed this course.
Amazing video! It saved me! I hope I will be able to work with props like this alone... Rest I can understand
in 40:43 i can t find .sidebar-title
Great job 👍🏻
But can you extend the video with handling the search sort and filter with the url ( Query parameters)
great explanation by you😍
please make a series of full e-commerce website ,with payment functionality and using mongo- db as a backe-end
Thanks for the positive feedback and currently I'm working on ecommerce project, Coming very soon 🥂
Amazing tutorial bro! Really helpful for beginner like me.Thank you
I'm glad it was helpful 🥂
Thank you so much, i learnt a lot!
Underrrated
Love this video. could you please make another video of the Search and Filtering System for the table in React? Thanks for sharing your knowledge with us!
Nice🎉
Hey! This video was very helpful, thank you. I was not able perform search operation even after following the change you mentioned. The filters work fine! Could you help me out or suggest anything so I can make the search work?
I'm not sure where the mistake occurred, but my hunch is that there might be a typo. Nevertheless, here is my GitHub repo. Feel free to clone that to your machine and investigate where the issue might be. 👇
github.com/HuXn-WebDev/React-With-10-Projects/tree/main/3.%20Projects/10.%20E-Commerce%20Advance%20Filtering
how to apply these filters on mobile devices?
Please a video for this too, as most of the users use mobile
Man you're great 💚💚💚
nice way of teaching
It might be a good idea to update the url when the user filter the products because if he wants to send a direct link to different person with all filters your approach will not work I think. Something like ?filters=&search=
Cool!🎉
Nice work you're amazing keep going
great 😊
Nice video keep going bro, God bless you♥♥
9:50 You could have used rfce instead of rfc to export it at bottom
Thankyou brother ❤
nice work i loved it🤩
I'm glad you've enjoyed my content 🥂
Really awesome 👌 Does the add button work? Have you used react redux to add and remove items to the wishlist for purchase.
No I didn't use redux, this project is the part of my Reactjs course so I thought lemme make a separate video on that.
thanks so much! I'm trying to do that with typescript, but i'm very confused ...can you make that same video with typescript?
I'm not gonna remake this one, but ill try to make another Ecommerce website using Redux Toolkit + TypeScript
Nice bro !
🥂
Thank you bro..
Subscribed man Hope You will also Bring Next Js Projects.
Thanks for video!
No need here use destructed title in filtering, because we don't have radio button with title
if (selected) {
filteredProducts = filteredProducts.filter(
({ category, color, company, newPrice }) =>
category === selected ||
color === selected ||
company === selected ||
newPrice === selected
);
}
Didn't I do it that way?
@@huxnwebdev You use title for radio buttons filtering, but no need, because we don't have radio button with title
if (selected) {
filteredProducts = filteredProducts.filter(
({ category, color, company, newPrice, title }) =>
category === selected ||
color === selected ||
company === selected ||
newPrice === selected ||
title === selected
);
}
Hii sir in my project the radio button is not working 😢 like< input
Categories flats sneakers.
One small request can you please use vite instead of cra in future projects it would be helpful as you know cra kindaa sucks.
Yap that's the plan 🤜
Really this is an good session for us thank you and one more thing I have small doubt where do I get the above data please tell me
Look in the description
Ill be back after completing JS
With this project will i know enough about react
no
Expected `onChange` listener to be a function, instead got a value of `object` type.
What is the solution to this problem??
39:09 How did u insert logo please anyone explain abt that
🛒 copy this.
6 months late but just press windows key + period to bring up emojis.
how to turn all category into multi-selected category?
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
I've already start working on the project but I want it to be THE BEST ecommerce project on TH-cam so it will take a bit of time🥂
When will it be ready? roughly@@huxnwebdev
What theme do you use?
Amazing project. Just a suggestion, please add cart functionality too. Basic adding products and displaying the total
Thanks for the suggestion, ill surely do that 🥂
@@huxnwebdev I'm anxiously waiting dude :)
@@ExplorerOfTheGalaxyComing up tomorrow🤜
@@huxnwebdev if you let me know I'll sub :)
@@huxnwebdev Where is it bro? Lol .. sorry :)
Great Work 👏❤
What is your vs code theme??
support this comment!
Great tutorial! Could u plz make another video on cart functionality for the total and transaction history too? Thank you!
If you need a video for that then you need to go back to fundamentals.. learn problem solving
Thanks for the course but when you try to create something why don't you create when it's needed because most of people are not understanding what are you creating and why are you doing that till the end. It's little bit confusing. But thanks anyway!
I'm glad you've enjoyed the video Billy, and I'm not sure about what part of the video you are talking about? because I've explain each and every single component in this video, Can you highlight the exact time where I skip something, Other then that thanks for your positive feedback🥂
@@huxnwebdev I mean whey you are creating "handler" functions you did little bit confusing, also ending is too confusing because of sending data through components next time can you make a with redux.
Thanks!
@@billydevl2058 Sure next time ill use redux-toolkit and ill do my best to provide more explanation 🥂
create a this types of simple shopping cart with redux and more funtionality
Already in my list but that one will be far more bigger then this one. 🥂
Hey! Thanks for the amazing video. Can you please provide the code if we want to apply the dark mode to the current website. It will be very cool. Forward to looking for your answer. Thanks!!!
I need assistance, can somebody help me for 5 mins? I will send screenshot idk why it is not working, I think it is about css
Here is the GitHub repository and there you'll found all the code, either clone the repo or download that in your machine and compare your code with mine.
Repository 👇
github.com/HuXn-WebDev/React-With-10-Projects
Can it done with Vue?
is this work when i have 1000k products ??please answer me
Yap it will work, but rendering that amount of products at once on the screen will just crash your browser but if you somehow manage to do it, the filtering will work guarantee.
@@huxnwebdev can you plz give me a suggestion how will I filter of learge amount products with this type of functionalities?
@@zahidulislam816 It's not about filtering The filtering part will work but If you're working with that amount of data then you'll have to provide some sort of paginations for your products.
Where can I get that data in data.js??
Where is the link to your github respository
Nice project idea, but complex multiple filtering is not working
I guess there would be a bug or a typo in your code, because I've never get complained that this project isn't working, Here is the project repo try compare your code with mine and it will definitely solve your issue 👇
github.com/HuXn-WebDev/React-With-10-Projects
@@huxnwebdev watch your video (3:38). and see filtered footwear. there are shoes under $150.
I have just watched your video on 21 Jan 2024 and the 3 options for the Filter do not work correctly, an example might be Sandel, $150, black. It will show any price or other mistake, maybe the bug has been fixed in your GIT after this video was published???cheers mate, AWESOME TUTORIAL@@huxnwebdev
Could you please share API source for me? 🙏
😢oI respect.
hello pls can you deploy it
Can you make tutorials on vuejs/nuxtjs
Yap I totally can, but currently I'm working on my Full-Stack JavaScript course so once that's done then ill think about Vuejs content. 🥂
@@huxnwebdevHi, how's the course coming along? I really want to learn Javascript
Please add chapters to your vids...
Added 🥂
@@huxnwebdev Awesome thanks man, helps so much and your tuts are very informative. Keep it up
Muchas gracias mister Huxn.... tendre algun problema si genero la plantilla de react con Vite
déjame saber si tienes algún problema en el proyecto
you should use modular css instead of normal css
This is absolutely awesome! @huxnwebdev
Thanks for your positive feedback 🥂
@@huxnwebdev please can you make a tutorial on linking this e-commerce app to a mongo db and backend.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.
Sir we want Full stack MERN e-commerce (redux-toolkit, tailwind, axios, framer motion/gsap, Designing & creating express API and hosting api, eslint+ prettier settup, testing(jest). Kindly follow MERN code best practice and code refactoring.