LITTER.LY

Litter.ly: Creating a modern social network and trendy geolocation service for cleaning up our communities.

Comment 1

Pitch: Litter.ly: Creating a modern social network and trendy geolocation service for cleaning up our communities.

THE PROCESS:

Inspiration

Even as we drove into the Seattle region for this year's hackathon, we looked out the car windows and saw mounds of litter, garbage, and rubbish piling certain areas of the city, taking away from the beauty of the region. After hearing this year's prompt, we both immediately jumped to the idea of organizing an incentivized, fun, modern community program and utility based around cleaning up these areas and spreading awareness of the issue of litter around the puget sound region.

What it does

LITTER.LY is at its core an online social network built to organize community cleanup projects around the region. The home page features a collection of posts, which are all cleanup opportunities available to people in the region. The posts list the location, the severity (e.g how many people the site of pollution impacts), the description of the pollution site, the time it was reported, and how many people there are currently signed for the cleanup (the demand). Built into each post are features for liking, signing up to join the effort, viewing more info, or sharing the post to spread the word. LITTER.LY also has a geolocation service and webpage linked to the network and all the posts, with all the locations plotted around an interactive map where users can click on locations to view more info, or report a pollution site to the service for people to join and help to clean up.

How we built it

We built Litter.ly using a NodeJS/Express JS backend and TAFFY.js-based database. We developed a server-side REST API to route all requests of the front-end to manage and query the database, using a secure HTTPS tunneling service (ngrok) to deploy the server functionality to the web. The database indexes all the fields and keys used to store the website data (types of data listed above in "What it does). We built the frontend using MaterialUI and React to manage all the posts and query the server for all the necessary information about the pollution and cleanup projects, and we used Bootstrap + the Leaflet.js geolocation and map API to create the interactive map and pollution location service / webpage. We organized all our code diligently with Git + GitHub, proper project directory structuring, VSCode, and our cloud accounts. We deployed the Litter.ly frontend using NodeJS and JavaScript, using ReactJS and Material to structure it.

Challenges we ran into

We ran into various problems including the CORS error (Cross Origin Resource Sharing), which we had to bypass by using proxies. We faced various frontend issues with styling the page for it to look decent. There were various issues with finding and setting up a reliable database for us to use, and creating the proper connection between our API and our frontend.

Accomplishments that we're proud of

We are proud of the way our frontend looks, the map creation used in the backend, the reliability of the database, and scalability of the application.

What we learned

We learned to work together and create a massive functional full stack application that manages a proper social network and a geolocation service.

What's next for LITTER.LY

We designed it to be extremely scalable, which means it has potential to be turned into a massive social website. Features such as maps, tags, searches, likes, accounts, etc. are all potential features that will be added to LITTER.LY.

Built With

Share this project:

Updates