CitiQuest – Gamified Civic Engagement Platform

Login page
Dashboard

CitiQuest is a gamified civic engagement platform that transforms city improvement into an interactive, rewarding game. Citizens complete real-world missions — like planting trees, cleaning public spaces, reporting issues, or attending awareness campaigns — and earn points, badges, and recognition. A live city map visualizes completed missions, AI recommends personalized tasks, and real-time notifications keep users engaged.

Inspiration

The idea for CitiQuest came from observing low citizen participation in community development initiatives. Many civic problems — sanitation, environmental conservation, or local infrastructure — go unaddressed simply because engagement feels uninteresting or unrewarding. We wanted to make civic action fun, competitive, and visible, so people feel motivated to contribute regularly.

What We Learned

Building CitiQuest taught us:

How to integrate AI with MERN stack for personalized recommendations and proof verification.

Techniques for real-time data updates using Socket.io for maps, leaderboards, and notifications.

Gamification strategies that increase user engagement, such as points, badges, and levels.

How to design scalable database schemas for users, missions, and gamification metrics in MongoDB.

How We Built the Project

Frontend:

Built with React and Tailwind CSS for responsive and interactive UI.

Integrated Mapbox/Leaflet to show missions and completed tasks on a city map.

Gamification panel displays points, badges, levels, and leaderboard.

Backend:

Node.js + Express.js powers REST APIs for user authentication, mission management, and gamification logic.

Socket.io handles real-time updates for mission completion, leaderboard, and notifications.

Database:

MongoDB Atlas stores users, missions, proof submissions, leaderboard data, and gamification metrics.

AI Layer:

TensorFlow.js used to classify uploaded mission proofs (e.g., verifying tree planting or cleaning actions).

AI recommendation engine suggests missions based on location, skills, and past activity.

Deployment:

Frontend hosted on Vercel, backend on Render, and media files stored on Cloudinary.

Challenges We Faced

Designing a real-time leaderboard and map updates that scale with multiple users simultaneously.

Implementing AI verification for mission proof while keeping it lightweight enough for browser usage.

Balancing gamification mechanics so points and badges are motivating but fair.

Ensuring data consistency across MongoDB collections for users, missions, and gamification metrics.

Impact

CitiQuest transforms civic engagement into a fun, interactive, and rewarding experience. By gamifying real-world missions, it motivates citizens to actively contribute to their communities while giving authorities real-time insights into participation and impact. This approach can be applied globally, creating smarter, cleaner, and more engaged cities.