Tasco Vehicle Passport — Project Story

Inspiration

In Vietnam, over 800,000 used cars change hands every year — yet the process is broken at a fundamental level. When a seller submits their car to a platform like Carpla, they go through inspection and only then discover deal-breaking problems: unpaid traffic fines, expired vehicle insurance, overdue registration inspections, or missing service records. Inspection becomes discovery, not confirmation. That wastes time for the seller, creates friction for Carpla, and produces low-quality leads that slow down the entire transaction pipeline.

We saw that Tasco already owns the key pieces of the vehicle lifecycle — VETC for high-frequency mobility (3.7M+ users), Tasco Auto for distribution (106 showrooms, 16 brands), Carpla for used-car marketplace, and Tasco Insurance for coverage. But there was no unified layer that helps a seller before they enter the transaction flow. No single place to answer: "What is my car worth? Is it ready to sell? What's blocking me?"

That gap — between the seller's intent and their readiness — is what inspired Tasco Vehicle Passport.

What it does

Vehicle Passport is a pre-transaction intelligence layer that sits on top of the Tasco ecosystem. A vehicle owner enters their plate number and basic details, and the system generates a compact Vehicle Passport with:

Fair Market Value Band — a realistic price range based on make, model, year, mileage, condition, accident history, and location (e.g., 515M–545M VND)
Readiness Score — a 0–100 score indicating how close the car is to being sale-ready
Blocker Checklist — specific issues preventing a quick sale (unpaid fines, expired insurance, overdue inspection, incomplete service records) with severity levels
Explainable Pricing Breakdown — transparent adjustments so the seller understands exactly why their car is valued the way it is
Recommended Next Action — smart routing into the right Tasco service (book inspection, check fines, submit to Carpla, book service appointment)

Beyond the passport, the app includes a My Garage for saving vehicles, a Journey Tracker for following lead progress through the sales pipeline, Quick Tools for standalone utility checks (fines, insurance, inspection), and an Admin Dashboard for ecosystem-level analytics.

The key insight: every passport touchpoint routes the user deeper into the Tasco ecosystem — clearing a fine goes through VETC, booking inspection routes through Tasco's network, and a ready car gets submitted to Carpla as a pre-qualified lead.

How we built it

We made a pragmatic architecture decision early: instead of building a React Native app with a Supabase backend (as originally designed), we pivoted to a React 18 + Vite + Tailwind CSS web app optimized for mobile viewports. This let us ship a polished, demo-ready product within the 24-hour hackathon window.

Tech stack:

