City website
Live city map, ward feed, blog, news and my reports.
Case Study · Smart City Platform
Wontanara Cite smart city platform
A smart city platform where citizens report civic issues with geo-tagged photos, departments triage and assign them, and field crews fix them with before and after proof.
- Geo-tagged photo reports
- SLA clocks & escalation
- Ward heatmaps & analytics
- 19 languages, RTL ready
Smart city platformGovTech · Website + 3 apps + Admin · Offline-first
WC
4Steps to proof
3Connected appsWontanara Cite
Live City MapEvery report on the map.
3Connected apps
Overview / 01
Three apps, one connected loop
Citizens report civic issues with geo-tagged photo evidence. Departments triage and assign in seconds. Field crews navigate, fix and prove the work, every step tracked and timed.
We built the public website with its live city map and ward feed, the Citizen, Department and ServiceMan apps, and the admin panel with analytics, departments, content and app settings.
- Live city map
- Ward feed
- SLA tracking
- Analytics
- Role
- Design + Development
- Industry
- GovTech · Smart city
- Platform
- Website, 3 apps & admin
- Apps
- Android & iOS
- Languages
- 19, RTL ready
- Year
- 2026
Scope & deliverables
Three mobile apps
Citizen, Department and ServiceMan apps for Android and iOS.
Admin panel
Analytics, departments, in-charges, services, content and settings.
Maps & geo data
Geo-tagged reports, ward heatmaps and complaint locations.
Challenge & solution
Lost complaints, or every report tracked to proof
Civic issues like damaged roads, uncollected garbage, water leakage and faulty street lights had no single place to be reported, routed, fixed and proven.
- No easy way to report
- No routing to departments
- No proof the work was done
One platform with a Citizen app to report, a Department app to triage and assign, a ServiceMan app to resolve with photo proof, and an admin panel to watch it all.
- Report in under 30 seconds
- SLA clocks that escalate
- Before and after photo proof
Report · Citizen
No channel: Issues went unreported.
Photo + pin: A citizen snaps a photo; location, category and ward are detected.
Resolve · ServiceMan
No proof: Work was never shown.
Before / after: Crews navigate, fix and add before and after photos with GPS.
Deadlines · SLA
None: Reports could sit forgotten.
SLA clocks: Every complaint has a deadline; breaches escalate automatically.
No coreWontanara Cite
Unreported · Untracked3 apps · 1 loop
- 3 Connected apps
- 19 Languages
Route · Department
Manual: Nobody knew which department owned it.
Auto-assigned: The right department is assigned and dispatches the nearest crew.
Verify · Citizen
No feedback: Citizens never heard back.
Public timeline: The citizen sees the proof and confirms; every step is timestamped.
Insight · Analytics
No data: Nobody measured response.
Live analytics: Resolution rates, response times and department leaderboards.
Measurable impact
- 3Connected apps
- 4Steps to proof
- 5Complaint statuses
- 19Languages
Platform · Key features
Built for the street and the situation room
The website citizens see and the admin panel the city runs on.
01 / 06 features
Auto-playing. Hover to pause
5Statuses
Feature 01Live City Map
Priority-coloured markers by status, from Submitted to Resolved or Reopened, on OpenStreetMap.
LiveOverview
Feature 02Admin Dashboard
Citizens, departments, services, in-charges and complaints, with registration and complaint trends.
12Months
Feature 03Analytics Reports
Total and completed complaints, performance and monthly request trends, filtered by department.
SLATracking
Feature 04Department Analytics
Average resolution time, SLA on-time rate and average performance across departments.
WardFeed
Feature 05Ward Feed
A community feed per ward, with the issue map, my complaints, notifications and help one tap away.
6Setting tabs
Feature 06App Settings
App identity, SMTP, onboarding screens, social settings, emergency contacts and tips & awareness.
Engineering
Technology & Development
A Next.js website with Leaflet and OpenStreetMap maps, a Laravel admin panel and API for the three mobile apps, served through Cloudflare.
System architecture
Citizen → Department → ServiceMan → Citizen, tracked in the admin
City website
Map, feed, blog, news and reports
Next.jsThree apps
Citizen, Department and ServiceMan
Android & iOSAdmin & API
Departments, complaints and analytics
LaravelMaps
Geo-tagged reports and heatmaps
Leaflet + OSMTechnology stack
Website3
- Next.jsTurbopack
- Tailwind CSS
- Lucide icons
Admin & API2
- Laravel
- PHP8.2
Maps2
- Leaflet
- OpenStreetMap
Hosting3
- Cloudflare
- Plesk
- nginx
How we built it
4 phases
- 01
ReportReported
A citizen snaps a photo; location, category and ward are detected.
- 02
RouteAcknowledged
The right department is assigned and dispatches the nearest crew.
- 03
ResolveIn Progress
The crew fixes the issue with before and after photos.
- 04
VerifyResolved
The citizen sees the proof and confirms on a public timeline.
Website & admin screens
The city website and the admin behind it
Glide through the Wontanara Cite website, its live city map and the admin panel.
Drag to explore
01 / 11
Philosophy
Design Approach
A calm, bright green design that keeps the map first and every status easy to read.
Map-firstAccessibleMultilingualAccountable
- 3Apps
- 4Steps
- 19Languages
- Audience
- Citizens, officers & crews
- Maps
- OpenStreetMap
- Accessibility
- WCAG AA
- Languages
- 19, RTL ready
Multilingual, offline-first and WCAG AA accessible, as promised on the website.
-
01
Map-First
Live maps with markers, clusters and heatmaps.
For citizens, officers and crews.
Maps5Statuses
-
02
Accountable
SLA clocks that escalate automatically.
No report sits forgotten.
SLA4Steps
-
03
Multilingual
Native scripts and full right-to-left layouts.
Arabic, Hebrew and Urdu included.
Languages19Languages
-
04
Offline-First
Updates and photos queue on the device.
They sync when coverage returns.
Field3Apps
Tokens
Design System
The Wontanara Cite palette: civic green on the website, and a navy and sky blue admin.
- 5 colors
Color palette 5
Civic green
#44ab50
rgb(68,171,80)
Buttons & highlights
Deep green
#2f8a3b
rgb(47,138,59)
Calls to action
Admin navy
#1b2f40
rgb(27,47,64)
Admin sidebar & header
Sky blue
#61afe3
rgb(97,175,227)
Admin highlights
Mist
#f6f8f7
rgb(246,248,247)
Website background
Components
Get started
Save
- Map-first
- Accessible
- Multilingual
Search...
More work
Explore more projects
More of what our team designs and ships.
Web
Featured
01
49.9Ktrips
LetsGo electric taxi platform
The first 100% electric taxi service in Burkina Faso: riders book in the app or on WhatsApp and track their driver in real time, while the team runs zones, trips, drivers and earnings from one admin panel.
- Laravel
- PHP 8.3
- Tailwind CSS
Web
Featured
02
5plan tiers
NEOMX investment platform
A membership investment platform with tiered plans, three wallets, a referral program, spin rewards, six payment gateways and a full admin panel to run it all.
- Laravel
- PHP 8.3
- Bootstrap
Web
03
36reports
Let's go Fit gym management platform
A gym website and management platform: members, subscriptions, classes, schedules, workout plans, a shop with POS, wallets, attendance with biometric doors, and 36 business reports.
- Laravel
- PHP 8.3
- Vue (Quasar)