FixiePixie

Inspiration

We noticed how hard it can be for residents to report local issues—like potholes, graffiti, or overflowing trash—quickly and with enough detail for city crews to act. Most systems require phone calls or complicated forms. We wanted something simple, mobile-friendly, and visual.

What it does

FixiePixie lets a user snap a photo, automatically captures GPS coordinates, and instantly sends a formatted email (with image attached) to the correct city department. The recipient receives clear location info, maps links, and a photo for verification.

How we built it

Front end: React + Vite. We used the navigator.geolocation and navigator.mediaDevices.getUserMedia APIs to capture location and camera input inside the browser, then previewed images on a <video> / <canvas> pipeline.
Back end: Node.js + Express + Multer for multipart uploads. We reverse-geocode coordinates with OpenStreetMap’s Nominatim API to determine city and ZIP, then route the report to the proper address from a local JSON file.
Email delivery: Nodemailer + Gmail SMTP with App Passwords to attach the photo and send a formatted HTML message to the authority automatically.
Styling: Custom CSS theme for high contrast, responsive layout, and friendly buttons.

Challenges we ran into

Getting camera + GPS permissions to work reliably on mobile (solved with playsInline and muted attributes and HTTPS context).
Ensuring reverse-geocoding stayed within Nominatim usage policies.
Handling multipart uploads and email attachments without saving files on disk.
Making the UI accessible and legible in both light and dark modes.