YM / PortfolioSalary calculator

Case study / Application delivery

Egypt Salary Calculator.

An Arabic-first React application that makes salary estimates easier to inspect, with 80 verified tests and static delivery through GitHub Pages.

Status: 80 tests passing; deployed to GitHub PagesRole: Design, application & deliveryReviewed: 9 Sep 2026
View code Open demo Pages deployment

01 / Problem

Make the calculation understandable.

Salary conversion is often presented as one unexplained number. This project exposes the implemented tax, insurance and deduction components in an Arabic right-to-left interface, with gross-to-net and net-to-gross modes and monthly or annual periods.

The delivery task is equally concrete: build the TypeScript application at its project path, run the sensitive calculations and interface checks, and publish only the resulting static bundle through GitHub Pages.

Live Arabic Egypt Salary Calculator showing salary inputs, an itemized EGP result and the dated USD conversion in dark mode.
Production release captured on 9 September 2026. The core EGP salary engine works without the optional reference-rate service.

02 / Architecture

Local calculations. Static delivery. Reference rates.

GitHub Actions validates and builds the React application, uploads the dist directory as a Pages artifact and deploys it to the project site. Salary calculations run locally in the browser, which fetches a dated USD/EGP rate directly from Frankfurter. A separately hosted .NET adapter can be selected explicitly but is not required by Pages.
The Pages bundle sends no salary values to a server. A fixed browser request fetches the USD/EGP reference rate; source and rate date stay visible beside the conversion. Select the diagram for a scalable view.

Client

React + TypeScript

Vite builds for the /egypt-salary-calculator/ project path. A pure domain module calculates locally and uses bounded binary search for net-to-gross estimates.

Delivery

GitHub Pages artifact

The workflow runs the tests and build, uploads dist/, then uses Pages deployment permissions and a short-lived OIDC token. No Azure deployment credential is required.

Reference rate

Direct browser request

Frankfurter supplies the dated USD/EGP reference rate through its public API. The client validates the currency pair, positive rate and date, and limits requests to eight seconds. The optional .NET adapter remains separate.

03 / Implementation

Keep policy rules apart from interface state.

The domain module contains progressive brackets, exemptions, insurance limits, period conversion and a documented rules effective date. The React layer handles validation, display, theme persistence and the optional exchange-rate state.

Delivery path

push to main
  → locked dependency install
  → tests → lint → production build
  → GitHub Pages artifact from dist/
  → deploy-pages with short-lived OIDC
  → /egypt-salary-calculator/

independent CI → tests + lint + build

The deployment job receives only pages: write and id-token: write. GitHub issues the short-lived deployment identity; the repository stores no cloud credential for Pages.

04 / Decisions & trade-offs

Accuracy needs explicit limits.

  • Pure calculation module: deterministic rules are easy to test and stay independent of the network, though law changes still require human review and updates.
  • Binary-search gross-up: a bounded search is simpler and safer across bracket boundaries than maintaining a fragile inverse for every rule combination.
  • Static Pages delivery: the calculator needs no application server for its core function, so Pages reduces the active cloud surface. It cannot run the repository's .NET Function.
  • Optional external rate: the Pages client calls Frankfurter directly by default, avoiding a separate server. Provider availability still matters; a failed request leaves EGP results intact and offers a retry. The displayed conversion uses a dated reference rate, not a bank quote.
  • Historical Azure path: the August 2026 App Service run remains useful deployment evidence, but it does not describe the current hosting target.
The calculator provides educational estimates. Actual payroll can differ because of allowances, bonuses, exemptions and regulatory changes.

05 / Validation

Dated evidence, with scope attached.

  • 80 calculation, interface and rate-service tests passedThe deployed source passed on 9 September 2026: 48 domain tests, 11 interface tests and 21 rate-service tests across three files.npm test · passed
  • Lint and production build passedThe deployed source completed Oxlint and the Vite production build in GitHub Actions.npm run lint · npm run build
  • GitHub Pages deployment succeededRun 34402180941 deployed commit 848273a on 9 September 2026 after tests, lint and the production build passed.Open successful Pages run ↗
  • Historical App Service deployment succeededGitHub Actions run 31909528455 completed successfully on 15 August 2026 at commit 1241689.Open dated workflow run ↗
  • Live calculator verified on 9 September 2026Desktop and mobile checks confirmed EGP 10,000 gross produces EGP 8,302.50 net. At the returned 9 September rate of 51.115 EGP per USD, the interface displayed approximately USD 162.43, with no browser errors or horizontal overflow.Dated public verification; no continuous availability claim

06 / Current status

Deployed to GitHub Pages; verified 9 September 2026.

The React application passed its 80-test suite, lint and production build before deployment. The live calculator passed desktop and mobile checks on 9 September 2026. The Azure App Service run is historical only. The static client fetches the USD/EGP rate directly, displays its source and date, and converts the selected EGP result locally. The optional .NET Function remains unhosted. An exchange-rate outage leaves the EGP result available and exposes a retry action.

07 / What I learned

Delivery evidence is stronger when failure states stay visible.

Separating the calculation from network calls made the application more resilient and the tests more meaningful. Moving the default rate lookup into the browser removed the retired Azure adapter as a dependency of static hosting. The pipeline reinforced the difference between a successful deployment event and ongoing service health. It also showed why infrastructure and rollback need first-class source control beside application delivery.

Where would you like to go?