This is absolutely great content! I'm applying for my first job in software development and this has helped me a lot with the technical part of the process. Keep it up!
this was very handy, i was struggling trying to understand the differences and overlapping concepts of react query and redux in different contexts, i think this gives really good example on where react query comes as a very useful tool :)
Golden content, clear and catchy explanations. I was searching for a server-side search method and man... you just made my day. You deserve more subscribers and you got already +1 from me:D God bless you and good luck with your UA-cam journey.
You should deserve million subscribers. Real thinking, live error solve, optimized code You are awesome. 🧡🧡 And waiting for some production level project videos 😁😁
Look look look everyone!! This guy is posting great content but only has 72 subscribers. Let’s help him build up more subs. Thank you so much! Please make one on pagination in react without react paginate
Really good video! But I kinda disagree with what is said on 0:20. I worked on Ecommerce with more then 10k products (not a big deal) and what i did was plaing with Redux toolkit and on landing on /categories page I make a call to the db trough some service lair and i store the all products in my Redux state. And after that you can do what ever manipulation you want over the data without doing any calls any where, just 1 call. :) In a place where you have 200k products you can do crazy tricks to increase performence in terms of filtering products. But really this my opinion on the matter, the rest is lit. :)
Thank you so much for this wonderful tutorial!! What if a bag has multiple colors, for example: [brown, yellow, black]. How can i find it by checking the (separate) boxes of brown, yellow and black instead of selecting one filter called: brown, yellow, black. Really looking forward to the answer, thank you !! :)
Hi! If it has multiple colors you can still perform the filter on the server. Since the frontend gives you one or more colors in a comma format. You just need to change how the filter works on server to support a product with multiple colors: github.com/abacaj/react-simple-filter-sort-ecommerce/blob/main/server/index.js#L20
@@AntonBacaj could you please give an example of how to change the code for a bag with multiple colors? When I change the color type from "string" to [string], I get multiple errors everywhere...
Hi @@mescalim7252, you can see code change here: github.com/abacaj/react-simple-filter-sort-ecommerce/commit/01592d716d3b4ca23df3dd822612110c760309bd Try pulling the latest it will support products that have an array of colors, I modified some of the products so that they have multiple colors. Like Knapsack, Tiny pouch etc.
I have a similar structure in my own project but how do you create individual pages for each item? I mean if someone click the item, it should open a link and I guess I shouldnt all html files one by one but I didnt figure out what to do yet.
You will have to make some changes such as removing react-router and changing the useSearchParams hook. You can do the filtering on your next.js /api route
This is absolutely great content! I'm applying for my first job in software development and this has helped me a lot with the technical part of the process. Keep it up!
This is great Antonio, happy to hear my content has helped you 👍
this was very handy, i was struggling trying to understand the differences and overlapping concepts of react query and redux in different contexts, i think this gives really good example on where react query comes as a very useful tool :)
Golden content, clear and catchy explanations. I was searching for a server-side search method and man... you just made my day. You deserve more subscribers and you got already +1 from me:D God bless you and good luck with your UA-cam journey.
Thank you for that, very happy to hear the content is helping. It will get even better over time 🚀
Good thing I found your channel Anton. Really helpful 👍
You should deserve million subscribers. Real thinking, live error solve, optimized code You are awesome. 🧡🧡 And waiting for some production level project videos 😁😁
You deserve more subscribers. Keep going on.
And good luck for you baby 🥰
Nice video, you are the best!
Thanks Anton, just what I needed. 👍
Look look look everyone!! This guy is posting great content but only has 72 subscribers. Let’s help him build up more subs. Thank you so much! Please make one on pagination in react without react paginate
I agree.
This what you do is really an amazing work. Keep it up !
Good job bro. Indeed, this a good content as well as a beauty code. I can learn how to optimize code from you. Keep it up!
Top notch content! 💯 Subscribed!
I'm very grateful, thank you very much to this absolutely brilliant content!
Wow I really liked this video. Thanks!
thanks for make this video you are great
this is great! i am using mongodb to fetch product so hopefully same logic from your tutorials!
Awesome tutorial
Good professional train❤
What extension are you using for the errors to show up ?
would you please do a video on which visual studio code extensions you are using?
thanks for your great tutorials
Awesome!!! TQVM!!
Nice content, thx !
Bring some cool stuffs sir like these
Really good video! But I kinda disagree with what is said on 0:20. I worked on Ecommerce with more then 10k products (not a big deal) and what i did was plaing with Redux toolkit and on landing on /categories page I make a call to the db trough some service lair and i store the all products in my Redux state. And after that you can do what ever manipulation you want over the data without doing any calls any where, just 1 call. :) In a place where you have 200k products you can do crazy tricks to increase performence in terms of filtering products. But really this my opinion on the matter, the rest is lit. :)
Good points!
I think after a number of products it makes sense to use pagination to reduce the payload size / improve query performance
@FalioV I really need help from you. Can you share the GitHub repo for the e-commerce project.
hello, how can I make this application with the city, district, neighborhood, category buttons?
(Profil cards filter)
Good
hi, im looking your tutorial, im learning now react, but i have a problem, i cant list the products, can you help me please?
Thank u❤️
Thank you so much for this wonderful tutorial!!
What if a bag has multiple colors, for example: [brown, yellow, black]. How can i find it by checking the (separate) boxes of brown, yellow and black instead of selecting one filter called: brown, yellow, black.
Really looking forward to the answer, thank you !! :)
Hi! If it has multiple colors you can still perform the filter on the server. Since the frontend gives you one or more colors in a comma format.
You just need to change how the filter works on server to support a product with multiple colors: github.com/abacaj/react-simple-filter-sort-ecommerce/blob/main/server/index.js#L20
@@AntonBacaj thank you so much for your answer!! 🚀 👍🏼 👍🏼 👍🏼!!!!
@@AntonBacaj could you please give an example of how to change the code for a bag with multiple colors? When I change the color type from "string" to [string], I get multiple errors everywhere...
Hi @@mescalim7252, you can see code change here: github.com/abacaj/react-simple-filter-sort-ecommerce/commit/01592d716d3b4ca23df3dd822612110c760309bd
Try pulling the latest it will support products that have an array of colors, I modified some of the products so that they have multiple colors.
Like Knapsack, Tiny pouch etc.
@@AntonBacaj you rock. 🚀. Thank you so much!!! 😊 👏
I have a similar structure in my own project but how do you create individual pages for each item? I mean if someone click the item, it should open a link and I guess I shouldnt all html files one by one but I didnt figure out what to do yet.
So for viewing an item, you would create a route using react-router with dynamic segments for the product id
@@AntonBacaj thank you so much for the answer and also for the video
What extension is that which shows the errors inline?
It's called Error Lens
marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
it would be better without extra hooks and typescript
Ah you could do the same without typescript, but I highly recommend it for avoiding errors at runtime
@@AntonBacaj ok thank you dear, I will count it ))
btw does this work with next js?
You will have to make some changes such as removing react-router and changing the useSearchParams hook. You can do the filtering on your next.js /api route
@@AntonBacaj oh great, thanks. I am learning GraphQL, is that a good idea to combine with this project too?
You could try it, but personally I wouldn't because the project doesn't have multiple sources for data or a complex schema
@@AntonBacaj oh ok, that make sense, I figured all the ecommerce data is usually come from one database in my case prob mongodb.
can you please share your project repo on git
Just added - you can check it out here: github.com/abacaj/react-simple-filter-sort-ecommerce
Your baby is crying