CivicConnect is a modern civic-tech web application that enables Pakistani citizens to report municipal issues such as garbage collection, electricity outages, water shortages, gas supply problems, and road damage through a clean, multilingual interface.
Developed as an Aptech Vision / Grand Finale Project, CivicConnect focuses on accessibility, responsive design, and practical civic problem solving. Users can generate professional complaint letters, save them to Firebase Firestore, and manage them through an interactive dashboard.
https://fazal305.github.io/civic-issue-resolution/
https://github.com/fazal305/civic-issue-resolution
- Multi-step reporting wizard
- English, Roman Urdu and Urdu support
- Live character counter
- Inline validation
- Keyboard navigation
- Category auto-selection
- OpenStreetMap location picker
- Professional complaint generation
- Copy complaint
- Firebase Firestore storage
- Search and filters
- Pagination
- Status badges
- Delete complaints
- Dynamic complaint details page
- Complaint timeline
- Print and Save as PDF
- OpenStreetMap location link
- Responsive design
- Dark / Light theme
- Scroll reveal animations
- Bootstrap toast notifications
- Mobile-friendly interface
- Garbage Collection
- Electricity
- Water Supply
- Gas Supply
- Road Damage
- HTML5
- CSS3
- JavaScript (ES6)
- jQuery 3.7.1
- Bootstrap 5.3.3
- Firebase Firestore (Compat SDK)
- Leaflet
- OpenStreetMap
civic-issue-resolution/
├── index.html
├── 404.html
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
├── pages/
│ ├── about.html
│ ├── admin.html
│ ├── complaint-details.html
│ ├── complaints.html
│ ├── contact.html
│ ├── login.html
│ ├── report.html
│ └── signup.html
├── docs/
├── README.md
└── LICENSE
- Firestore integration
- Complaint storage
- Server timestamps
- Status tracking
- Dynamic complaint details
Image upload UI and code are prepared but intentionally hidden.
Firebase Storage generally requires the Blaze plan for new projects, so uploads are disabled to keep the project free for student demonstrations.
To enable later:
- Upgrade to Firebase Blaze
- Restore upload logic in
assets/js/report-upload.js - Remove the hidden class from the upload section in
pages/report.html
git clone https://github.com/fazal305/civic-issue-resolution.git
cd civic-issue-resolutionOpen with Live Server or any local web server.
No build tools are required.
You'll also need assets/js/firebase-config.js (gitignored, not included in
the repo). Copy assets/js/firebase-config.example.js to that filename and
fill in your own Firebase project config, or ask a project maintainer for the
real one.
A demo citizen account is available for reviewers/graders to try the reporting flow and dashboard without signing up:
| Field | Value |
|---|---|
user@example.com |
|
| Password | CivicUser#2026 |
| Role | Citizen |
This account can submit complaints and view/manage only its own complaints — it does not have admin access. Admin credentials are intentionally not published here, since admin access can read every citizen's complaint and email; contact a project maintainer directly if you need it for grading.
- Fazal Abbas
- Sufyan
- Sana
Released under the MIT License.
- Aptech Learning Pakistan
- Firebase
- Bootstrap
- jQuery
- Google Fonts
Version 1
- Responsive frontend complete
- Firebase Firestore integration complete
- Complaint reporting wizard complete
- Complaint dashboard complete
- Dynamic complaint details complete
- Authentication implemented
- Admin dashboard implemented
- Image upload prepared (disabled for free plan compatibility)