Inspiration

As avid car lovers, our group was automatically intrigued by the challenge Toyota presented. When trying to create a website that helps find users their dream car, we wanted placed an emphasis on allowing users to find the car that fits not only their wants, but also find the perfect car for their situation.

What it does

Our goal was to create a platform that makes finding the perfect Toyota simple and personalized. This site lets users explore the full lineup, compare models side-by-side, and understand key features that matter most. Beyond just browsing, we focused on helping users find cars that fit their lifestyle and financial situation. With tools like a smart comparison feature, a finance calculator, and a budget-based vehicle matcher, users can confidently choose the right car. Additionally we wanted to address one of the challenges of online car shopping: the lack of a salesperson. The built-in assistant guides users through the entire car shopping process, answering questions and helping users make the best decision.

How we built it

Our team used react, typescript, and javascript to build to build type safe UI and used TailwindCSS to handle the styling and aesthetics. We utilized component like vehicleCard in tandem with a dynamic vehicle data container in order to efficiently centralize the car data throughout the website. This enabled us to make our application scaleable as it wasn't bound by the limitations of hard coding. We used this dynamic container to handle the logic behind our tabs and filtering, our comparison tool, and also enabled a reusable AI system. We also used Gemini API integration to construct our online AI sales representative.

To enhance efficiency and maintain consistency across components, we designed a modular architecture that leveraged custom hooks and context providers to handle global state and asynchronous data fetching. This allowed different sections of the application—such as vehicle listings, comparison tables, and financing calculators—to share the same data models without redundant calls or state conflicts. Our filtering algorithm utilized a combination of array manipulation methods and TypeScript type guards to ensure precise, type-safe operations when users selected filters like model year, price range, drivetrain, or fuel type. The algorithm dynamically recalculated visible results in real-time, ensuring that the UI updated instantly without unnecessary re-rendering or data duplication.

The Gemini API integration was configured through a dedicated service layer that abstracted API calls and handled response parsing, authentication, and error management. We designed the workflow so that the user’s input was first normalized, tokenized, and enriched with contextual metadata (e.g., user preferences and previously selected vehicles) before being sent to Gemini. This allowed the AI sales representative to provide more contextually relevant and personalized responses. We also implemented caching and concurrency control to avoid redundant API requests and improve latency during frequent interactions. By combining algorithmic efficiency, structured data flow, and advanced API orchestration, our system not only provided a seamless user experience but also demonstrated strong architectural scalability for future enhancements such as machine learning–based recommendation engines or real-time dealership inventory integration.

In summary, our system architecture embodies both scalability and adaptability. By combining component-driven development, intelligent data flow management, and advanced AI integration, we built a platform capable of evolving with future user and business needs. The underlying workflow ensures that every user action—from selecting a vehicle to interacting with the AI sales representative—flows through a consistent, optimized pipeline that balances client-side performance with backend reliability. The modular design of our React components and the abstraction of API logic into dedicated services allow for rapid iteration and integration of new features without disrupting existing functionality. Ultimately, this project showcases how a thoughtful blend of algorithms, type-safe design, and generative AI can transform a traditional car browsing experience into a personalized, data-driven, and conversational digital showroom.

Challenges We Faced

Our team of three divided responsibilities across the project—frontend development, backend logic, and AI integration—intending to merge everything toward the end of the development cycle. While this modular approach helped us move faster individually, combining the different components presented significant challenges. One of the main difficulties we encountered was synchronizing the frontend React interface with the backend services responsible for handling vehicle data and API requests. Each team member had structured their code slightly differently, and aligning the data models, types, and endpoints required extensive debugging and refactoring.

The backend, which managed vehicle data and Gemini API calls, initially had inconsistencies in how data was formatted and returned to the frontend. This caused type errors and mismatched payloads in our TypeScript components, breaking several parts of the UI. We spent a considerable amount of time debugging asynchronous fetch calls, adjusting REST endpoints, and implementing proper JSON response handling to ensure the UI could dynamically display real-time data without crashing. Connecting the AI assistant to the frontend also posed a challenge—handling asynchronous API responses from Gemini while maintaining a smooth conversational flow required us to set up loading states, error boundaries, and context-based state management to preserve user interactions between messages.

Collaboration itself introduced its own layer of complexity. Merging code through GitHub was not always seamless; merge conflicts frequently arose from overlapping file edits, version mismatches, and differences in package dependencies. We had to establish clear branching conventions and frequent pull requests to reduce conflicts and improve communication. Coordinating updates also meant standardizing our environment configurations and dependency versions across local setups to prevent runtime discrepancies. Through this process, we learned the importance of maintaining consistent coding practices, documenting interfaces early, and integrating code incrementally rather than all at once.

Despite the setbacks, the troubleshooting process strengthened our understanding of full-stack integration and teamwork under pressure. We developed better communication habits, adopted more efficient debugging strategies, and learned how to structure scalable, maintainable code that supports collaborative development. The challenges we faced ultimately helped us become more disciplined developers and improved the overall stability and performance of our final product.

What We Learned

This was the first hackathon for all of us and it was a big change from programming in class. Working as a team had its benefits but also came with challenges. We each worked on different parts of the project and had to figure out how to bring everything together. Combining our code was harder than we expected and we ran into a lot of issues. Through this process we learned how to communicate better, solve problems together, and rely on each other to finish something none of us could have done alone. It taught us a lot about teamwork and staying persistent when things get tough. We are extremely proud of the growth each of us had throughout this hackathon.

What's Next for TroubledThriftyToyotaThonTransactionThrillseekingTings

We want to include all the vehicles Toyota offers and make the experience personalized based on the user’s location. This is a big goal, but our team is passionate about what we are building. We want to make it easy for people to find a car that fits their needs and their situation, not just what looks good on paper. Our vision is to create a platform that feels helpful and personal, where users can explore options that make sense for them and feel confident in their choice. At the end of the day, we want to help people find the car that turns their dream into reality.

Built With

• css
• gemini
• html
• javascript
• react
• tailwind
• typescript
• vercel