EarnFlo

Why I Built It

• Most salary calculators stop at a flat monthly number. I wanted a tool that shows how pay moves across the active month and working day.
• The app needed to stay frontend-only so it could deploy as a static site and keep personal settings in the browser instead of behind an account system.
• I also wanted it to adapt to different pay periods, currencies, work rhythms, and regional holiday calendars without making the interface feel heavy.

What It Does

• Normalizes hourly, weekly, monthly, and yearly salary inputs into a single annual baseline before deriving the active month.
• Recomputes the month using configured workdays per week, hours per day, shift start, regional public holidays, and manual extra days off.
• Renders live widgets for earned this month, per work hour, per week, while sleeping, per active second, today at work, one paid day off, quarter, half-year, and annual income.
• Supports three languages (EN, RU, UZ) and five built-in currencies: UZS, USD, RUB, EUR, and GBP.

Calculation Flow

1. ControlsPanel collects salary amount, pay period, currency, holiday region, workdays, work hours, start hour, and extra days off.
2. App.jsx clamps those values, persists them under the earnflo-settings key, and recomputes whenever the user changes an input.
3. calculateMetrics converts the configured salary into an annual baseline, derives the current month, overlays holiday dates for Uzbekistan, the United States, or Russia, and builds a day-by-day timeline.
4. The dashboard maps that calculation layer into a hero counter, nine stat cards, and a month snapshot showing workdays, weekends, public holidays, and the current day.
5. A requestAnimationFrame loop keeps the live month counter and workday value moving without any backend runtime.

Frontend Decisions

• The entire experience is frontend-only, so deployment stays cheap and resilient while user settings remain local to the browser.
• I split the UI into focused surfaces: HeroSection, ControlsPanel, StatsPanel, and MonthPanel. That keeps the dashboard easier to evolve than a single oversized component.
• The calculation layer is isolated in src/app/calculations.js, which keeps the salary math separate from presentation and makes the interface components mostly declarative.
• Copy lives in config.js, so English, Russian, and Uzbek all ride on the same product logic and structure.
• Styling stays in plain CSS instead of a component framework to keep the dashboard visually specific rather than template-shaped.

Shipping and Operations

• EarnFlo is built with React 19 and Vite 7.
• The app ships as a static bundle. GitHub Actions builds dist/, uploads it to the VPS, and Nginx serves the current release from a stable symlink.
• Because there is no runtime API, the live site stays fast to deploy and inexpensive to host while still feeling dynamic in the browser.

Current Status

• The public app is live at https://earnflo.jzr.uz.
• Recent March 2026 changes split the dashboard into clearer sections and refined the light theme surfaces.
• The most obvious next expansion would be broader regional calendars and more country-specific salary assumptions if the tool grows beyond the current three regions.