EcoWatcher

Go back to the list of projects

EcoWatcher is a mobile app made in React Native. You can report litter in your city by simply snapping a photo of the trash and sharing it to the local public administration.

Project Purpose and Goal

Unfortunately, trash is a significant issue in many Italian cities. Some city administrations and garbage collectors are open to receiving reports to help tackle this problem. However, their notification platforms can be cumbersome. You're required to log onto their website and submit a lot of information. Although it's possible to report via Twitter (now X), the app doesn't support precise location tagging.

Ecowatcher

Problems and Thought Process

I contemplated creating a user-friendly mobile app designed to do three essential tasks: capture a photo of the trash, attach important details such as a description and location, and then either send this information to a backend system or post it on Twitter. I chose React Native for development because of my familiarity with React and its cross-platform capabilities.

Ecowatcher

For location services, I integrated Mapbox's Static Images API to generate location previews, and their Geocoding API to find addresses based on the location coordinates.

The information can be transmitted to a dedicated backend (in my case, Firebase Realtime Database)using Axios. Alternatively, it can be formatted into a tweet, tagging the relevant garbage collection authority (for me, that's AMSA in Milan).

Ecowatcher

Lessons Learned

Embarking on this as my first mobile project, I learned about the distinct differences between Android and iOS development. It's crucial to consider both platforms when building with React Native, especially since testing the iOS version requires Apple devices.

Managing permissions for the camera, gallery, and location services was another layer of complexity. I had to develop additional logic for permissions, as well as for validating form inputs and database storage.

In summary, React Native offers an easy transition for developers familiar with the React ecosystem, significantly easing the development process for mobile applications.

Ecowatcher
Go back to the list of projects