OppCost
OppCost is a web app that helps users make better financial decisions by comparing the long-term cost of different scenarios — whether it's choosing between job offers, subscription plans, or recurring expenses. It’s built with Next.js and React, with interactive visualizations that show how costs play out over time.
📚 Use Cases
The idea for OppCost came from a personal need: comparing job offers with different salaries, benefits, and cost-of-living tradeoffs. But the tool is designed to work for a variety of cost-based decisions, including:
- Job A vs. Job B (salary, benefits, remote vs. commute)
- Rent vs. Buy
- Freelancer vs. Full-time
- Annual vs. Monthly subscriptions
- Car ownership vs. ride-hailing
Users can model any scenario with a combination of fixed costs, recurring costs, durations, and assumptions — and instantly visualize the long-term impact.
🧱 Stack & Architecture
OppCost is currently built with:
- Next.js for routing and SSR
- React for UI logic
- Zustand for app-wide state management
- ECharts for interactive cost breakdowns
- Prisma + Neon for data storage
- Authentication via NextAuth
Data is persisted in a Neon-hosted Postgres database via Prisma, with user sessions tied to saved comparisons. However, I’m currently exploring a simpler offline-first direction — removing online features and auth to reduce complexity and friction.
🎨 UI & Refactor Plans
OppCost originally used Ant Design, but I plan on migrating to shadcn/ui for:
- More accessible, unstyled primitives
- Easier integration with Tailwind CSS
- Better control over theming and dark mode
This move also aligns it more closely with my design stack in other projects like FinApp and raynold.dev.
📊 Visualizations
The core of OppCost is its timeline-based comparison chart:
- 📈 Cumulative costs of each scenario over time
- 🔁 Recurring vs. one-time breakdowns
- 📅 Adjustable durations, inflation, or one-off costs
Charts update in real time as the user tweaks values, helping them explore "what-if" scenarios fluidly and visually.
🚀 Deployment
OppCost is deployed on Vercel, with:
- CI/CD and preview deployments
- Edge performance and auto-scaling
- Environments for development and production
The live demo is available at oppcost.raynold.dev
✅ Outcome & Next Steps
OppCost is a focused tool for thinking long-term about financial decisions. It’s especially helpful when comparing tradeoffs that don’t feel obvious on a monthly basis, but add up significantly over time.
I'm currently experimenting with:
- Simplifying the architecture by removing authentication and online storage
- Polishing the UX with shadcn/ui and better form handling
- Offline-first mode with client-side persistence only
The goal is to make OppCost feel fast, approachable, and useful even for quick, one-time comparisons — no signup or backend required.