User Documentation
Since the structure of the app is embedded into a react framework, there will be no installation required as it will run off of a web server. To access the functionalities of GUBER Inc, users will need to use their default web browser’s address bar and search “guber.pages.dev”. The user will then be redirected to our web app and have access to all functionalities.
When users first search for our web app, users will arrive at this particular landing page. At the top left of the page, users can see a GUBER logo. This button can be used as a redirect to the homepage from any component of our website. On the top right of the landing page, users can see a profile icon button. This can be used to access basic profile information and if you are not yet registered, can be used to register with google authentication or manual database login. In the middle of the screen, we have our mission statement which directs the user to our first major button. The green “REPORT” button can be used by users to report any garbage they have spotted. This is yet another redirect button that will be talked about shortly.
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. To sign a user into your app, you first get authentication credentials from the user. These credentials can be the user's email address and password, or an OAuth token from a federated identity provider. Then, you pass these credentials to the Firebase Authentication SDK. Our backend services will then verify those credentials and return a response to the client.
Users can use the manual sign-up option as well. This is also linked with our firebase and all manual signups will be authenticated through our firebase database and not special Google Authentication measures. Once the user has entered an email address and a secure six-character password, they can press the signup button and they will automatically be redirected to the volunteer dashboard.
Users will be redirected to the volunteer dashboard whenever they sign up or sign in to a previously registered account. The volunteer dashboard is used by the web app to display all active garbage pickup volunteering sessions. Users can click the attend button based on the session they would like to volunteer for and they will be redirected.
Once “Attend” is clicked, a popup will occur on the screen confirming the user’s availability and willingness to participate in the cleanup for this location. Users can either close to returning to the previous page or, they can click “Let’s Clean” to confirm their participation.
Events are stored on the database by the address, that way not more than clean up can exist at the same address. This is done such that if a new report comes in while another is still up, the old one would be overridden instead of duplicated.
Once users confirm they want to help clean a particular location, they will be brought to "proof of garbage pickup" page. Once a user has collected trash, they can take a picture using their choice of device. Once the picture is in their storage, users can tap or click the “Upload Image Here” box and a system pop-up will require users to upload an image.
Once users select the image of the trash they collected, they must press submit and wait for the web app to confirm that the upload was done. Once the upload is done, users are taken back to the volunteer dashboard. Meanwhile, the Guber moderators will manually review the submitted image for cleanup approval.
If a user wants to start a garbage pickup event due to a large concentration of waste in a certain geographical area, they can do so by clicking or tapping the “REPORT” button on our home page. Once the report button is clicked or tapped, the web app will redirect users to an event creation page.
The first thing the web app will do if the user’s device has restrictions is asked permission to access the user’s current location. To pinpoint the location of the garbage/waste, the user can click or tap the vicinity of where they currently are. The web app will pinpoint that location for future volunteer dashboard display. Users can also select a satellite view to pick a more accurate location of where exactly the garbage is located.
After the user scrolls down or views the next portion of the form, depending on the length of the screen, they will arrive at this. To verify that there is trash at a certain location, an image will need to be provided from the user’s end. The user will be asked to upload an image, similar to the proof of trash users need to upload when they volunteered. Once the user has uploaded an image, they must then fill out the two fields below. Firstly, the garbage pickup event must be given a park name. Even if the location is not an actual park, the user must give a name that would identify the location through a tool like Google Maps.
Along with that, the user must enter an estimated amount of volunteers that may be needed for the cleanup. Users are asked to assess this estimation conservatively and according to the concentration of garbage in a particular area. All estimations will be assessed by Guber moderators according to pictures submitted and occasionally, private inspections by Guber officials of big events. Once the user has filled this information out, they must click the “Report” button, this is essential in completing the event creation process. Once the report button is pressed, the event will be added to the event stack and will be displayed for all volunteers.