Responsive product list with cart using reactjs and typescript

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

I'm most proud of the seamless interactivity of the product selection and cart system especially the way items update in real time with visual feedback (like the orange border, quantity controls, and cart breakdown). Implementing this with Zustand and React while keeping accessibility in mind was both fun and challenging.

If I were to do this again, I'd focus earlier on accessibility and responsiveness to save time later in the project. I’d also aim to implement unit tests from the beginning and possibly use a design system or component library to scale styling more efficiently.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was managing dynamic cart state—ensuring accurate updates when users added, removed, or adjusted item quantities. It was especially tricky to sync UI changes with underlying state logic while keeping the interface responsive and intuitive.

I overcame this by refactoring the cart logic into a centralized Zustand store. This allowed for consistent state updates and simplified data flow across components. I also used conditional rendering and Tailwind utility classes to provide real-time visual feedback (like changing the button layout and highlighting selected products), which helped reinforce the state changes for users.

Styling the modal to be centered, non-stretching, and with a proper dimmed background was another challenge. I experimented with different layout and backdrop-blur strategies until I found a clean, responsive solution that worked well on all devices.

What specific areas of your project would you like help with?

I would appreciate feedback on improving the overall structure and maintainability of my state management setup. While Zustand worked well for this project, I’m curious if there are best practices I might have missed—particularly for organizing more complex state logic like modal handling, cart quantity updates, and product caching.

Additionally, any insights into optimizing performance (e.g., reducing unnecessary re-renders or enhancing accessibility) would be valuable. I tried to implement good UI/UX practices such as keyboard navigation and proper focus management, but I’d love a deeper review to ensure it meets accessibility standards.

Finally, I'd welcome suggestions on code organization for larger projects—especially how to keep components clean, modular, and scalable as functionality increases.