Career Salary Compounder

Development Commands

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

How to Use

1. Create career paths — click "+ Add Path" to add up to 5 paths; configure starting salary, annual raise %, and color
2. Add career events — within each path card, insert job switches, promotions, layoffs, or freelance periods with custom salary adjustments
3. Adjust global settings — set projection horizon (years), inflation rate, currency, and start year
4. View projections — switch between Chart (salary curves), Timeline (event track), and Stats (summary & comparison) tabs
5. Toggle inflation — switch between real (inflation-adjusted) and nominal salary views
6. Consult AI — click "🤖 AI Consultant" to open the chat panel; the Flan-T5 model loads once (~30s on first use, then cached in browser)
7. Export results — use the Export PDF button to download your analysis

Project Structure

src/
├── ai/
│   └── careerConsultant.ts       # On-device AI via @xenova/transformers
├── components/
│   ├── chat/                     # ChatPanel, AIStatus, message UI
│   ├── charts/                   # SalaryChart, LifetimeEarningsBar
│   ├── paths/                    # CareerPathCard, AddPathButton, JobSwitchEvent
│   ├── settings/                 # GlobalSettingsPanel
│   ├── stats/                    # SummaryStats, ComparisonTable
│   ├── timeline/                 # CareerTimeline, TimelineTrack, TimelineEvent
│   └── ui/                       # Badge, Button, Input, Select, Slider, Modal, Tooltip, Toast, ColorPicker
├── data/
│   └── inflationRates.ts         # Historical US inflation data
├── hooks/
│   ├── useChat.ts                # AI chat state & message history
│   ├── useInflation.ts           # Inflation rate lookup & toggle
│   ├── useLeaderboard.ts         # Local leaderboard via localStorage
│   └── useSalaryProjection.ts    # Core projection computation
├── utils/
│   ├── calculateProjection.ts    # Year-by-year salary math
│   ├── exportPDF.ts              # jsPDF export helper
│   ├── formatCurrency.ts         # Locale-aware currency formatting
│   └── stateEncoding.ts          # URL-safe state serialization
├── types.ts                      # Shared TypeScript interfaces
├── App.tsx                       # Root component & layout
└── main.tsx                      # React DOM entry point

Key Hooks

• useSalaryProjection — computes year-by-year salary projections for all paths based on events and settings
• useInflation — manages inflation toggle and applies historical inflation rates to projections
• useChat — manages AI chat state, message history, and Flan-T5 model initialization
• useLeaderboard — stores and retrieves user projections from localStorage

Notes

• AI Model Caching — The Flan-T5 model (~80 MB) is downloaded from Hugging Face on first use and cached in the browser via the Cache API. Subsequent loads are instant.
• No Backend Required — All data stays local in the browser; no server, no account, no data transmission.
• Inflation Data — Uses historical US inflation rates; projections can be toggled between real and nominal values.
• TypeScript — Fully typed codebase with strict type checking 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.5 and security 9. Final verified scores after isolated runtime evidence: overall 8.5 and security 9. Final verified scores after isolated runtime evidence: overall 8.8 and security 9.