Get started with MyPayCheckCal to model your next paycheck

Setting up MyPayCheckCal locally takes only a few minutes. Follow the guide below to install dependencies, run the development server, and tailor a calculator to your needs.

1. Install dependencies

npm install
npm run dev

Astro serves the site at http://localhost:4321. Any change inside src/ hot-reloads instantly.

2. Explore the calculator islands

Open src/components/calculators. Each file exports a React component that handles inputs, validation, and paycheck math for a specific scenario. The shared hooks in src/components/calculators/hooks/ provide helpers for:

• Converting between hourly, weekly, and annual pay.
• Applying federal, FICA, and state withholding tables.
• Managing dynamic deduction fields such as retirement and health contributions.

3. Create your own variation

Need to model a specialized bonus or state credit? Duplicate the calculator that’s closest to your use case and update the configuration:

1. Copy an existing island and rename it—for example, SpecialBonusCalculatorIsland.tsx.
2. Define additional inputs or default values.
3. Extend the reducer that calculates totals so your adjustments appear in the results table.
4. Create a new page under src/pages that imports your island and registers the route.

4. Validate the math

Before deploying, run the automated checks:

npm run lint
npm run test
npm run build

The output will confirm TypeScript types, React linting, and production build success. You can also run targeted calculator unit tests inside src/tests/ to validate edge cases such as overtime thresholds or supplemental wage withholding.

5. Share the results

Use npm run preview to serve the production build locally. Invite stakeholders to enter sample data and verify the output. Once everyone signs off, deploy the build folder to your hosting provider of choice.

MyPayCheckCal helps you communicate pay decisions transparently. With a local environment ready to go, you can iterate quickly and keep every paycheck accurate.