How technology helps solve the world’s environmental problems
World Cleanup is an app for managing a large environmental event, World Cleanup Day, which took place on September 15, 2018. In the app, users mapped mismanaged waste to make the problem visible. On the appointed day, volunteers cleaned the mapped areas.
The first version of the app was created by another development company. Our task was to enhance the app’s performance so that it could handle a high load on World Cleanup Day. The event was scheduled to take place in more than 150 countries, and organizers expected 17 millions people to take part. To guarantee that the development would be finished on time, we were responsible for managing a group of volunteer developers. In addition, we needed to find ways to raise people’s awareness about environmental problems using technology solutions and our expertise.
Yalantis has succeeded in creating a user-friendly app. They exceeded expectations in the thoughtful detail they included in the backend...
They suggest new approaches and point out potential risks or problems that we weren’t aware of. Yalantis has adopted the product as their own, and we are working together as one team.
- React Router
- Seneca JS
- Docker swarm
- Google Maps + react-native-maps library
- Wix React Native Navigation
About the client
The Let’s Do It! foundation is a non-governmental organization from Estonia, established in 2008, that fights environmental pollution and encourages people all over the world to make our planet cleaner. They asked us to develop full-fledged mobile and web apps. At the time they contacted us, 17 million people in 113 countries were part of their community. Let’s Do It! wants to unite people, raise awareness of environmental issues, and implement true change to achieve their final goal – a clean and healthy planet.
Challenges to overcome
- Lack of effective communication among third party developers
- Poor performance of the app under high load
- More people all over the world should contribute to fighting environmental problems
Effectively manage third party developers
We incorporated third party developers as part of our software development lifecycle. We set up an Agile process with two-week sprints. At the start of each sprint, we defined the scope of work. External developers focused on one particular feature at a time, while our task was to test this feature and ensure that everything worked seamlessly.
In the project’s public repository, we created a Kanban board. We regularly asked third party developers to move cards with tasks to corresponding status columns. In addition, we always negotiated deadlines and created a schedule for all tasks to be done.
The Let’s Do It! community regularly sent us change requests, while timeframes didn’t change. This required us and our external developers to be flexible and quickly adapt to new requirements.
Unfortunately, code guides and architecture patterns weren’t followed strictly, so the application had a partly inconsistent structure and different code styles in different files.
Guarantee smooth app performance during the large event
On September 15, 2018, World Cleanup Day was scheduled to happen in more than 150 countries. Volunteers started cleaning up at 10 a.m. local time. Even though not all volunteers used the app simultaneously, the peak load for the backend was very high. Before the event, our client was concerned about whether the server could handle the high load.
The legacy database for the project was CouchDB. This database has fast response times and can store a large amount of data, but every time something is added to it, CouchDB reindexes everything. This led to incorrect responses and the inability of the app to work for more than 100 users simultaneously. We moved to PostgreSQL, which performs in and out operations simultaneously and can easily handle high load.
After moving to PostgreSQL, we implemented PostGIS, which has an effective built-in clustering algorithm. We added a “Search in this area” button so that requests for trashpoints are sent only after a user taps the button. In addition, we set limits for zooming while using the map in the mobile app. This increased the capacity of simultaneous users by 50 times. With this, we were sure that the map feature would work smoothly.
After a long discussion, we decided to move from Expo to React Native as it provided us with the following benefits:
- • Simpler architecture
- • Ability to control builds
- • A broader community and a significant number of open-source libraries
To move to React Native, we needed to translate all code from Expo to React Native. At the same time, we had to support the old version of the app built with Expo. The expertise of our developers helped us to overcome difficulties with managing two environments at the same time.
Draw people’s attention to environmental problems
We added an Event module to manage clean-up events. Users can create and schedule cleanups and add lists of trashpoints and required inventory. On the appointed date, users clean marked trashpoints. With the help of filters, users can quickly find nearby events.
Our UI decisions were based on World Cleanup’s guidelines in order to keep strong associations with the brand. The UI design is clean and minimalistic, with bright accent colors.
We created a simple navigation that allows both fast browsing and effective creation of new content. For this, we placed top-level and frequently used actions at the bottom of the screen so they can be reached with one-thumb interactions.
The map is a main feature of the application, so we did our utmost to make it user-friendly and understandable. The first challenge was to find a library for drawing Google Maps. We created a demo with three libraries and chose the best one for our app. We decided to use react-native-maps. For the web version, we moved navigation and filters to the top and made a separate block for trashpoints. This solution allows us to correctly display information on all tabs.
The series of cleanups began on the small island nation of Fiji and swept across the planet to finish in American Samoa. Our backend developers closely monitored server states. The app worked seamlessly and the client was satisfied with our work.
Yalantis also was a part of this movement. On Saturday September 15, we came together to make our city a little bit cleaner.
Estonian president Kersti Kaljulaid also was part of this civic movement. We were so proud that she chose to visit our hometown of Dnipro, Ukraine and help with cleanup.