Mortgage Calculator App using React, TypeScript and Tailwind CSS

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

I’m most proud of how I was able to combine functionality with accessibility in this project. Ensuring that the mortgage calculator is not only usable but also accessible to a wide range of users, including those relying on screen readers, was a key focus for me. I’m also pleased with how I implemented the custom form validation logic to ensure that all input values are meaningful and correct before proceeding with calculations. This was a significant learning experience, especially in terms of improving my understanding of React hooks and how to structure reusable validation logic.

If I were to approach this project again, I would definitely integrate testing earlier in the process. I recognize the value of unit and integration testing to ensure reliability, especially for the critical features like form validation and mortgage calculations. Writing tests for these would give me greater confidence in the functionality as I continue to develop the app.

I would also improve the styling approach by incorporating a more structured design system. While I was able to implement responsive styles, using a design system or component library would help ensure more consistency and scalability across larger projects.

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

Form Validation Logic

One of the initial challenges was ensuring that the form validation was both thorough and user-friendly. I needed to check multiple conditions, such as ensuring the mortgage amount did not exceed a certain value and that the mortgage term and interest rate were within specified limits. Initially, I struggled with structuring the validation logic in a clean and reusable way. To overcome this, I created a custom hook to centralize the validation logic, which not only made it more organized but also easier to manage and extend in the future. This experience helped me deepen my understanding of React hooks and how to create reusable logic for form handling.

Ensuring Accessibility

Another challenge was ensuring that the app was accessible to users with disabilities, particularly screen reader users. I studied ARIA guidelines and implemented aria-live regions to announce updated values dynamically. I also made the executive decision to implement some design changes in the name of accessibility like more meaningful error messages and having a default option for the type radios selected (to me the design looked like radio buttons and I feel it should behave like radio buttons where one is selected by default).

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

Testing Approach:

I’d love to get feedback on the testing approach others would have taken for this app. Would you recommend focusing on unit tests, E2E testing, or a combination of both? Any specific tools or strategies you’d suggest for testing React components effectively?

Accessibility Enhancements:

Do you have any recommendations for improving accessibility further, particularly around form validation and dynamic content updates for screen readers?