Responsive mortgage repayment calculator with React and typescript

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

Proud Of: Comma Formatting: Nailed input formatting with Intl.NumberFormat for commas (e.g., 1,000,000), keeping raw numbers in Zustand.

const formatDisplayValue = (value: number, allowDecimals: boolean = false) => {
  if (value === 0) return '';
  return allowDecimals ? value.toString() : numberFormatter.format(value);
};

Do Differently:

• Real-Time Validation: Add instant feedback on input changes, not just on submit.

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

Challenges and Solutions:

• Comma-Formatted Inputs: Challenge: Displaying commas (e.g., 1,000,000) while storing raw numbers required syncing UI and state.

Solution: Used Intl.NumberFormat for display, parsed inputs with replace(/,/g, '') for the store.

const handleNumberChange = (e, setter) => {
  const rawValue = e.target.value.replace(/,/g, '');
  setter(Number(rawValue) || 0);
};

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

I’d appreciate community feedback on Real-Time Validation: How can I efficiently implement instant input validation (e.g., check amount > 0 as users type) without performance issues?

const handleNumberChange = (e, setter, field) => {
  const rawValue = e.target.value.replace(/,/g, '');
  const numValue = Number(rawValue) || 0;
  setter(numValue);
  setErrors((prev) => ({ ...prev, [field]: numValue <= 0 }));
};