ToyotaTinder

Inspiration

Buying a car can be overwhelming. Between the endless amount of options and the complicated process of financing it, the search for your perfect vehicle can be arduous and daunting. Lucky for you, we've developed a web application which can make finding your dream vehicle easy peasy. Introducing Toyota Tinder, your 1 step solution where each swipe right is a step closer to finding your soul car.

What it does

ToyotaTinder takes basic lifestyle data and user requests and packages them into a JSOM filter that looks into our database of vehicles to find you a Toyota that meets all your wildest needs. ToyotaTinder uses AI in its online platform to enable users to find their dream Toyota model using its Tinder-like UI. Users are required to enter preferences (including price, condition, fuel type, amongst other options), which are filtered into available vehicles to display matches to users. Every vehicle list has basic information like price, MPG, and seating capacity.

How we built it

Next.js 16 (Turbopack) — for blazing-fast performance and server-side rendering React — to power a dynamic, component-driven UI TailwindCSS — for responsive, modern styling Node.js & npm — for dependency management and local development JSON mock data — to simulate real dealership listings during prototyping

Our development flow: Designed wireframes and color palette for an inviting UI Built frontend pages (Home, Preferences, Results, Comparison) in Next.js Connected filters and data rendering through React states Tested locally on http://localhost:3000 using Turbopack hot reload

Challenges we ran into

Some challenges we ran into were getting Gemini to give strict JSON required various iterations and vine tuning of our prompt. Another issue we ran into was inventory CSV’s which contained messy currency symbols and inconsistent times, which made parsing a chore. Another challenge was car selection algorithm which used user initial user form data as well as ongoing swipe actions to reinforce fine tune potential vehicular candidates.

Accomplishments that we're proud of

We’re proud to have built a fully functional Next.js web app in under 24 hours, complete with clean UI design and smooth performance. The interface is consistent and responsive ensuring users can browse seamlessly across devices.

What we learned

During these 24 hours of our hackathon, we understood how to utilize Next.js 16 and Turbopack to increase speed. We explored more concepts related to React, implementing data flow in our frontend. We studied React states in multiple components. We delved into design concepts, understanding how to use Tailwind CSS to design a user-friendly interface. More importantly, we understood how to achieve these with minimum interactions to ensure a smooth user experience.

What's next for ToyotaTinder

In terms of future improvements, our focus shifts to functionality enhancement and personalization. We aim to create a smart recommendation system which will learn based on interactions to recommend similar or complementary models. In subsequent improvements, we will improve functionality related to comparison and integration with dealers. We will enable users to either contact dealers or organize test drives directly from our app. Finally, we will host our app on Vercel using complete persistence with user authentication.