Winfra

Winfra is a civic-focused web application designed to rebuild communities by making it easier to report, track, and resolve infrastructure issues. I worked on both the frontend and backend of the project, focusing on creating a seamless user experience while ensuring robust system design.

The Problem

New York City residents deal with aging and failing infrastructure every day. Broken sidewalks, potholes, and malfunctioning public facilities disrupt daily life, yet there is no centralized way for residents to report issues. Winfra bridges this gap with a digital platform that combines reporting, mapping, and direct communication with representatives.

The Solution

Our solution was to design a full-stack web application that integrates real-time interaction, dynamic mapping, and community engagement. The platform intends to connect the community while streamlining the process of solving infrastructure issues.

Frontend Development

The frontend of Winfra was implemented with HTML5, CSS, and JavaScript. I built the main user interface for creating posts, viewing comments, and interacting with infrastructure reports. Key parts of the frontend included:

• Dynamic Map Integration: Using the Leaflet.js library, I connected map tiles with live data so users could pin infrastructure issues and instantly see them plotted in real-time.
• Form Handling: JavaScript functions dynamically validated report submissions, ensuring that posts included valid locations and descriptions before sending them to the backend.
• Interactive Components: Comment sections, hover effects, and popups were implemented to make posts engaging and easy to navigate.
• Responsive Design: CSS was structured with reusable classes and variables to maintain consistency across devices, ensuring accessibility.

Backend Development

The backend was built with Python and exposed a REST API to handle all client requests. I helped design and implement the main API endpoints to create, read, update, and delete (CRUD) posts and comments. Core backend responsibilities included:

• API Service: Each user action, such as submitting a post or adding a comment, triggered an API call handled by Python routes.
• Database Integration: A PostgreSQL database stored user accounts, posts, comments, and location data. Tables were normalized to ensure efficient queries.
• Real-Time Updates: The backend returned JSON responses that the frontend parsed, allowing live updates without refreshing the page.
• User Verification: Basic login and sign-in logic was built in JavaScript, verifying users before allowing them to post or comment.

System Requirements & Design

Winfra was designed not only to meet functional goals for community reporting but also to follow non-functional standards that ensure scalability, usability, and security. These requirements directly influenced our database structure, API design, and interface development.

Functional Requirements

• Infrastructural Suggestion: Users can submit detailed reports about potholes, broken sidewalks, and other issues.
• Community Building: Users can comment on posts and engage with one another.
• Promotion of Accessibility: Reports include accessibility details that update dynamically based on user input.
• Interactive Map: A Leaflet-powered map displays all reports geographically in real time.
• Real-Time Updates: Posts and comments appear instantly without requiring page reloads.
• Contacting Representatives: Users can email or call their local officials directly from the platform.

Non-Functional Requirements

• Usability: A clean, intuitive interface ensures residents can quickly learn how to submit reports.
• Performance: API endpoints were optimized to deliver fast responses, even as data grew.
• Security: User verification and protected endpoints safeguarded sensitive data.
• Maintainability: Modular architecture allowed the system to evolve easily as requirements changed.

Class Diagram

The class diagram defined the three main entities in Winfra: User, Post, and Comment. Each user could create posts and comments, while posts were linked to specific geolocations. This normalized structure allowed efficient queries and smooth integration with the frontend.

System Architecture

Our layered system architecture consisted of a frontend (HTML, CSS, JavaScript, Leaflet) that handled user interaction, a backend (Python REST API) that processed requests, and a PostgreSQL database for storing users, posts, and geospatial data. This separation kept the system modular, scalable, and easier to maintain.

Interface Diagram

The interface diagram highlighted how data flowed through the system. The web client made requests for posts, comments, and map data. The backend serviced those requests, communicated with the database, and returned structured JSON data. Leaflet rendered spatial data on the map, while the frontend displayed posts and comments in sync with real-time updates.

Next Steps

The next phase of Winfra would involve migrating the database to cloud hosting for scalability, implementing threaded comment replies, adding push notifications for infrastructure updates, and partnering with contractors who could take action on reports submitted through the platform.

View the GitHub repository