GreenRanger

Making recycling accessible in Astana (Recycling locations)

Comment

Inspiration

Living most of my life in Astana, I noticed that while some people wanted to recycle, they often didn't know where to go. The city has many recycling locations, but the information was scattered and not easily accessible via default maps. Thus, I wanted to create a solution that would make locating these accessible.

The idea came to me when I was trying to find a place to recycle some plastic bottles and realized there was no centralized way to discover recycling locations. So I thought: "What if there was an app that showed all recycling spots on a map?"

What it does

GreenRanger is a multilingual web application that helps people find recycling locations in Astana. Users can:

Explore an interactive map showing all recycling centers and drop-off points

Filter by material type(paper, glass, clothes, aluminium cans, industrial waste, plastic, bottles, metals) with multi-select options

View information about each location including what materials they accept

Switch between languages (English, Russian, Kazakh) for accessibility

Toggle between light and dark themes

A fully responsive design that works on desktop, tablet, and mobile

How I built it

I built GreenRanger using a modern React.js stack: React.js, TypeScript, CSS. I integrated Google Maps API for interactive map functionality and added custom markers and info windows for each recycling location. As I live in Kazakhstan, people mainly speak Kazakh and Russian, so I added these 2 languages as well. At last I optimized the website for phone, like adaptive layouts and custom filter panel. And for deployment I used a Vercel as a host and Github integration for the easier deployment of my changes

Challenges I ran into

Two main challenges were Responsive Map Interface and Finding of the Locations. Because making the map work perfectly on mobile devices while maintaining all functionality was really challenging. The filtering system, location panels, and controls needed to be completely reimagined for touch interfaces, which took a long time to brainstorm and implement. Afterwards, due to the lack of anything similar, I did not have any locations addresses nor info, so I had to travel across the city and finding these spots, as well as asking people who work in these fields if they know anything that would help me.

Accomplishments that Im proud of

Im proud of making this website as it would help community and nature around us. And of course it helped me sharpen my skills on coding and brainstorming.

What I learned

Ive never used maps integration, and Googlemaps was helpful this time, I gained really important knowledge on implementing it. And I had not that good react skills so that project was beneficial for both community and my experience

What's next for GreenRanger

I really plan to expand to more cities, but I lack info on other cities, and local map companies asked at least 700$ for just the info on the locations in my city, and in other cities its around the same price, which I cant check myself

Share this project:

Updates