PlateGrabber-Logo
PlateGrabber-Form
PlateGrabber-Form
PlateGrabber-Form

/

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.