Tip Calculator App Built with React, Zustand & Tailwind

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

One of the highlights of this project was utilizing Zustand for state management. Compared to Redux and React's Context API, I found it simpler, more intuitive, and easier to work with.

Additionally, working with Jest and a TDD approach (Red-Green-Refactor) was insightful—even for a simple function, it demonstrated how test-driven development helps in handling edge cases effectively.

I also enjoyed using ShadCN. It accelerated development, provided complete access to the source code, and offered a solid set of UI components. However, for simpler components like buttons and inputs, it felt a bit unnecessary, with too many extra class names. I’d prefer to use it in more complex components like carousels or accordions.

For my next project, I’ll focus more on accessibility improvements and exploring Next.js, ensuring the app is both performant and user-friendly.

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

One of the biggest challenges was modifying ShadCN’s default UI. The extensive predefined classes made customization harder than expected. Additionally, its theme system felt overwhelming, automatically defining colors that I didn't prefer, leading me to remove the default theme entirely.

This experience made me question whether ShadCN was the best choice for this particular project. However, as an exercise, it was valuable in understanding its strengths and limitations. Moving forward, I’ll use ShadCN selectively, reserving it for more complex components instead of basic ones.

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

I’m open to any suggestions regarding architecture, best practices, UI improvements, or optimization.