EarnFlo
Why I Built It
Most salary calculators reduce income to a flat monthly number. EarnFlo treats salary as something moving through time: what the current month has earned, what one work hour is worth, how much today at work has produced, and how expensive a target purchase feels in working hours.
The app is intentionally local-first. Salary, currency, language, theme, region, and work rhythm stay in the browser, so the user can experiment without creating an account or sending personal pay data to a backend.
Product Tour
The main dashboard starts with a live counter for the active month, plus quick context for the selected month, detected holidays, effective workdays, and whether the user is currently inside a work shift.
View
The control panel lets users tune the salary amount, pay period, currency, holiday calendar, working days, daily hours, shift start, and extra days off. Changes apply immediately and are persisted locally.
View
The widgets turn the same salary into practical views: per work hour, per week, while sleeping, per active second, today at work, one paid day off, quarter, half-year, and annual income.
View
The calendar view anchors the math to the current month. Workdays, weekends, public holidays, today, scheduled hours, and per-day earned values are shown together instead of hidden behind one final number.
View
Currency Conversion
EarnFlo supports UZS, USD, RUB, EUR, and GBP. The conversion panel reads live Central Bank of Uzbekistan rates, shows the same salary in other currencies, and can push a converted value back into the dashboard.
View
The converter is separate from the salary model. If live rates are unavailable, the dashboard still works with the selected salary and shows a stale-rate warning instead of blocking the whole experience.
Calculation Model
The core idea is simple: normalize every pay period into an annual number, then derive the month and work-time views from that baseline.
const annualSalary = {
hourly: salary * workDaysPerWeek * workHoursPerDay * 52,
weekly: salary * 52,
monthly: salary * 12,
yearly: salary,
}[payPeriod];
const monthlySalary = annualSalary / 12;
From there, EarnFlo compares calendar time with active work time. Calendar-second values power the live month counter and sleep-time income. Active-work-second values power the workday and hourly widgets.
const scheduledHours = effectiveWorkdays * workHoursPerDay;
const workHourValue = monthlySalary / scheduledHours;
const activeSecondValue = monthlySalary / (scheduledHours * 3600);
Holiday calendars for Uzbekistan, the United States, and Russia are applied before effective workdays are calculated. Extra days off cover local company shutdowns or exceptions that a public calendar cannot know.
Visual System
The interface uses a custom CSS visual layer instead of a component framework. The 3D money element, glowing dashboard cards, and light/dark themes are tuned specifically for the product instead of reused from a generic template.
View
View
Product Flow
View
- The user configures salary, region, currency, work rhythm, language, and theme.
- The browser restores and stores settings locally under the
earnflo-settingskey. - Live CBU rates refresh in the background and can update the selected salary value.
- The calculation layer combines salary, calendar, holidays, and work hours into dashboard-ready metrics.
- The UI renders live counters, salary widgets, affordability checks, and the current month calendar.
Shipping and Operations
EarnFlo is a static React 19 and Vite 7 app. GitHub Actions installs dependencies, builds the production bundle, and syncs the generated files to the VPS. Nginx serves the site without a runtime server process.
Analytics are lightweight but useful: Google Analytics 4 and Yandex Metrica track page views, settings changes, and outbound support/profile clicks. The product remains usable even if analytics or exchange-rate requests fail.
Current Status
The public app is live at earnflo.jzr.uz. The current version includes salary normalization, live month counters, CBU currency conversion, multilingual copy, persisted settings, affordability checks, and calendar-aware month modeling.
The next useful expansion would be broader country presets: more holiday calendars, local default work rhythms, and salary assumptions that match additional markets.
