Welcome To Project Clean-up

This is the repository for the front end of Project Clean-up, an app created as a final project in the School of Code's Bootcamp 12 (25 April - 16 August 2022). If you'd like to see the back-end, please check out the git repository.

Deployed on vercel: https://projectcleanup.netlify.app/

🤔 The Problem

Pollution and litter is a growing environmental crisis. Animals can choke on or ingest litter, suffocate in plastic bags, get entangled in elastics and plastics, or suffer injuries from discarded glass, metals and hooks. It can also present a danger to plant life, with flammable materials presenting a fire hazard, leak contaminants which can damage plants and inhibit their growth, or reduce light availability and moisture.

🧠 Our Solution

Our aim is to help protect the wildlife and beauty of our green spaces by reducing litter and so the hazards it presents. Project Clean-Up is a full-stack app which enables people to join and create litter clean-up events in their communities—or further afield, if that's what takes their fancy!

🛠️ How It Works

All of the clean-up events are stored in a database. The front-end makes requests to the database to display clean-up statistics, and populate the front page map with all events. Users can choose to join an event without registering, or register using Auth0 to start their own event⁠—which is then posted to the database and so visible on the front page map. After an event, the host can log their clean and submit the number of volunteers in attendance, and the amount of litter collected, which is then reflected in the statistics displayed on the page. A weather widget is included, along with advice for various weather conditions, so that users can ensure they are adequately prepared for the Great British weather on the day of their clean-up!

Authors (aka, the Environment Variables)

Click our names to view our GitHub Profiles

• Emma Gill

• Amira Gucher-Blackman

• Blake Lawrence

• Edgaras Markunas

• Simran Rai

• Jena Zubaydi

App Features

The app offers a number of features to achieve its goal of helping users join and create litter clean-up events:

• 🗺️ Interactive maps, so users can locate existing clean-ups, or select a location to start their own;

• ⛅ A weather widget, to allow users to check the weather for an upcoming event and prepare accordingly;

• 📱 Responsive design, so the app can be used just as easily on mobile devices as it is on computers;

• 💽 A custom database, which stores all clean-up events, and responds to HTTP requests via our back-end;

• 🔒 User authentication, to minimise spam, irrelevant or malicious postings, and to facilitate future features.

Screenshots

Landing Page	Forms

APIs

• Leaflet for the interative maps
• Open Weather map for the weather widget

Installation 💻

Clone the front-end and back-end repositories to your computer:

https://github.com/SchoolOfCode/environment_variables_frontend
https://github.com/SchoolOfCode/environment_variables_backend

Install the dependancies for both with the following command:

npm install

To run this project, you will need to add the following environment variables to your front-end .env file:

NEXT_PUBLIC_WEATHER_KEY= <place your api key from open weather map here>

NEXT_PUBLIC_DATABASE_URL= <place your api key from Heroku here>

You will also need to add your Auth0 applications keys to your development and/or deployment environments. Please refer to the Auth0 docs for further details on how to do this.

Tech stack

Front-end

Testing

Colour Reference

We chose colours which would reflect the goals and theme of our app, using coolers to help generate colour palettes. Blues and greens are strongly associated with the environment, and we chose a dark green so we would have a high contrast against a light background for accessibility and ease of use.

Background Colour	Primary Colour	Accent Colour
#E6E5E4	#004F54	#FF9505

Challenges and how we overcame them

There were numerous challenges on this project, mostly because we are a team of junior developers grappling with new technologies. In general, we used our skills at navigating documentation and parsing error messages

Next.js and Leaflet

• Using Next.js and Leaflet together was a challenge because

What we took from this experience

Our goal for this project was to work together well as a team, learn as much as we could, and at the end of it, present a functional and attractive app. We enabled this by deciding on a team manifesto at the very start, which included important topics like how we wanted to approach discussions, make decisions, and resolve conflicts. This

Furthermore, working in an Agile environment and taking on an iterative approach to our project through user feedback and revision was an invaluable experience for us and will surely put us all in good stead for when we take on our first positions as developers.

Given more time, there are alot more features and functionality we would implement, but we worked hard at all times and we are very pleased with the end-result.