Mortgage Repayment Calculator using React - Typescript - Tailwindcss

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

What I'm most proud of is recognising my limits during this project — and not experiencing them as failure, but as a meaningful signal worth acting on.

At one point I hit a complete blank wall trying to implement the useMortgageCalculator hook. I couldn't figure out where to start. Instead of pushing through blindly, I turned that moment into a new pedagogical rule: before writing any function, write in plain language what goes in, what happens to it, and what comes out — no code until all three are clear. It helped immediately, and it's a method I'll carry into every project going forward.

The other part I genuinely enjoyed was the last phase — edge cases and UX details. I love stepping into the user's shoes and thinking through what behaviour I'd want (or not want) to encounter. Filtering input characters, showing hints only on focus, clearing errors field by field on change, blocking values beyond a maximum — going through all of that by hand was a real learning experience.

What I'd do differently: use a form library like React Hook Form next time. Building validation and input control manually was worth it once to understand the underlying mechanics. But for anything beyond a learning exercise, a library handles all of this more robustly and in a fraction of the time.

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

The biggest challenge was the calculation function itself — specifically, breaking out of the "big picture" view and decomposing it into small, sequential, independent steps.

I genuinely struggled to know where to begin. I ended up using AI to help me understand the structure — not to write the code, but to walk me through the logic until I could see the steps clearly. That process is actually what led to the method I described in question 1: pseudo-code in plain language before any syntax.

The second challenge was Tailwind v4's relational variants — peer-*, group-*, has-*, and the in-* prefix. The directional distinction between focus-within: (does a descendant have focus?) and in-focus-within: (does an ancestor have focus?) is easy to get backwards, and getting it wrong produces no visible error — just silently broken styles. Working through real failing examples until the mental model clicked was the only fix.

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

Any comments, any likes, anything from people who take the time — thank you in advance. It genuinely means a lot.

If you do leave feedback, I'm particularly curious about:

• Accessibility — did I cover the right bases with aria-describedby, aria-live, and keyboard navigation? Anything missing or implemented incorrectly?
• Custom hook design — does the useMortgageCalculator interface feel clean to you? Would you have structured the return differently?
• Input handling — I built filtering and validation by hand rather than using a library. Does the implementation feel solid, or are there edge cases I missed?