Overpay Calculator Plugin

Custom Mortgage Overpay Calculator plugin built for WordPress websites.

Tech stack

• Typescript
• React (frontend UI)
• Tailwind CSS (styling)
• GSAP (simple animations)
• A bit of PHP (WordPress plugin glue / asset enqueueing)

Features

The calculator supports mortgage overpayment simulations with these inputs and behaviors:

• Loan Amount (pl. Kwota kredytu) — principal amount
• Nominal Interest Rate (pl. Oprocentowanie nominalne) — annual nominal %
• Repayment Period (pl. Okres spłaty) — months input for schedule
• Installment Type (pl. Rodzaj spłacanych rat) — equal vs declining installments
• Overpayment Effect (pl. Skutek nadpłaty) — reduce monthly payment or shorten term
• Overpayment Type (pl. Rodzaj nadpłaty) — one-time or recurring
• Overpayment Amount (pl. Kwota nadpłaty kredytu) — amount of extra payment to apply

Extra UX niceties included:

• Detailed schedule view (per-month rows)
• Inline editing of one-time extras in schedule + hint/toast to apply changes
• Smooth entry animations using GSAP

Instal dependencies

# go to the front-end folder
cd front-end

# install dependencies
npm i

Run locally (development)

To start the app in a local/test environment:

# go to the front-end folder
cd front-end

# run dev server
npm run dev

Open the dev server URL printed by your tooling and test the calculator UI. Usually it is localhost:5173 if you use vite.

Build & package as a WordPress plugin

To produce a distributable plugin ZIP that can be uploaded to a WordPress site, follow these steps:

1. Build production assets in the front-end:

   # go to front-end folder
   cd front-end
   
   # build project
   npm run build

   This should produce dist/ directory
2. Prepare the plugin package:
   • In the front-end directory remove source files you don't want in the final plgin, keeping only the dist/ folder that contains built assets
   • Ensure that WordPress PHP plugin file OverpayCalculator.php is present in the package root folder
3. Zip the plugin directory
4. Upload the produces ZIP to WordpPress: admin → Plugins → Add New → Upload Plugin.

Suggested project structure

/ (repo root)
├─ front-end/
│  ├─ src/
│  ├─ dist/
│  └─ package.json
├─ OverpayCalculator.php
└─ README.md