CityFix Mobile App

Inspiration

Every day, residents walk past potholes, broken streetlights, graffiti, and fly-tipping in their neighborhoods — but most never report them because the process is too complicated. We wanted to make civic reporting as easy as snapping a photo. CityFix was born from the belief that empowering residents with a simple, mobile-first tool can transform how communities communicate with their local councils and drive real change in their neighborhoods.

What it does

CityFix is a native mobile app that lets residents report local civic issues directly to their city council in seconds. Users snap a photo, the app captures their GPS location, they pick a category (pothole, graffiti, broken streetlight, or fly-tipping), add a description, and submit. The report goes live on a public dashboard where anyone — even without an account — can browse all reported issues in their area. Council admins can then update report statuses, post progress photos, and communicate directly through a timeline on each report. Residents can track their submissions from "Submitted" to "Under Investigation" to "Resolved."

How we built it

We built CityFix as a full-stack application with two frontends sharing one backend:

Backend: Express.js with TypeScript, PostgreSQL database using Drizzle ORM for schema management, session-based authentication, and file upload handling for report photos

Web App: React 18 with Vite, Tailwind CSS, Leaflet maps, and Capacitor for native wrapping — designed pixel-perfect from Figma mockups

Mobile App: Expo React Native (SDK 52) with React Navigation, Expo Image Picker for camera/gallery access, Expo Location for GPS, and Ionicons for a clean native feel

Infrastructure: Built and deployed entirely on Replit, with a PostgreSQL database, shared API layer, and Expo's cloud build system for app store distribution

The architecture lets both frontends consume the same REST API, ensuring data consistency across platforms.

Challenges we ran into

Cross-origin session handling: Getting authentication to work seamlessly between a React Native app and an Express backend required careful cookie and CORS configuration, especially across different platforms (web vs native)

Dual frontend architecture: Maintaining two separate frontends (web and React Native) that share the same backend without breaking either one required disciplined separation of concerns

Admin access bootstrapping: Designing a secure "first admin" flow where the initial user can promote themselves, but preventing privilege escalation once an admin exists, required careful backend logic

Native permissions: Handling camera, photo library, and location permissions gracefully across iOS and Android with proper user-facing explanations

Accomplishments that we're proud of

Public-first design: Anyone can browse all civic reports without creating an account, making transparency the default

Real admin workflow: Council admins can manage report statuses and post photo updates with a full audit timeline — this isn't just a reporting tool, it's a complete issue management system

Two platforms, one backend: Both the web app and native mobile app share the exact same API and database, so every report is instantly visible everywhere

Built and deployable from the replit: The entire app — backend, database, web frontend, and native mobile app — was built and can be published to app stores without ever leaving the browser

What we learned

React Native and web React share concepts but diverge significantly in UI primitives — translating a Figma web design into native components requires rethinking layout from the ground up

Session-based auth works well for web but needs extra consideration for mobile clients; token-based approaches may be more robust for future iterations

Expo's ecosystem makes native feature access (camera, GPS, haptics) remarkably straightforward compared to raw native development

Designing for public access alongside authenticated features requires thoughtful route protection and UI adaptation — showing the right controls to the right users

What's next for CityFix Mobile App

Push notifications: Alert residents when their report status changes using Expo Notifications

Map view on mobile: Add an interactive map to the mobile dashboard so users can see issues geographically

Photo before/after: Let admins attach "resolved" photos so residents can see the fix

Community engagement: Add upvoting so popular issues get prioritized, and comments so neighbors can coordinate

Multi-council support: Expand to support multiple city councils with separate dashboards and admin teams

Offline mode: Queue reports when there's no connectivity and submit automatically when back online

Analytics dashboard: Give council admins insights into report trends, resolution times, and hotspot areas

Accessibility: Full screen reader support and high-contrast mode for inclusive civic participation

Built With

• figma
• replit