Product List With Cart Using React and SCSS!

What are you most proud of, and what would you do differently next time?

• I'm really proud of how the project came out. My React skills definitely leveled up after completing this challenge.

• I gained a better understanding of the React component lifecycle and how/when components are mounted and unmounted. I definitely got better using the 'useEffect' hook as a result.

• One challenge that I faced was trying to add the fade out effect when the modal disappeared. I was adding an animation class to the component when it was being unmounted, but I wasn't seeing the animation because the component was being immediately removed from the DOM. To handle this problem, I added a delay to unmount the Modal so that you could see the fade out effect.

• I used some new hooks in this project like 'useRef' and 'useCallback'. I also created some custom hooks and made sure that they were reusable.

• I implemented 'localStorage' for the first time so that when a user refreshes the page, the contents of their cart persists.

• I used the 'matchMedia' method for the first time instead of the 'resize' event listener for better performance. The 'resize' event listener will call your callback function every time the page gets resized. If you changed your viewport width from 800px to 700px, your callback function would be called 100 times. When you use the 'matchMedia' method, your callback function only gets called when your media query breakpoint changes. This is much more efficient and I should have discovered this earlier.

• Let me know what you guys think and I appreciate any feedback! Thanks!