Skip to content

Latest commit

 

History

History
188 lines (114 loc) · 10 KB

README.md

File metadata and controls

188 lines (114 loc) · 10 KB
Raw

View the project on Render here

Overview

Purpose of the application

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.

How does it work?

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.

Features

The following are the features provided in the Clean Up Cork City application.

Navigation bar and Footer

  • 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.

Home & About page

  • Users can learn about the purpose of the site on the Home and About page.

Locations

  • 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.

    Location details

     

  • 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.

    Cleaned location details

     

  • 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.

    Locations

     

User Login and Registration

  • 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.

    Login

     

User Profile

  • Users profile page contains a list of all the locations the user uploaded, with an option to edit or delete them.

    Profile

     

  • There is an event section on the profile that contains a list of all future events.

    Events

     

  • Option to log out.

Adding locations

  • 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.

    Add location

Features Left to Implement

  • The possibility for registered users to edit their details, such as password or username.
  • Email authentification.

Wireframes

  1. Home:
  1. Locations:

Site Users

Who is the site focused on?

  1. People who want to help their community become litter free and a safer place to live.
  2. People who are worried about the animal and wildlife wellbeing.
  3. Environmentally conscious people.

The following user stories were used to design the website:

  1. 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.”

  2. 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.”

  3. 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

Testing information can be found in the separate testing file that can be accessed here.

Database Organisation

Database information can be found in the separate file that can be accessed here.

Technologies

Languages

  • HTML5
  • CSS3
  • JavaScript
  • Python (3.6)

Libraries, frameworks and API's

Hosting and deployment

  • Git for version control
  • Github to store repositories of the project
  • Render for hosting the deployed app
  • MongoDB for storing the database

Deployment

This project has been pushed and deployed to the cloud application platform Render.

Credits

Code

  • 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

Content

Media

  • Images were taken from freely-usable source Pexels:

    1. litter.jpg - Photo by Catherine Sheila from Pexels.
    2. plastic.jpeg - Photo by Magda Ehlers from Pexels.
    3. 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

Acknowledgements

I would like to thank my mentor Brian Macharia for his advice and help with this project.