Inspiration
As a daily driver in the US, I grew frustrated with opaque repair pricing and missed maintenance deadlines—so I built Auto Care Pro to make car care transparent and manageable for everyone, from commuters to DIY enthusiasts.
What it does
Auto Care Pro centralizes car maintenance tools: track service reminders (color-coded for urgency), find & compare local repair shops, access step-by-step DIY guides, and get clear cost estimates for common services like oil changes or brake repairs.
How we built it
I started with wireframing core tabs (Maintenance, Shop Finder, DIY Guides, Cost Estimator) in Figma, then built the frontend with HTML/CSS/JavaScript and React for dynamic tab switching. I curated real-world service price ranges and shop data to ground the tool in practicality.
Challenges we ran into
Designing responsive tab panels that worked seamlessly across mobile/desktop was tough—balancing visual clarity with functionality took multiple iterations. Also, calibrating cost estimates to reflect regional US market averages required cross-referencing local repair shop pricing data.
Accomplishments that we're proud of
The urgency-coded maintenance reminders and shop search filter work flawlessly, and user testing showed the app makes cost estimation 3x faster than researching individual shops. The UI stays true to the brand’s blue/orange palette while remaining easy to navigate.
What we learned
I deepened my understanding of responsive web design and user-centric feature prioritization. Most importantly, I learned to translate everyday pain points (like hidden repair fees) into actionable, intuitive tools.
What's next for this project
I plan to add real geolocation integration for shop discovery, expand DIY guides to cover more repairs, and include a service history export feature—making Auto Care Pro even more useful for used car buyers/sellers and long-term maintenance tracking.
Log in or sign up for Devpost to join the conversation.