Pearl City: Eco-City | Architectural Civic Management
Inspiration
Growing up and studying around Kamareddy, and witnessing the massive, fast-paced technological growth in nearby Hyderabad, highlighted a stark contrast for our team. There is a huge gap between how advanced our tech industry is and how basic our everyday city management feels. Municipal systems and applications are usually clunky, bureaucratic, and discouraging to use.
We wanted to build something that actually connects people to their neighborhoods. We noticed these infrastructure and community disconnects in our own areas and decided to build Pearl City to fix them. Our main inspiration was a simple concept: a city only becomes truly sustainable and "smart" when its citizens are actively involved. We hypothesized that citizens are much more likely to participate in civic duties if the platform rewards them and features a highly intuitive, premium design.
![Urban Transit Flow]
What it does
Pearl City is a decoupled, full-stack civic management platform divided into distinct environments:
- The Citizen App: A mobile-first web application where residents can manage their civic footprint. Users can schedule specialized waste logistics, report infrastructure issues via GPS, donate to ecological funds, and list pre-owned items on a community circular economy board.
- The Admin Command Center: A desktop-optimized dashboard for city officials that aggregates live data. It displays incoming citizen complaints, manages the waste collection queue, and monitors the overall kinetic energy generated by the community.
- Kinetic Track Grid: A physical-to-digital feature where citizens generate Eco-Credits and Liquid Rupees by walking or running between designated physical nodes in the city, verified by their phone's hardware.
![Ecological Restoration Fund]
How we built it
We separated the project into a client-side frontend and a server-side backend to simulate a real-world, scalable system.
- Frontend UI: We built the interfaces using HTML5, Vanilla JavaScript, and Tailwind CSS. We avoided standard government templates, opting instead for a clean, editorial layout with horizontal snap-scrolling.
- Backend Engine: We built our own RESTful API using Node.js and Express, which we hosted on Render.
- Database: To ensure our data persisted and synced in real-time between the citizens and the admin, we connected our backend to a MongoDB Atlas cluster.
- Hardware Integration: For the Kinetic Track, we utilized the
html5-qrcodelibrary and the native JavaScriptDeviceMotionEventAPI.
We wanted to bridge the gap between software and the physical world, turning a standard smartphone into an IoT city sensor.
The Math Behind the Kinetic Grid
To prevent users from simply clicking a button to farm Eco-Credits, we anchored the system using physical QR codes at the start and end of a track. We wrote an algorithm to verify physical exertion. Let $D$ represent the known distance of the track in meters, and let $A$ be the hardware verification variable (where $A=1$ if the smartphone accelerometer detects authentic walking or running force with total acceleration $a > 11.5 \text{ m/s}^2$, and $A=0$ if the user is stationary). Using these exact hardware metrics, the kinetic energy in Watts ($E$) added to the city grid is securely calculated directly within the app as $E = D \times 0.05 \times A$.
Challenges we ran into
- Hardware Sensor Security: Accessing a phone's accelerometer through a mobile browser was a significant hurdle. We had to navigate strict browser security protocols, ensure the application was served over HTTPS, and write custom logic to handle iOS permission requests without breaking the user experience.
- Real-Time Database Connections: Transitioning from local, in-memory data arrays to a live MongoDB Atlas database in the middle of a hackathon time crunch was intense. We had to rewrite our asynchronous
fetch()requests to ensure that when a citizen scheduled a waste pickup, the Admin dashboard updated instantly. - Responsive Architecture: Designing a UI that functions as a simple, thumb-friendly mobile app for citizens, while simultaneously serving as an ultra-dense, data-rich command terminal for desktop admins, required extensive trial and error with CSS grids.
Accomplishments that we're proud of
- Full-Stack Decoupling: We successfully separated our client-side deployment from our server-side backend, allowing both sides of the application to communicate seamlessly across the internet.
- Fraud-Proof Engineering: We are incredibly proud of the Kinetic Track logic. By combining geospatial anchoring (QR codes) with hardware verification (accelerometers), we built a system that mimics real-world physics and prevents data spoofing.
- The Circular Economy Implementation: Building the RRR (Reduce, Reuse, Recycle) Exchange archive to function perfectly, allowing users to list and request items seamlessly, turning waste into community value.
What we learned
- API Architecture: We learned the intricacies of building REST APIs and how to connect physical actions to a cloud database permanently.
- Bridging Software and the Physical World: We learned how to tie physical actions—like scanning a printed QR code and physically moving through a city—directly into a web application.
- Design Drives Behavior: We realized that UI and UX are critical to civic engagement. Citizens are far more likely to participate in basic civic duties if the interface they are using is well-designed, intuitive, and provides immediate, tangible feedback.
What's next for Pearl City
We have ambitious plans to scale our prototype beyond this hackathon to create a permanent impact. Here are our immediate next steps:
- Local Language Localization: We plan to implement a seamless language toggle for Telugu and Hindi to ensure true accessibility for all demographics across the Kamareddy and Hyderabad districts.
- Predictive AI Analytics: We aim to upgrade the Admin Command Center with a machine learning model to forecast infrastructure failures—like pothole formations—before they happen, based on complaint density algorithms.
- Hardware Expansion: Transitioning from smartphone accelerometer verification to dedicated, physical piezoelectric tiles embedded directly into the smart tracks.
The ultimate goal is to present Pearl City to local municipal councils as a fully deployable, open-source civic framework.
Built With
- chart.js
- css3
- devicemotion-api
- express.js
- hardware
- html5
- html5-qrcode
- javascript
- leaflet.js
- mongodb-atlas
- netlify
- node.js
- piezoelectric
- render
- tailwind-css
Log in or sign up for Devpost to join the conversation.