🌟 Inspiration Choosing the right car can be confusing and time-consuming. With countless brands, specifications, fuel types, and price points, most people feel overwhelmed. We were inspired to create CarFinder, an AI-powered recommendation platform that makes car selection effortless, accurate, and enjoyable — like having a smart companion help you decide.
🔧 What it does CarFinder takes in your preferences such as:
Budget range (with currency and comma formatting)
Fuel type (multi-select)
Body type (multi-select)
Based on these inputs, it:
Recommends the top 2–3 matching cars from a curated dataset
Shows accurate images, specifications, and pricing
Allows users to add cars to cart or directly visit the official site to book
Offers a profile system where users can manage preferences, view their saved cars, and customize settings
Provides a “Learn More” section to explain how the platform works
Includes smooth professional animations, responsive design, and customer support integration
🛠️ How we built it Frontend: HTML, CSS, JavaScript, Tailwind CSS for UI components
Backend Logic: Preference filtering, cart management, and profile-based customization
Authentication: Login/signup system with profile icon and dropdown
State Handling: Preserved user selections across navigation (e.g., back button retaining form data)
Hosting: Deployed on Netlify
Assets: Car images are dynamically matched with model names
🚧 Challenges we ran into Matching the correct car images to each recommendation dynamically
Ensuring the Add to Cart feature worked properly and stored selections
Maintaining form persistence (keeping user inputs intact after navigating back)
Balancing clean UI design with complex functionality
Getting smooth responsive animations to work across devices
🏆 Accomplishments that we're proud of Delivered a fully working, cleanly designed, and responsive web app
Implemented working cart functionality and profile settings
Made the site mobile-friendly with a modern, user-friendly experience
Integrated real-time price formatting and currency selection
Solved bugs related to filtering logic and form state
📚 What we learned How to manage multi-select filters and state across pages
Advanced UI/UX design techniques using Tailwind and animations
Managing user authentication, preferences, and persistent storage
How to debug session and cart logic effectively
The value of user-centric design and feature prioritization
🚀 What's next for CarFinder Add a chat-based assistant to guide users step-by-step in selecting cars
Integrate real-time car pricing APIs from dealerships
Add a comparison tool to compare selected cars side-by-side
Expand the database with more cars, filters, and user-generated reviews
Launch mobile app version using the same backend logic
🔗 Live Project Visit the project here: https://car-companion-ai.netlify.app/
Built With
- api
- css3
- html
- javascript
- netlify
- react
- typescript
- vite
