Body Mass Index calculator built with React, Next.js and Vitest

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

I’m most proud of successfully integrating server components and creating a custom VisuallyHidden component, which improved the accessibility of the project. These were new challenges for me, and I’m thrilled with how they turned out. Additionally, I managed to streamline my CSS using properties like row-gap, which made my code cleaner and more efficient.

If I were to approach this project again, I would invest more time in refining the testing process. Although I implemented tests with Vitest, I believe there’s room for deeper test coverage and more rigorous testing strategies.

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

One of the key challenges I faced was working with custom-styled form elements, particularly the radio buttons and input elements. Styling these elements to match the design while maintaining accessibility required some intricate CSS work. I overcame this by researching and applying techniques from reputable sources.

Another challenge was integrating server components in Next.js, which was somewhat new to me. I addressed this by dedicating time to understanding the underlying concepts and experimenting with different approaches until I achieved the desired result. This hands-on problem-solving approach not only resolved the issues but also deepened my understanding of these technologies.

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

I would appreciate feedback on a few specific areas:

1. Accessibility: While I’ve implemented a VisuallyHidden component and followed best practices, I’m eager to know if there are any overlooked aspects of accessibility that could be improved, especially in more complex use cases.

2. Testing Strategy: I’ve started using Vitest for testing, but I’m interested in learning more about how I can expand my test coverage and improve the effectiveness of my tests. Any advice on advanced testing techniques or best practices would be highly valuable.

3. CSS Optimization: I’ve made some strides in optimizing my CSS, but I’m open to suggestions on how to further refine it, particularly in terms of maintainability and scalability for larger projects.

Feedback in these areas would help me continue to grow and ensure my future projects are even more polished.