Monthly Expenses Breakdown

Setup & Usage

Installation

npm install

Development

npm run dev

Starts Vite dev server at http://localhost:5173

Build

npm run build

Generates optimized production bundle in dist/

Preview

npm run preview

Serves production build locally

Code Quality

npm run typecheck    # TypeScript validation
npm run lint         # ESLint check
npm run lint:fix     # Auto-fix linting issues

Project Structure

• src/App.tsx — Main app component with step management and form state
• src/components/steps/ — Individual step components (Step1-Step6)
• src/components/results/ — Results page with calculations and exports
• src/main.tsx — React entry point
• index.html — HTML template with loading screen and error handling

Key Components

FormData Interface — Centralized state management for:

• Location (country, currency, symbol)
• 11 expense categories (rent, internet, software, health insurance, food, transport, entertainment, miscellaneous, tools, learning, marketing)
• Tax configuration (rate, VAT, custom flag)
• Work parameters (billable hours/week, weeks off/year, unpaid work buffer)
• Profit settings (margin %, emergency fund months)
• Rounding strategy (none, nearest 5/10/25/50/100)

Update Function — Safely sanitizes numeric inputs, preventing NaN/Infinity propagation

Navigation — Step-based flow with AnimatePresence for smooth transitions

Browser Support

Modern browsers with ES2020+ support. Requires JavaScript enabled.

License

Tetrees License

This React web app completed archive review with strong static results. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.3 and security 9.