JourneyFi

Inspiration

Buying a car can feel overwhelming — between comparing trims, navigating financing options, and figuring out monthly payments, most people are left guessing what they can actually afford. We wanted to create a tool that makes that process transparent and empowering. JourneyFi helps users visualize, compare, and personalize their car financing journey — bridging the gap between dream cars and realistic budgets.

What it does

Input their vehicle, financial, and plan preferences.
Instantly view personalized financing or leasing options.
Explore a 3D model of their car in real time.
Receive actionable tips for improving affordability based on credit score, income, and down payment.

How we built it

Frontend: React + Vite
3D Visualization: Three.js with React-Three-Fiber and Drei
Data: JSON-based Toyota model and trim database
UI Styling: Custom CSS with Toyota’s official color palette
Routing: React Router for multi-page flow (vehicle info → financial info → payment options → results)

Challenges we ran into

Integrating 3D models seamlessly without performance lag.
Managing dynamic state updates across multiple pages and calculations.
Ensuring accurate financial formulas for different loan and lease term scenarios.
Curating an efficient UI/UX design for the best customer experience.

Accomplishments that we're proud of

Built a fully functional payment estimator with realistic interest rate modeling.
Integrated 3D Toyota Vehicle models with responsive controls.
Designed a clean, intuitive UI that feels professional and user-friendly.
Created a smooth multi-step user flow that mimics a real dealership experience.

What we learned

How to combine financial logic with UI design to make data feel intuitive.
The power of React-Three-Fiber for bringing 3D visualization into modern web apps.
The importance of clear data formatting (e.g., parsing, rounding, and displaying currency properly).
How small design details — color, layout, and spacing — can transform the user experience.