First Salary

• 

  Landing page

Inspiration

The statistics are jarring: 41% of new grads say they don’t understand their benefits package, and 100% are shocked by their first net pay. The gap between an $85,000 offer letter and a $4,900 monthly deposit is rarely explained by HR or banks. I built First Salary to be the tool that should have existed on Day 1 of every first job- a bridge between "paper wealth" and "wallet reality."

What it does

First Salary transforms the "paycheck shock" into a guided financial roadmap. It features:

• The Salary Story: A step-by-step "waterfall" animation showing gross salary dropping through taxes, FICA, and premiums.
• Benefit Babel Fish: An AI panel that translates opaque insurance and 401k jargon into plain English.
• The Guilt-Free Card: Automatic issuance of a virtual card (via Airwallex) with a spending limit capped at 30% of net pay, isolated from rent and savings.

How we built it

The project is a 6-step linear flow (Login → Payroll Sync → Salary Story → AI Optimizer → Budget Blueprint → Virtual Card, and a Dashboard as the main page).

• Frontend: Built with Next.js 15 (App Router), styled with Tailwind CSS and shadcn/ui, and animated with Framer Motion to handle the emotional weight of the data transitions.
• Intelligence: I used Claude 3.5 Sonnet via the AI SDK v6. It operates in two modes: a translation layer for jargon and an agentic "nudge" that identifies uncaptured 401k matches.
• Fintech Stack: I integrated Plaid for simulated payroll syncing and Airwallex for sandbox virtual card issuance.

Challenges we ran into

• Emotional Sequencing: The hardest part wasn't the code; it was the UX. You have to show the "bad news" (taxes) before the "good news" (reclaimed money). If you get the order wrong, the product feels punishing rather than empowering.
• The Privacy Wall: Since the model is B2B2C, I had to design a hard structural boundary. Personal data never leaves the browser, while only aggregated insights reach the HR dashboard.
• Technical Migration: Moving to AI SDK v6 mid-hackathon was a hurdle, as the streaming models and message types are completely different from previous versions.

Accomplishments that we're proud of

I’m proud of creating a high-fidelity "waterfall" animation that accurately calculates complex net pay logic. Managing to maintain scope discipline during a 22-hour build was also a win, cutting every feature that didn't serve the core 3-minute demo flow.

What we learned

I learned that React Context and localStorage can desync in subtle ways during rapid "demo resets," requiring a custom two-layer reset pattern. More importantly, I learned that in fintech, clarity is the most valuable feature you can ship.

What's next for First Salary

The next step is moving beyond the sandbox to live API integrations. I want to build out a "Pre-tax Optimizer" that runs Monte Carlo simulations to show users how shifting their 401k contributions today impacts their retirement age and tax liability 30 years from now.

Built With

• airwallex
• claude-4.6-sonnet
• framer
• lucide
• next.js
• plaid
• shadcn/ui
• tailwind
• typescript
• vercel