View the project on Render here
Littering is an ever-increasing worldwide problem. Chances are, you’ve seen litter scattered along roadsides, floating in waterways, or blowing across a parking lot. The well-being of people, animals, and the environment is compromised by litter.
Clean Up Cork City is a community-driven app that will allow people to create a map of litter dumps around Cork City. People can register on the website and add details about a location in the city that is polluted with litter. Events are organised for the volunteers who will come to one of the locations and clean up the litter.
Users can search the Clean Up Cork City database upon their first use of the application. No registration is necessary to search and view the location details.
Users who are interested can sign up and contribute to the map. The user will be able to add new locations, as well as mark them as clean. The locations that the user uploaded are saved on the user's profile page and can be edited or deleted easily.
The following are the features provided in the Clean Up Cork City application.
-
Each page features a navigation bar that takes two shapes depending on if the user is logged in or not. If the user is not logged the navbar includes Home, About, Locations and Log in/Sign up links.
If the user is logged in, the Log in button disappears and a profile icon appears that redirect users to their profile.
On a screen size smaller than a tablet the navbar becomes a collapsible element.
-
Each page features social media links at the bottom. They redirect a user to the social media platform opening it in a new window. The footer remains the same, not depending on the user being logged in or not.
- Users can learn about the purpose of the site on the Home and About page.
-
The locations are sorted in 2 categories - active and cleaned.
-
Active locations represent all the locations that are still not cleaned. A user can see details of each location - address, location picture, who uploaded it and when.
-
Cleaned locations represent all the locations that have been cleaned. A user can see details of each location - address, picture of the location before and after the cleanup, the name of the user who edited it, when was it cleaned and how many people participated in the cleanup.
-
With both lists there is a map showing the locations. The map contains markers representing the locations. When clicked the markers show an info window with the address of the location. When users click on the info window they are redirected to the location on the list.
-
Registering users are asked to create a username, provide an email address, date of birth and home address.
-
Users have to log in in order to contribute to the map of locations.
-
Users profile page contains a list of all the locations the user uploaded, with an option to edit or delete them.
-
There is an event section on the profile that contains a list of all future events.
-
Option to log out.
-
Users who are logged in can add a location or mark an existing location as cleaned.
-
The location is validated to make sure it doesn't already exist in the database and that it is an actual address in Cork City.
- The possibility for registered users to edit their details, such as password or username.
- Email authentification.
- Home:
- Locations:
- People who want to help their community become litter free and a safer place to live.
- People who are worried about the animal and wildlife wellbeing.
- Environmentally conscious people.
-
Anna, “In my free time, I love walking next to the River Lee, but I have noticed there is more and more trash around the walking paths. I think it's a big problem, not just for the wildlife living by the river but for us people as well. I would like to do something about it but don't know where to report this problem.”
-
Chris, “I go for a walk with my dogs every Sunday on the outskirts of Cork but lately I have been reluctant to let them off the leash because there are so many places where people throw waste and rubbish and I am worried they will eat something that will make them sick. I think litter is a big problem in Cork and I would love to do something about it but I don't know where to start or what to do.”
-
Moira, “I haven't been to the local park for ages because it has become a place where people drink and leave empty bottles and rubbish. I heard some people tried to clean it up but don't know if they managed to do it.”
Testing information can be found in the separate testing file that can be accessed here.
Database information can be found in the separate file that can be accessed here.
- HTML5
- CSS3
- JavaScript
- Python (3.6)
- BootStrap4 to assist with the structuring and responsiveness of the site
- JQuery for DOM manipulation.
- Fontawesome (4.7.0) library for custom icons
- Flask framework to build the web application
- Flask-Pymongo library to connect to the MongoDB database from the web application
- Geocomplete - jQuery Geocoding and Places Autocomplete Plugin
- Google Fonts for the fonts used throughout the page
- Google Maps - geo-location API
- Jinja - templating language for Python
- Git for version control
- Github to store repositories of the project
- Render for hosting the deployed app
- MongoDB for storing the database
This project has been pushed and deployed to the cloud application platform Render.
- TEMPLATED: CSS, HTML5 & Responsive site template Epilogue by TEMPLATED used throughout the project: index.html basic design, buttons, footer.
- Pretty Printed: a tutorial on Save and Retrieve Files In a MongoDB With Flask-Pymongo.
- Confetti animation: The code from codemyui.com was used to create the confetti animation.
- Example code to retain the scroll position of a scrollable area when pressing the back button found on Stack Overflow - link
- Example code to create a list that contains the dates of all the Saturdays starting from today found on Stack Overflow - link
- The idea for this website came from an amazing project World cleanup day
- Inspiration for the README.md came from trisdauvergne/milestone-project-03 and taikatta/Milestone3-Konyvkucko
-
Images were taken from freely-usable source Pexels:
- litter.jpg - Photo by Catherine Sheila from Pexels.
- plastic.jpeg - Photo by Magda Ehlers from Pexels.
- volunteers.jpeg - Photo by Belle Co from Pexels.
-
cork.jpg - Image found here
-
map.jpg - Image found here
-
Animation Illustration GIF By Jessica Riccardi found here
I would like to thank my mentor Brian Macharia for his advice and help with this project.