Clean Spaces

A mobile app that let's users report areas of trash in their community and also see their's and other's reports on a shared map. Community groups and individuals can go and clean it up for points.

Comment 1

Inspiration

We decided to take on the environmental and sustainability challenge because, especially lately, it's been affecting us in ways we can and can't see. Our team's goal was to tackle something we can see and tangibly fix... trash. We were inspired by the amount of undesired litter in areas we like to hang out, pass by on our evening jogs and in our very own yards. Picking up litter is a simple action that can leave a huge impact on our community and our planet. It's the most do-able deed average people can do for our planet and sustainability, and you can see results instantly. We wanted to create an app that would allow us to not only track and report areas where there is unwanted trash, but help involve individuals of all ages, organizations and whole communities in the green activity. An application that connects, educates and brings us together!

How I built it

Danielle started off building a wireframe using figma. This helped us visualize our application and what features we were going to add. After completing that, we were thinking that Javascript would be a good place to start, but then quickly realized that web applications are far less convenient and portable than mobile apps. Virath has used reactJS before, but not react-native which is mainly used to build mobile applications. Virath started watching Youtube tutorials about react-native, and that lead us to xCode. Virath watched xCode tutorials and started off demoing react-native applications. After feeling confident, we started our 'Clean Space' application.

Challenges I ran into

We faced a lot of challenges. Setting up react-native + xCode, we came across a lot of bugs. These bugs mainly came from cross-versioning(?) of react-native. Installing 5.0, then accidentally 4.0 repetitively caused issues. Libraries like react-native-elements for icons also was an issue that caused a bug due to duplicate resource targeting at build time when running the simulator. Implementing Google's Map API was a first time for all of us, too. We ran into a lot of configuring troubles while installing it into our application. The biggest challenge that we came across was google's auto completion api. It was an important feature for users to add their report locations. It persistently wouldn't function properly, and so we left it to do other tasks. We never got to get back to it due to time, but we're definitely going to invest some time again after the Hackathon.

Accomplishments that I'm proud of

We're very proud at challenging ourselves for the last 48 hours. We found a problem in our local community that involved the environment, and formulated a solution in a form of an app. We learned so many new technologies,techniques, and completed what we wanted to (except for the google's auto completion).

What I learned

We learned that even though it seems like bugs can be a blackhole, there's always a solution and when we find it it's such a great feeling. Our main developer, Virath learned a lot about react-native, xCode, and react-redux. They are definitely strong tools and libraries that he will definitely continue implementing. Danielle, who worked mainly on UX design, some front-end aspects and developing the wireframe, developed her UX-design skills especially on figma and also participated and enjoyed learning React-Native concepts and coding.

What's next for Clean Spaces

Definitely going to back to implement the auto-completion feature in reports and contributions. Another thing we wanted to implement was a database. Then, after that, we want to try and upload it to our own devices and try it out. There's a lot that this application could expand upon like including a ranking system for the top cleaners, and we're excited to complete it for actual production use.

Share this project:

Updates