ToyoMatch

Inspiration

Buying a car shouldn’t feel like solving a riddle. Most people don’t know trims, specs, or drivetrains — they just know what they want: something safe for family, fun to drive, or easy on gas. We wanted to make car discovery feel natural and human.

What it does

ToyoMatch lets users describe their ideal Toyota — either by text or voice — and instantly finds matching cars from real Toyota inventory. Whether someone says “a sporty sedan that’s affordable” or “a hybrid with good mileage,” the app understands the intent and returns actual cars with images, specs, and eco ratings.

How we built it

We built the frontend with Next.js 14, leveraging React Server Components and App Router for high-performance, scalable rendering. Tailwind CSS was used to implement a responsive, Toyota-branded UI with clean component abstraction. On the backend, a Node.js + Express service layer handles intelligent request routing and prompt parsing. We integrated Google Gemini API for natural language interpretation, transforming unstructured user input into structured car search parameters. Real-time inventory is fetched from the Toyota Vehicle Data API, while the Web Speech API powers the voice-to-intent pipeline, enabling seamless multimodal interaction across text and speech.

Challenges we ran into

One of the biggest challenges was collecting and structuring Toyota’s real vehicle data in a consistent format. The Toyota Vehicle Data API uses varying schemas and nested attributes, which made normalization across trims, years, and models complex. Mapping Gemini’s natural language output to these structured filters required extensive debugging, especially when users provided vague or abstract descriptions like “a cool hybrid for my son.” We also had to handle rate limits, inconsistent photo metadata, and incomplete listings while ensuring the query engine still returned relevant, diverse results.

Accomplishments that we're proud of

We learned that building a human-centered search experience isn’t about keyword matching — it’s about context translation. Training Gemini to understand automotive intent (“fun to drive,” “eco-friendly,” “for my family”) required designing structured prompts that guided the model to reason like a car expert. We also discovered the importance of data normalization, ensuring API responses with inconsistent naming or missing attributes still produced relevant, user-trustworthy results. Finally, integrating voice and text input taught us how multimodal design can make AI interactions feel genuinely natural.

What we learned

We built ToyoMatch using Next.js 15 and React 19 for a dynamic frontend with Toyota-inspired theming powered by Tailwind CSS. On the backend, we used Node.js with Express to orchestrate API routes and handle query logic. The Google Gemini API processes natural language and converts user intent into structured filters like model, year, and price range. These filters are then used to call the Toyota Vehicle Data API, returning real listings enriched with details like mileage, drivetrain, and images. We also integrated the Web Speech API for real-time voice search and a custom Wave Animation component for live recording feedback. The entire system runs seamlessly on an event-driven architecture with efficient server-side rendering for speed and reliability.

What's next for ToyoMatch

The next phase for ToyoMatch is building a comprehensive Toyota vehicle dataset that consolidates real-time listings, specifications, and market data into a structured, queryable format. We plan to automate data ingestion from multiple dealership and public APIs, enriching it with embeddings for semantic search and recommendation. This dataset will not only improve query accuracy but also enable features like personalized car suggestions, eco-impact insights, and regional pricing trends. Long-term, we aim to open-source the dataset and make it available for AI-driven automotive research and developer use.

Built With

• gemini
• next.js
• react.js
• speechapi
• tailwindcss
• typescript