PlateGrabber — License Plate Extraction Tool for City Workflows
- Role: Solo Developer
- Engagement: Internal initiative while at City of Vancouver
- Project Timeline: Two sprints (MVP → prototype)
⚛️ ReactNext.js 14ShadCN UI🔐 NextAuth v5🧠 OCR📍 Geolocation📸 Camera🗄️ MongoDB
📖 Project Overview
PlateGrabber is a web app designed for the City of Vancouver Traffic Department to capture parked-vehicle photos and automatically extract license plate numbers and geolocation data, replacing manual pen-and-paper workflows. I initiated and built the project after observing inefficiencies in the existing process.
2
🧭 Sprints from idea to prototype
1
🏛️ Department demo (superintendent & assistant)
3
⚙️ Core automations (photo, OCR, geo)
❌ Problem
- Traffic staff installing No Parking signs had to record all parked vehicles.
- Plates were written manually on paper, causing slow, error-prone, duplicate data entry.
💡 Solution
A streamlined capture flow that lets staff take photos in-app, extracts plate numbers via OCR, attaches photo geolocation metadata to auto-fill forms, and keeps the system modular for future assignment workflows.
⚙️ Core Product Capabilities
- Photo capture: in-app camera with capture preview.
- Plate extraction: OCR pipeline to parse license numbers.
- Geo tagging: read location metadata and attach to records.
- Auto-fill: populate traffic forms from extracted data.
- Security (planned): encrypted, on-prem storage.
- Assignments (planned): daily dashboard for staff tasks.
🙋 My Contributions
- Built the React/Next.js frontend and ShadCN UI flows.
- Integrated camera capture (React Camera Pro, custom modifications).
- Connected OCR plate recognition and geolocation metadata to form auto-fill.
- Prototyped auth with NextAuth and scoped security for on-prem requirements.
- Ran discovery with the department superintendent and iterated across two sprints.
🏗️ Architecture & Stack
- Frontend: React, Next.js 14, ShadCN UI
- Authentication: NextAuth v5
- Database: MongoDB (prototype stage)
- APIs: Plate Recognition (OCR), geolocation metadata
- Camera: React Camera Pro (custom-modified)
🤔 Why this approach?
- Direct photo capture and OCR eliminate manual, duplicate entry.
- Geolocation metadata ties evidence to place and time with minimal effort.
- Modular design keeps a path open for secure, on-prem deployment and future workflows.
- Modern React/Next stack sped up iteration while keeping the prototype maintainable.
🏆 Outcomes
- Demonstrated the MVP to the department superintendent and assistant with strong interest.
- Identified adoption hurdles around IT policy compliance and procurement.
- Project paused before commercial rollout, but validated automation feasibility.
📓 Process Notes & Lessons
- Applied OCR and geolocation APIs in a real-world municipal workflow.
- Architecture planning is crucial for scalability and compliance.
- Stakeholder discovery with non-technical managers guided scope and roadmap.
- If rebuilding today: define a 2-year roadmap, build modular from day one, and prioritize on-prem encryption.