Loading page
by tarunkorat
TypeScript frontend for a 6-step freelance rate calculator built with React, Vite, and Tailwind CSS. Features animated step progression, expense tracking across 11 categories, tax/VAT configuration, work schedule inputs, and profit margin calculations with customizable rounding options. Includes error handling, form validation, and PDF export capabilities via html2canvas and jsPDF. Licensed under Tetrees License.
Monthly Expenses Breakdown is a comprehensive Freelance Rate Calculator built with React and TypeScript. It guides users through a 6-step wizard to calculate their ideal hourly billing rate based on location, monthly expenses, taxes, work style, profit margins, and rounding preferences. The app generates detailed results with breakdowns, charts, and export capabilities (PDF/PNG).
6-Step Wizard Interface
Results Dashboard
Smart Form Handling
Responsive Design
Export Capabilities
Spin up an isolated sandbox and run it server-side — no local setup.
Push this product straight into your AI IDE, web builder or cloud IDE.
Connect Tetrees to a compatible AI IDE, list products you own, and request the verified ZIP without exposing seller upload controls.
No reviews yet.
Sign in to join the discussion
Loading discussion…
npm install
npm run dev
Starts Vite dev server at http://localhost:5173
npm run build
Generates optimized production bundle in dist/
npm run preview
Serves production build locally
npm run typecheck # TypeScript validation
npm run lint # ESLint check
npm run lint:fix # Auto-fix linting issues
src/App.tsx — Main app component with step management and form statesrc/components/steps/ — Individual step components (Step1-Step6)src/components/results/ — Results page with calculations and exportssrc/main.tsx — React entry pointindex.html — HTML template with loading screen and error handlingFormData Interface — Centralized state management for:
Update Function — Safely sanitizes numeric inputs, preventing NaN/Infinity propagation
Navigation — Step-based flow with AnimatePresence for smooth transitions
Modern browsers with ES2020+ support. Requires JavaScript enabled.
Tetrees License
The sandbox audition completed and the detected runnable path passed.
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.
Deterministic AVCP artifact review
Pipeline avcp-2026-08-04.1 · SHA-256 8c90064f297e070b…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
Reviewed Aug 7, 2026
The full install guide and integration prompts unlock after purchase.
Automation, Utilities & Developer Tools
Free
