Car Catcher

Inspiration

We wanted to make a web application that allows users to see the many benefits and features within all of Toyota's vehicles. We also wanted users to be able to build their dream car by comparing Toyota models and trims and evaluating potential costs for financing or leasing.

What it does

Car Catcher is an interactive web app that helps users discover, customize, and compare Toyota vehicles. You can:

Search and browse cars by category (Cars & Minivans, SUVs, Trucks, Electric & Hybrid, Sports)
Filter by budget, seating needs, intended use, drivetrain, and hybrid-only trims
Build a custom configuration (colors, trim, seats, drivetrain, packages) and instantly see matching vehicles
View vehicle details including all available trims and hybrid indicators
Log in (Auth0) to favorite cars and see a personalized favorites list
Submit reviews only when authenticated (preventing spam)
Compare up to three cars side‑by‑side in a spec table
Estimate monthly payments with the built‑in payment calculator

How we built it

Frontend: React + Vite for dev, Tailwind CSS for utility-first styling, Context API + localStorage for per-user favorites.
Authentication: Auth0 React SDK
Backend: FastAPI serving vehicle data with structured Pydantic models (Vehicle, TrimOption) and dynamic hybrid filtering (only return hybrid trims when requested).
State & Data Flow: API helper module (api.js) centralizes fetch logic
UI Patterns: Reusable cards, modal dialogs for details/comparison, controlled form components for the build tool.
Dev & Deployment: Docker (compose) for backend + database placeholder, environment variables via .env with VITE
Fonts & Branding: Google Fonts (Shrikhand for brand title, Montserrat for body) for a clean, distinctive aesthetic.

Challenges we ran into

Ensuring hybrid filtering affected both vehicle-level and trim-level data correctly.
Persisting user-specific favorites without a database as localStorage keys were scoped by user identity.
Keeping image layouts consistent (object-contain vs object-cover) across variable aspect ratios.
Designing a comparison UX that feels lightweight yet informative.

Accomplishments that we're proud of

A smooth and cohesive user experience with clear navigation and responsive layout.
Secure, conditional feature gating (reviews/favorites only when logged in).
Comparison modal enabling side-by-side spec decisions.
"Build your own car" feature that meaningfully filters potential matches.
Modular components in program

What we learned

We learned how to use Tailwind CSS
We also learned how to use Docker as a container
How to use Auth0 to authenticate user sign ins and store user information

What's next for Car Catcher

360° interactive vehicle spin viewer and media gallery.
Adding more to "build your own car " page by adding better filtering and other elements like safety measures for cars.
Basing availability of cars by location and tracking dealerships.