Sustainable City Action Hub

Inspiration

As someone passionate about sustainability and urban development, I noticed a gap in how cities engage their residents in local green initiatives. Many sustainability efforts go unnoticed due to lack of centralized access. I wanted to create a platform that brings together these initiatives, events, and community efforts in one interactive, easy-to-navigate space.

What it does

Sustainable City Action Hub is a full-stack web application that helps users explore and engage with sustainability-related activities in their city. The platform features:

A curated list of sustainability initiatives with details and filters
A calendar of upcoming events with RSVP functionality
A community section for discussions, user profiles, and messaging
An interactive real-time map showing locations of ongoing and upcoming initiatives and events

How I built it

I developed the application entirely on my own using the following tech stack:

Frontend: React.js, HTML5, CSS3
Backend: Node.js with Express.js
Map Integration: Leaflet.js using OpenStreetMap data

The frontend and backend communicate via RESTful APIs. I used state management in React to handle filtering, dynamic updates, and user interactions across pages. Leaflet.js was integrated to display map markers and enable interactivity for event and initiative locations.

Challenges I ran into

Map integration: Getting Leaflet.js to properly update markers based on filters and real-time data was initially complex.
Data structuring: Designing a flexible yet consistent data model that could support both initiatives and events proved challenging.
Community features: Implementing real-time features like messaging and forums within time constraints pushed me to prioritize essential features.