Car2Drvr

Inspiration

To the average consumer, the car market looks almost as unpredictable as crypto but to a group of enthusiasts, it's just a game of numbers, makes, and trims. A recent study by CNBC found that the average buyer will pay a price 10% over the MSRP (Manufacturer Suggested Retail Price) only for that same car to depreciate 15% that year and 10% from just driving it off the dealer's lot. Losing 20% of a car's value instantly due to overpaying for dealer markups and huge depreciation leads to people losing tens of thousands of their hard-earned dollars for a very avoidable problem. In the past year, our group has assisted over 10 families to buy their dream car based on their dream specifications all while saving them thousands by looking into certified pre-owned cars. We realized we needed a way to streamline and scale the search process and make it more accessible to all consumers so we started designing Car2Drvr.

What it does

On the web app, users are met with a wide variety of fields that they can easily tailor to their needs to most accurately match each car with a driver. Fields such as minimum price and maximum price, condition - to establish whether or not the buyer is interested in used cars, car-styling - to determine what type of car they want (for example, SUV, Sedan, Coupe, Truck, etc.), Use case - which helps narrow down what the car will be used for (for example, off-roading, towing, or just daily commuting), Fuel types - helps the user choose whether or not they want a fully gas-powered, hybrid, or electric car, and lastly non-negotiables which include the features the car must have such as 5 seats, heated front seats, or a power tailgate. Given the criteria, our web app can recommend 5 cars based on ratings, safety scores, and real-world reviews giving them the best value for their money. For used cars, we can input minimum and maximum mileage along with the rest of the fields to determine which choice is the best deal for the consumer.

How we built it

We built our web application using React JavaScript as the core framework, leveraging React Router Dom for dynamic rendering and seamless user routing. To handle HTTP requests and interact with the backend, we integrated Axios, while Firebase powered user authentication, quick deployment, and storage of user-specific data. For UI components, we utilized PrimeReact, and the overall styling was crafted using CSS and SCSS for a polished and responsive design. The app interacts with a custom backend API for fetching car recommendations, alongside the Google Auth API for login/logout functionality and the Google Cloud Vision API for AI-powered image search and reverse search features.

The development process was streamlined using tools like Vite for creating and running the React project, Git for version control, and Visual Studio Code as our primary IDE. Additionally, we used Postman for testing API endpoints during development and browser developer tools for debugging and verifying the app’s functionality.

We also employed JavaScript LocalStorage for temporarily storing user data and session tokens, while React Hooks ensured efficient state management throughout the app. The app boasts several key features, including dynamic routing for passing data between components, robust form handling for user input, a simple and usable UI design, seamless API integration, secure authentication, responsive design, and advanced AI-powered image search capabilities using the Google Cloud Vision API. These technologies and tools collectively enabled us to build a highly functional and user-friendly web application.

Challenges we ran into

One of the biggest challenges our group faced was getting access to accurate pricing data through an API. As a group, we called up multiple dealerships, other car websites, and even car manufacturers to see if we could work with their APIs. Every call was a rejection and the few emails we heard back from asked for both dealer licenses and lump sums of money to get access, neither of which we had as a group. Eventually, after hours of searching, we found a free API that gave us rough estimations of car values taking into account depreciation and car condition. Even though the data is not perfect we are now able to accurately suggests cars given all the features, and specifications by the user.

Accomplishments that we're proud of

The fact we have a working website up is a huge deal to us. As a group, we had minimal web dev experience, all being first-year students this was our first hackathon, and having a finished working project is an incredible feat. We are very proud that we took on a seemingly daunting task and broke it up into a working project.

What we learned

The past 24 hours have been nothing but learning. Everything from understanding how git works and how we should commit to learning what react is and how to use JSX. Some of us didn't even have prior HTML CSS experience but by the end of the 24 hours, we could all build a functional website. We learned how to integrate APIs, including chat GPT API, and tested different prompts for optimal results. Even how to debug and use version control to test solutions.

What's next for Car2Drvr

We hope to make Car2Drvr the one-stop shop for car searching. We want to provide more insights to users on all the features a car offers and allow users to specify the car they want. Give them options across the country to purchase the car. Then, even allow for a purchasing guide, a list of things the buyer should verify in the car pre-purchase, including tire pressure, tire wear, lagging tech, odd engine noises, and even poor brakes. Then, taking in all this inspection data, we will give the user estimates to bargain for a lower price of the car.

Built With

• apis
• axios
• express.js
• git
• javascript
• node.js
• reacr-router-dom
• react