ToyoAdvisor

Assessment Page #1 - Options unselected
Assessment Page #1 - Selected Options
Assessment Page #2
Landing Page
Car Results Page

Inspiration

The reality is, choosing a car is hard. Balancing personal needs, personal wants, work requirements, safety, fuel consumption, and financial compatibility all at once when selecting a transportation companion is ineffably stressful. This stress leads many people to buy a car that doesn't fit their needs or becomes too much of a financial burden for them. Because of this, we decided to take on this challenge headfirst and offer a light at the end of the tunnel for consumers to find the car most optimal for their needs, most effective for their lifestyle, and compatible with their finances, and potentially their future finances.

What it does

Our app first introduces you to a welcoming home page, urging the user to either "find their match" or view all models. What this allows us to do is help people find their car based off of the available lifestyles that they can drag and drop. The reason we chose to do drag and drop is because a visual and interactive interface allows for the user to think more about what they're doing and effectively choose the lifestyles that would be the best for them. However we also prompt the user to click on this link that helps them learn about the best finacial and capable cars as well as the basics of buying a car. It teaches the consumer about the different types of payments from cash payment, fiancing, and leasing, with the benefits and negatives of each. After that the user can learn about different types of cars ranging from a compact affordable car to a truck used for rugged terrain. After they finish learning about the basics of Toyota cars and their finacial options and their drag and drop lifestyle choices they can click next and click their finacial situation (first time buyer, to premium buyer) and then a list of cars best suited for them will appear. They can then further fine tune the car best suited for them (such as manual, automatic, gas, electric, hybrid) and choose a car from there.

How we built it

We built a web app with top teir UI design and functionality. We created the general layout of the website using Figma and then recreated it via React, Tailwind CSS, Bun for the TS runtime, and Elysia for our framework. Our server side folder contained our API, dependicies, and csv datasets. We use @google/genai to help process the data from the lifestyle choices to the most optimal car for the user. Our serverside tech stack is very efficent and quick, which makes for a very seamless experience. It ensures our API endpoints responed quickly. We used a gemini api key to handle and Our frontend clientside website utilizes React (as mentioned before) for a quick, aesthetic, dynamic user experience. We tied this in with the shadcn UI toolkit which works excellently with react.

Challenges we ran into

Some challenges we ran to initlaly was actually figuring out how to get the data and display it onto the screen which combined some of the more difficult aspects of backend design and frontend design. We figured this out by doing extensive research and looking at different videos to find a solution to pairing the Gemini API to the backend and accessing the Toyota CSV.

Accomplishments that we're proud of

We are proud of figuring out the formula and process of sending the data of the user choices from their lifestyles to the backend and processing and it and then returning the appropiate results and best cars for the user. This was something that we did not know how to do and learned it (somewhat hastily) and was able to implement it fully for our project.

What we learned

We learned many different things. Firstly, we learned the technical skills. We learned how the different runtimes, frameworks, and which one was the most optimal for what we're doing. We did much of this in only 24 hours and were able to implement a stellar project for potential car buyers. Furthermore we also increased our knoweldge of skills and tools we already know such as React and CSS. Less technically, we learned to better work as a team, before this we did not know eachother, and know we were able to implement a product that provides amazing positive value to the world.

What's next for HackUTD- Toyota Car Advisor

We plan to increase our capabilities and add more user functional features to increase the usability of our website. Right now we prompt the user to choose their lifestyles before they drag and drop. To help them, we plan on adding a short scenario based story that learns what would be the best lifestyle for them. For example, what they would do in a weekend after a week of schoolwork/work or their house/garage sizes for a car that would integrate properly into not only their lifestyles but also their homes. This can also be used to observe market fit and market changes for product development and data analysis teams with the consent of the user of course.