DevLog: Building Carestify.ca

 

Project Overview

Carestify is an AI-powered vehicle valuation report service specifically tailored for the Canadian used car market. The goal is to provide instant, accurate, and localized car estimates using the latest AI technology.

Today's Progress

Today was all about laying the foundation and establishing the core user flow. Even as a non-coder, I managed to build the functional MVP pipeline using Cursor AI and Claude 3.5 Sonnet.

1. Tech Stack Initialization

• Framework: Next.js (App Router) with TypeScript.

• Styling: Tailwind CSS for a sleek, "Clutch.ca-inspired" minimal UI.

• Color Palette: Deep Navy (#0A192F) and Emerald Green (#10B981).

2. Core Feature: AI Valuation Engine

• Successfully integrated Google Gemini 1.5 Flash API.

• Built a dynamic input form for Canadian drivers: Year, Make, Model, Trim, Mileage (km), and Postal Code.

• Implemented a "Dual-Language" architecture to support Canada's official languages (English & French).

3. Handling Errors & Reliability

• Established a robust error-handling system.

• Implemented a "Mock-up Fallback" mechanism to ensure users never face a broken screen, even if the API hits a limit.

• Added input validation for Canadian Postal Codes (A1A 1A1 format).

4. Monetization & SEO Readiness

• Designed the layout with Google AdSense integration in mind (strategic ad placeholders).

• Configured Metadata API for initial SEO optimization.

Technical Challenges Overcome

• Model Name Conflict: Encountered a 404 Not Found error with the Gemini model naming. Resolved it by updating the endpoint to the latest gemini-1.5-flash.

• Environment Variables: Successfully secured the API keys using .env.local to prevent sensitive data leaks.

What's Next?

• Connecting Firebase to store generated reports with unique URLs.

• Enhancing the report UI with data visualization (charts/graphs).

• Setting up a blog section to boost SEO ranking.

---

"One day down, MVP is breathing. See you tomorrow!"