Frontend: React 18 with TypeScript, Vite for builds, Tailwind CSS for styling
State management: Zustand with localStorage persistence
Routing: React Router v6 with 9 distinct screens
Scoring engine: A client-side ScoringEngine class implementing rule-based valuation and readiness algorithms
Mock backend: An elegant API interceptor that overrides window.fetch for /api/* routes — meaning all API contracts are production-shaped and switching to a real backend requires only removing the mock interceptor
Deployment: Vercel with auto-deploy on push
UX: VETC-aligned green color scheme, bottom tab navigation, mobile-first responsive design

The valuation engine uses documented formulas: mileage depreciation at 5% per 100k km, accident history penalty of 20%, service history bonus of 7%, and location premiums for major cities (Hà Nội +5%, Đà Nẵng +2%, Hải Phòng +1%). The readiness engine scores from a base of 100, deducting 15 for high-severity blockers, 8 for medium, and adding bonuses for clean history.

We pre-seeded 8 realistic vehicles covering the full spectrum — from a nearly-new Honda CR-V to a high-mileage Kia Sportage with accident history — giving judges material for multiple demo paths without requiring manual data entry.

Challenges we ran into

Scoring consistency: Our initial implementation used Math.random() for generating blockers (fines, inspection, insurance), which meant the same vehicle produced different results on every run. For a product built on the premise of "explainable, trustworthy pre-checks," inconsistent results directly undermined our core value proposition. We had to balance demo variety with reproducibility.

Model name mismatches: Our scoring engine's base price lookup table used simplified keys (CX5, CRV) while the mock backend stored hyphenated names (CX-5, CR-V). This caused a production crash on Vercel — a blank page with "No base price found" errors. A small data inconsistency that took careful debugging to trace through the mock API → scoring engine → results screen pipeline.

Architecture pivot: Switching from the designed React Native + Supabase stack to React + Vite meant rewriting the data layer. We chose an in-memory mock backend with production-shaped API contracts — elegant for demo, but it means data resets on page refresh. Vehicles, reports, and leads reinitialize from seed data on every load, which we had to plan around for the demo flow.

UX alignment: Getting the app to look and feel like it belongs in the VETC ecosystem required iterating on the color scheme and navigation patterns to match the VETC app's design language — green color palette, bottom tab navigation, and card-based layouts.

Accomplishments that we're proud of

Production-shaped API contracts: Even though we use a mock backend, the API layer (api.ts) makes real fetch calls to /api/* endpoints. The mock interceptor (apiHandler.ts) catches these transparently. Switching to a real Supabase or REST backend requires only removing one setupMockApi() call and pointing to real URLs — zero changes to the screens or business logic.

Transparent scoring: The passport results show a complete line-by-line pricing breakdown — base price, mileage adjustment, condition penalty, location premium. Users can see exactly why their car is valued the way it is. This directly addresses the "explainable over opaque" design principle and builds genuine trust.

Full feature coverage: All 9 screens from our design doc are implemented and functional. 8 pre-seeded demo vehicles. 5 of 6 planned mock adapters (Carpla submission, fines check, insurance check, inspection booking, service booking). Lead pipeline with 5-stage progression. Admin analytics dashboard.

Ecosystem routing: Every action in the app routes the user into a specific Tasco service. This isn't just a standalone tool — it's a distribution mechanism that makes the whole ecosystem stickier. The "My Garage" feature transforms a one-time car sale into an ongoing ownership relationship with reminders, service scheduling, and loyalty engagement.

Clean architecture: Types → Store → Services → Screens separation is clean and testable. The ScoringEngine is a stateless class with pure functions. The Zustand store is minimal and persistent. The component library is reusable across all screens.

What we learned

Mock-first is powerful: Building with production-shaped API contracts from day one — even backed by in-memory data — means the demo is indistinguishable from a real product, and the migration path to production is clear and low-risk.

The real product is the routing, not the score: We started thinking the valuation was the hero feature. But during development, we realized the real value is in routing — connecting a blocker to the specific Tasco service that resolves it. The passport is the intelligence; the ecosystem is the action layer.

Vietnamese-first matters: Building the UX entirely in Vietnamese for the target market (rather than defaulting to English and translating later) forced better product thinking. Labels, CTAs, and explanation text all had to make sense in the user's actual language and context.

Data consistency is non-negotiable: A single mismatched key between two parts of the system caused a production crash. In a hackathon, it's tempting to move fast and fix later — but when your product's core promise is trustworthiness, even small data inconsistencies erode credibility.

What's next for Tasco Vehicle Passport

Real data integrations: Replace mock adapters with live connections to Vietnam's traffic fine database (Cục Cảnh sát giao thông), vehicle registration system (Cục Đăng kiểm Việt Nam), and insurance providers. The API contracts are already shaped for this — it's a backend swap, not a rewrite.

VETC distribution: Launch Vehicle Passport as a feature within the VETC app, leveraging its 3.7M+ user base as the primary distribution surface. Every VETC user is a vehicle owner — they're already in the funnel.

VETC Loyalty integration: Connect passport actions (clearing fines, booking services, submitting to Carpla) to VETC Loyalty points, creating a direct incentive loop for pre-transaction preparation.

Machine learning valuation: Replace rule-based pricing with a model trained on actual Carpla transaction data. Real comps from completed deals would make the fair value band significantly more accurate and defensible.

Ownership lifecycle: Expand "My Garage" into a full ownership companion — automated reminders for insurance renewal, inspection due dates, service intervals, and registration expiry. This is the MAU-to-DAU bridge: a car sale happens once, but ownership reminders happen weekly.

Bilingual support: Add English alongside Vietnamese for international users and multi-market expansion.

Audit trail: Implement full event logging per the design doc, creating a verifiable history of every passport generated, blocker resolved, and lead submitted — building institutional trust at scale.