How I built a set of free salary calculators with React, Vite and TypeScript

#react #vite #typescript #webdev

I recently built SalaryPayTools, a small site of free US pay calculators. Here is a short write-up of how it is put together and what I learned.

What it does

There are 14 calculators: hourly to salary and salary to hourly, annual income, weekly, biweekly and monthly pay, part-time pay, overtime, pay raise, a basic 2026 federal income tax estimate, and 2026 take-home pay for four states (Texas, Arkansas, Illinois and North Carolina). They are free and need no signup.

The stack

React + Vite + TypeScript. Vite keeps the dev loop fast, and TypeScript helps because many pay-calculator bugs are unit mix-ups: hourly vs. annual, weekly vs. biweekly, a percentage stored as 5 instead of 0.05.

Keep the math in plain functions

The calculators are mostly forms on top of small, pure functions. A simplified sketch of the idea (not the site's exact code):

type HourlyInput = {
  rate: number;
  hoursPerWeek: number;
  weeksPerYear: number;
  overtimeHours: number;
  overtimeMultiplier: number; // 1.5 for time-and-a-half
};

export function annualGross(i: HourlyInput): number {
  const weekly =
    i.rate * i.hoursPerWeek +
    i.rate * i.overtimeHours * i.overtimeMultiplier;
  return weekly * i.weeksPerYear;
}

Functions like this are easy to test with known answers before any UI exists. For example, $20 an hour × 40 hours × 52 weeks should always give $41,600.

Show the formula next to the answer

Every result on the site shows how it was calculated, e.g. ($20.00 × 40) × 52 paid weeks. A number you can't check is hard to trust, so the formula is always right there.

One page per calculator

Each calculator has its own URL and its own HTML page with the content already in it, so the page isn't empty before JavaScript loads. That helps both search engines and slow phones.

Be clear about scope

The federal tax tool is a basic estimate, and take-home pay is only for the four states above. I'd rather say that plainly than pretend to cover everything.

If you want to try it or check my math: salarypaytools.com. Feedback is welcome.

DEV Community