SnapTrash is an iOS app that allows you to report plastic debris that may be found on beaches by using only your phone’s camera and
GPS. Every photo is uploaded to a database that is accessible from the app and contains the photo location, its coordinates and the username of the uploader.
This database will be used to organize regular plastic collections, helping to keep the beaches clean and the ocean plastic-free. Its relevancy is as great as its purpose, as eight million tons of plastic enter the ocean every year, being responsible for the death of several marine wildlife species that ingest it daily.
The user will be able to get a global view of all reported photos on a map that is integrated in the app through a set of intuitive icons. Although the main goal of the app is to organize collections of large amounts of plastic, the user is also encouraged to take action by himself whenever it’s possible.
The design challenge with SnapTrash was to make it as simple and intuitive as possible, without wasting too much time in details that would add no value to it. For this reason, the interface is as simple and clean as possible, making it very easy to achieve the desired tasks. After the login, it only takes a couple of clicks to report any photo, something that is as simple as sharing media on Instagram or Snapchat.
Bin bags on the map represent a gallery of photos at any given location and if you zoom it, you'll see them spread into each individual photo. The remaining icons and buttons don't take much space on the screen and were designed to keep the user's attention on SnapTrash's main purpose: to keep the ocean plastic-free.
From the start, my task was to build a mobile app where users could log in through Facebook and take pictures of plastic, publishing them on a map. At the time, I was still experimenting with Strapi (you can find it reviewed here) and it seemed to be fit for this task. To develop the app itself, I went with React Native.
To be able to keep the photos visible on the app, I had to find a way to store them in a server, along with all the relevant information about each one. At this stage, the server-side is not visible to users in general, and only works as a data storage.
To achieve this, Strapi seemed like a good tool for the job, with one limitation only: it’s geared towards web app development. Consequently, the SDK does not fully work in React Native, nor lets you use the SDK for native Facebook login. In any case, the Strapi Facebook login is now broken, since Facebook made HTTPS callback mandatory and Strapi only generates callback URLs with HTTP.
In the end, the image files are uploaded to the Strapi server, through the /upload endpoint, and the photo model references that file. Additionally, it stores the location where the photo was taken and the login info from Facebook (token, user email and user name). That was everything that I needed from the server-side.
Regarding the app itself, my first task was simply to display a map, which sounded easy enough. However, if you go bare-bones with the React Native CLI tool, you are in for great trouble. The instructions to setup react-native-maps are incomprehensible for someone who isn't experienced in developing for Native. Luckily, the Ignite CLI has a plugin that makes it very easy to add maps to your app.
To get the photo's location, I had to track the user’s current location, which might be easier said than done, considering the available documentation. Here you’ll find bad documentation on how to do it. However, in both cases, they make it seem much more intuitive than it actually is.
After I get the map up and running, I had a few more issues that I had to solve in order to have SnapTrash ready for testing:
Instead of:
The solution is to push the position:absolute view outside of Touchable:
Finding the best solutions for these issues was one of the best parts of developing SnapTrash, as I could understand exactly why it was crucial to have everything running as smoothly as possible. The user experience should not be ruined by smaller issues that would distance the app from its goals.
SnapTrash was a great project to work on and it’s an app with a very important purpose, as it addresses one of the most serious problems that we’re facing currently at a global level. Regarding the development, it was exciting to work with a few new tools, as this was one of the first mobile app developments that I've done. The following are the main takeaways that I've kept from this project.
All in all, those issues are all far behind now and SnapTrash will soon be released. The experience of developing it was fantastic, but I firmly believe that the outcome will be even greater.
If you’re looking for help with mobile or web app development, our team is looking forward to meet you! Drop us a line here!
Found this article useful? You might like these ones too!
Full-stack developer, lunch polls host and proud of having a very specific and rare sense of humour that is misunderstood. And so are my lunch polls, usually.
People who read this post, also found these interesting:
