Browser Extensions Manager UI with React, Zustand, and Framer Motion

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

Most Proud Of:

I'm really proud of how smooth and fast the Zustand store implementation has turned out. It was my first time working with Zustand, and I managed to create an efficient, scalable store for managing the state of the extensions and their filters. The UI animations using Framer Motion are also something I’m particularly proud of — the transitions between active and inactive extensions make the app feel more polished and professional.

Another thing I’m proud of is the ability to dynamically toggle extensions and filter them based on their active or inactive state, providing a smooth user experience. The responsive design that adjusts to different screen sizes and the dark/light mode feature were also key components that came out well. What challenges did you encounter, and how did you overcome them?

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

What I Would Do Differently Next Time:

• Modularize the store more: As the app grows, splitting the store into smaller, more manageable pieces might be beneficial. I’d like to see how splitting concerns between state slices (extensions, user preferences, themes) could improve performance.
• Accessibility: While I’ve made efforts to improve accessibility, I think I could further enhance it by adding proper ARIA roles and testing accessibility across different screen readers and devices.
• Better testing: I'd like to add more tests, particularly unit tests and integration tests for key components like FilterButtons, Extension, and state management to ensure reliability across updates.