Clarity before you commit.

CarNance

See your financial future before you drive into it.

Inspiration

Buying a car shouldn’t require 20 tabs, a spreadsheet, and guesswork. Specs are scattered, prices change, and it’s hard to see how a car will actually affect your budget, credit, and long-term costs. Most tools stop at listings or monthly payments. CarNance takes in user information and turns that into high-level predictions that help you choose a car based on your financial goals and financial condition. CarNance predicts the user's financial future with the car they are going to buy.

What it does

Gathers your high-level preferences and finances (budget, miles/day, region, usage, risk tolerance)
Screens eligibility instantly and explains why if you’re not ready, with actionable next steps
Recommends diverse Toyota models that fit your budget and lifestyle
Shows a results view with reasons, specs, and your estimated monthly payment
Generates a “Savings Resume” comparing total 5-year cost vs. other options and highlighting where you save
Provides an Insights page with:
- 5-year projections (principal, interest, fuel, maintenance, insurance, resale)
- Monthly breakdown so you can see where your money goes
- Estimated credit impact trajectory (12 and 60 months)
- Lifestyle guidance (ownership window, usage match, environmental/risk notes)
Adds predictive context using transparent, rule-based calculations (affordability bands, stability indicators, lifestyle fit) without external paid services

How we built it

Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS, shadcn/ui
State: Redux Toolkit for onboarding state and client-side persistence

APIs (App Router):

/api/onboarding – save/retrieve submission
/api/recommend – scoring, eligibility, 5-year cost calculation, diversity selection
/api/insights – credit impact, lifestyle guidance, savings comparisons

Finance math:

Monthly payments with standard amortization (principal, interest, term)
Total cost of ownership over 5 years, including fuel (based on miles/day), maintenance, insurance, and resale
Transparent, rule-based scoring for affordability, efficiency, reliability, and lifestyle fit
Dark celestial theme with glassy surfaces, concise badges, and “why this car?” explanations

Challenges we ran into

First time using Next.js, React, TypeScript, and Tailwind under hackathon pressure — learning components, state, and routing while building was a challenge
Repeated Vercel build failures (misconfigured JSON, ESLint/type errors, and App Router prerender issues) — fixed by tightening configs and wrapping useSearchParams in a Suspense boundary
Achieving realistic financial results without slowing the app — used credit-tier APR mapping and amortization formulas to compute accurate 5-year total costs (fuel, maintenance, insurance, resale)
These challenges taught us how to debug under pressure and deliver a stable product in a short time.

Accomplishments that we’re proud of

A complete flow: onboarding → eligibility → recommendations → insights → savings comparison
Clear, explainable recommendations with diverse Toyota models
A simple, transparent 5-year cost model that’s easy to compare and understand
A fast, consistent UI with stable deployment and smooth build process
We’re proud that CarNance makes financial clarity more accessible — helping everyday users make smarter car decisions with confidence.

What we learned

Building a full web app from scratch takes patience, time, and teamwork
Debugging and deployment taught us that things break — and that’s part of the learning process
Explaining numbers in a way people understand matters just as much as getting them right
We learned how much we can achieve when we stay focused, support each other, and keep things simple

What’s next for CarNance

Integrate a machine learning model trained on user income and spending patterns to predict how different car choices affect financial health over five years
Add a secure “Buy Now” or “Apply for Financing” option that connects users directly with verified Toyota dealers or finance partners
Enable Google sign-in so users can create profiles, save preferences, and build personalized car watchlists to track value, depreciation, and maintenance trends
Continuously update market prices and depreciation data using live APIs to show changing car values over time
Integrate with credit APIs to simulate how each car decision might affect credit utilization, score growth, and loan eligibility
Add interactive charts with Plotly or ECharts to visualize projected savings, ownership costs, and long-term financial trajectory

Together, these features will make CarNance a complete ecosystem — where users can plan, predict, and purchase with total financial confidence.