Green Spaces nearby
Dashboard
Awards Page
Home Page

Our Inspiration

Our inspiration for the “Green Street” stems from the People’s Postcode Lottery, which creates a sense of community as you share the joys and challenges with your neighbours. “Green Street” allows users to engage in fun challenges alongside their postcode community and improve the environment of their local area. One minor step can contribute to a major milestone of the whole community.

The “Greet Street” website provides its users with seasonal challenges to help them improve their postcode area environment. Essentially, with the collaborative work on the challenges from the whole postcode community, the users may gain prizes based on their community progress level.

We built GreenStreet as a web application using Next.js, React, TypeScript and Tailwind CSS, and deployed it on Vercel.
The user starts by entering a UK postcode or using browser geolocation. We use Postcodes.io to convert this into postcode and coordinate data, which then feeds the rest of the application. The dashboard combines several live data sources: Open-Meteo for air quality, the UK Carbon Intensity API for regional electricity carbon intensity and forecasts, and Geoapify for nearby green spaces. We created a Next.js API route for the green-space lookup so the Geoapify API key remains server-side rather than being exposed in the browser. We used React state and props to share environmental data between components. Those values feed into a rule-based recommendation system and postcode-specific sustainability challenges. We also use the Carbon Intensity forecast to identify a lower-carbon Green Hour within the next 24 hours. For the community side, we prototyped shared challenge participation and an awards system where postcodes progress through Seedling, Sprout, Bloom and Canopy levels. One technical challenge was finding a reliable source for local green-space data. We initially experimented with the OpenStreetMap Overpass API, but repeated rate limits and connection timeouts made it unreliable during development. We therefore isolated the feature behind our own API route and switched the data source to Geoapify without needing to redesign the frontend. Finally, we added responsive layouts for mobile and desktop, browser localStorage to remember the user's most recently viewed area, and graceful error states for invalid postcodes or unavailable API data.

Challenges we ran into

The first challenge we ran into was to balance big and small postcodes. A big apartment complex could completely overshadow a small 5-house participating community. So to overcome that, we designed a normalised community score formula.

A permanent score could also lead to a stagnant leaderboard after reaching the maximum tier, so to avoid that, we planned a decay system (one tier demotion every draw day).

Another challenge was to come up with ideas on how to motivate the community to participate in the challenges and make it accessible for everyone. While not implemented in the current project, we are hoping to create online challenges, which could also contribute to the environment of the postcode community.

One of our biggest technical challenges was working with several different external APIs, since each returned data in a different format and had different reliability issues. We initially planned to use the OpenStreetMap Overpass API for nearby green spaces, but during development we repeatedly ran into rate limits, timeouts and connection failures. To make the feature more reliable, we switched to Geoapify, which also allowed us to keep the API key server-side instead of exposing it in the browser. Another challenge was handling the structure of API responses correctly. For example, the Carbon Intensity forecast API returned its regional forecast data in a different nested structure, so our first Green Hour implementation could fetch the data successfully but failed to parse it. We debugged the actual JSON response and adjusted the logic to extract and compare the upcoming half-hour forecast periods. We also encountered differences between development and production. The Area page worked locally, but our first Vercel build failed. Fixing this helped us better understand the difference between client-side behaviour during development and Next.js production builds. Other smaller challenges included filtering duplicate green-space results, keeping state shared between multiple React components, making the dashboard responsive on mobile, handling geolocation permissions, and making sure API failures or invalid postcodes produced useful error messages rather than breaking the page. Overall, a large part of the development process involved debugging integrations and adapting the architecture when an API or deployment environment behaved differently from what we expected.

Accomplishments that we're proud of

We are proud to present an easy-to-follow website interface, which allows users to track their progress as well as the state of their environment simply by inputting their postcode number. With the supplied information, we are able to raise the level of awareness for each postcode area and provide people with potential steps to improve their local environment.

We’re also proud that GreenStreet combines several live APIs into one postcode-based dashboard and actually uses that data to drive recommendations, challenges and Green Hour timings. We were solving real technical issues during development, including switching from unreliable Overpass requests to Geoapify behind a Next.js API route, fixing production-only Next.js build errors, and making the app responsive and deployable on Vercel.

What we learned

From this specific hackathon project, we stepped into our user’s shoes and realised that environmental statistics alone don’t motivate most people, they must be translated into motivating, achievable and rewarding goals. During the project, we have researched various ways in which companies may motivate local communities to contribute to a good cause with collective action. One of such ways was presented by the Postcode Lottery, in which case players may donate money to charity and win prizes. Additionally, we learned of various challenges the communities face and which actions could help improve the environment.

This hackathon also taught us how to work efficiently under a strict deadline. We strategically split our team: group members with weaker coding backgrounds focused on the concepts and features of the project while the developers built the core website based on those specifications.

What's next for GreenStreet

Next, we hope to further develop by introducing seasonal and personalised challenges, community leaderboards, and a wider range of sustainable rewards. We also plan to improve the challenge and scoring system to make participation more engaging, fair, and motivating for different postcode communities.