FindMyToyota

Home page
Inventory page
Detailed Car Info page
AI Recommendation page
Auto Loan Calculator page

Inspiration

The traditional car buying experience is often overwhelming and inefficient. Customers spend hours browsing through hundreds of vehicles without clear guidance on which models truly match their needs and lifestyle. We were inspired to solve this problem by creating an intelligent vehicle discovery platform that combines the power of AI with Toyota's extensive vehicle lineup.

Our inspiration came from three key observations:

Decision Fatigue: With hundreds Toyota models and countless configurations, customers struggle to narrow down their options
Mismatched Expectations: Buyers often overlook vehicles that would be perfect for them while focusing on models that don't fit their actual needs
Financial Uncertainty: Many shoppers don't understand the financial implications until late in the buying process

We envisioned a platform that could understand a customer's lifestyle, preferences, and budget upfront, then intelligently recommend the perfect Toyota vehicles while providing transparent financial planning tools.

What We Learned

Throughout this project, we gained valuable insights across multiple domains:

Technical Learning

AI Integration: Implementing GPT-4o for personalized recommendations taught us how to craft effective prompts that balance user preferences with product specifications
State Management: Managing complex multi-step forms and quiz flows while maintaining data consistency across authentication boundaries
Modern React Patterns: Working with React 19 and Next.js 16's App Router gave us hands-on experience with the latest server components and streaming patterns
Type Safety: Leveraging TypeScript with Zod validation schemas helped us catch errors early and maintain robust data contracts

UX Design Learning

Progressive Disclosure: Breaking down the 11-question quiz into digestible steps improved completion rates
Financial Transparency: Real-time loan calculations with interactive sliders help users understand affordability immediately
Personalization Balance: Finding the right number of questions to gather meaningful preferences without causing quiz fatigue

Product Learning

Automotive Domain Knowledge: Deep diving into vehicle specifications, powertrains, and trim levels across Toyota's entire lineup
Customer Psychology: Understanding how different buyer personas prioritize features (safety vs. performance vs. efficiency)
Financial Products: Learning the nuances of auto financing, leasing calculations, and payment estimation formulas

How We Built It

Architecture Overview

We built a full-stack Next.js application with a clear separation between the client-facing experience and AI-powered backend services.

Frontend Stack:

Next.js 16 (App Router)
├── React 19 (Server & Client Components)
├── TypeScript 5 (Type Safety)
├── Tailwind CSS 4 (Styling)
├── Radix UI (Accessible Components)
└── React Hook Form + Zod (Form Validation)

Backend Services:

Next.js API Routes
├── OpenAI GPT-4o (Recommendation Engine)
├── Supabase Auth (User Management)
└── Vercel AI SDK (Streaming Responses)

Development Process

Phase 1: Data Foundation We started by building a comprehensive vehicle database containing detailed specifications for 50+ Toyota models. Each entry includes:

Multiple powertrain configurations
Detailed performance metrics (horsepower, torque, MPG)
Pricing information across different trims
Seating capacity and dimensions
Key features and available options

Phase 2: User Authentication Implemented Supabase authentication with a multi-step sign-in/sign-up flow:

Email collection
Password entry
Session management with SSR support
Protected route middleware

Phase 3: Personalization Quiz Designed an 11-question questionnaire covering:

Usage patterns (commuting, family trips, adventures)
Capacity needs and trip distances
Budget constraints ($10k-$100k range)
Environmental factors (fuel efficiency, garage availability)
Lifestyle requirements (pets, outdoor gear, cargo)
Financial preferences (new vs. used, finance vs. lease)

Phase 4: AI Recommendation Engine Built the core intelligence using OpenAI's GPT-4o. The AI considers multiple factors simultaneously:

Budget constraints
Lifestyle needs
Environmental preferences
Feature priorities
Family size
Commute patterns

Phase 5: Inventory & Detail Pages Created a filterable inventory system with:

Multi-select filters (type, year, drivetrain, powertrain)
Price range sliders
Dynamic vehicle cards with key specs
Detailed vehicle pages with comprehensive information

Phase 6: Financial Tools Developed an interactive loan calculator with real-time calculations:

$$\text{Monthly Payment} = \frac{P \times r \times (1+r)^n}{(1+r)^n - 1}$$

Where:

$P$ = Principal loan amount (price - down payment - trade-in + sales tax)
$r$ = Monthly interest rate (annual rate ÷ 12)
$n$ = Total number of payments (years × 12 + months)

$$\text{Total Interest} = (\text{Monthly Payment} \times n) - P$$

Phase 7: Agentic Automation Created a Python-based automation agent using:

Selenium for browser automation
Nemotron 70B LLM for intelligent interactions
Autonomous test drive scheduling capability

Challenges We Faced

Challenge 1: AI Consistency & Accuracy

Problem: Initial GPT-4o responses were inconsistent, sometimes recommending vehicles that didn't exist or ignoring key constraints like budget.

Solution:

Implemented structured prompts with explicit model ID lists
Added response validation to ensure recommended vehicles exist in our database
Created fallback logic for edge cases
Used JSON-mode responses for structured output

Challenge 2: Form State Management

Problem: Managing quiz state across page refreshes and authentication redirects while maintaining progress.

Solution:

Implemented localStorage for client-side persistence
Created a custom hook for quiz state management
Added progress indicators to show completion status
Implemented graceful degradation if storage is unavailable

Challenge 3: Complex Filter Logic

Problem: Inventory page needed to support multiple simultaneous filters (type, year, drivetrain, price) with smooth performance.

Solution:

// Efficient multi-filter implementation
const filteredVehicles = vehicles.filter(vehicle => {
  const typeMatch = selectedTypes.length === 0 ||
                    selectedTypes.includes(vehicle.type);
  const yearMatch = selectedYears.length === 0 ||
                    selectedYears.includes(vehicle.year);
  const drivetrainMatch = /* ... */;
  const priceMatch = vehicle.price >= minPrice &&
                     vehicle.price <= maxPrice;

  return typeMatch && yearMatch && drivetrainMatch && priceMatch;
});