diff --git a/README.md b/README.md new file mode 100644 index 0000000..0d24356 --- /dev/null +++ b/README.md @@ -0,0 +1,125 @@ +![Project Clean-Up](https://user-images.githubusercontent.com/98705391/184337846-b06b80b3-98d3-40b4-912b-dc429ad54f72.png) +# 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](https://www.schoolofcode.co.uk/) Bootcamp 12 (25 April - 16 August 2022). If you'd like to see the back-end, please check out the [git repository](https://github.com/SchoolOfCode/environment_variables_backend). + +![Earth, map, and map marker emojis](https://user-images.githubusercontent.com/98705391/184339535-2eb89ee6-2c6b-4376-baf3-2f5c4720e582.png) + +### 🤔 **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](https://github.com/SurfingElectron) + +- [Amira Gucher-Blackman](https://github.com/amiragucher) + +- [Blake Lawrence](https://github.com/BlakeLawrence) + +- [Edgaras Markunas](https://github.com/EdMark11) + +- [Simran Rai](https://github.com/srai98i) + +- [Jena Zubaydi](https://github.com/jena-84) + + +## 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](https://github.com/SchoolOfCode/environment_variables_backend); + +- 🔒 **User authentication**, to minimise spam, irrelevant or malicious postings, and to facilitate future features. + + +## Screenshots +|Landing Page| Forms | +|--|--| +| ![Landing page screenshot](https://user-images.githubusercontent.com/64714474/184341409-0a635d8c-ba79-4a27-8ddb-d54dde55dcdb.png) | ![Log a Clean screenshot](https://user-images.githubusercontent.com/64714474/184341488-e399b883-98eb-48e6-9f53-fffadf3fa6c4.png) | +| ![Map screenshot](https://user-images.githubusercontent.com/64714474/184341540-24922844-2518-420f-a5fc-4443f44924c5.png) | ![Start a Clean screenshot](https://user-images.githubusercontent.com/64714474/184341654-116dba21-7ba4-4cf1-9958-c5e324e6c390.png) | + + + +## APIs +- [Leaflet](https://react-leaflet.js.org/) for the interative maps +- [Open Weather map](https://openweathermap.org/api) for the weather widget + + +## Installation 💻 +**Clone the front-end and back-end repositories to your computer:** + +```bash +https://github.com/SchoolOfCode/environment_variables_frontend +https://github.com/SchoolOfCode/environment_variables_backend + +``` + +**Install the dependancies for both with the following command:** +```bash +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= ` + +`NEXT_PUBLIC_DATABASE_URL= ` + +You will also need to add your Auth0 applications keys to your development and/or deployment environments. Please refer to the [Auth0](https://auth0.com/docs) docs for further details on how to do this. + + +## Tech stack +### Front-end +![Javascript mini-banner](https://camo.githubusercontent.com/93c855ae825c1757f3426f05a05f4949d3b786c5b22d0edb53143a9e8f8499f6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a6176615363726970742d3332333333303f7374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d463744463145) +![React mini-banner](https://camo.githubusercontent.com/268ac512e333b69600eb9773a8f80b7a251f4d6149642a50a551d4798183d621/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d3230323332413f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374266c6f676f436f6c6f723d363144414642) +![Next.js mini-banner](https://camo.githubusercontent.com/b7395b00d152dc8f19cec61f582369bd580e31b8ed93d34646ec43aa675baa7c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4e6578742d626c61636b3f7374796c653d666f722d7468652d6261646765266c6f676f3d6e6578742e6a73266c6f676f436f6c6f723d7768697465) +![CSS mini-banner](https://camo.githubusercontent.com/3a0f693cfa032ea4404e8e02d485599bd0d192282b921026e89d271aaa3d7565/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f435353332d3135373242363f7374796c653d666f722d7468652d6261646765266c6f676f3d63737333266c6f676f436f6c6f723d7768697465) +![Tailwind mini-banner](https://i.im.ge/2022/08/11/FGEabT.image-58.png) +![Formik mini-banner](https://i.im.ge/2022/08/11/FGCNkf.Group-18.png) +![Auth0 mini-banner](https://i.im.ge/2022/08/11/FGy2mS.Group-16.png) +![Figma mini-banner](https://camo.githubusercontent.com/4a1038affbb2653ec140936555b3714ddc322526be8567b489e8423a795dea18/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4669676d612d4632344531453f7374796c653d666f722d7468652d6261646765266c6f676f3d6669676d61266c6f676f436f6c6f723d7768697465) +![Netlify mini-banner](https://camo.githubusercontent.com/92dde1e7c42c013a5fce4dfeee0843f06710bfd38a610885e33a273c7eca0d22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4e65746c6966792d3030433742373f7374796c653d666f722d7468652d6261646765266c6f676f3d6e65746c696679266c6f676f436f6c6f723d7768697465) + +### Testing + ![Cypress mini-banner](https://camo.githubusercontent.com/a2cc7362377d69d8ad5147e49f7b269cab69f00509828ce2d583b9dde9130499/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d637970726573732d2532334535453545353f7374796c653d666f722d7468652d6261646765266c6f676f3d63797072657373266c6f676f436f6c6f723d303538613565) + ![Jest mini-banner](https://camo.githubusercontent.com/5ec7b7ed343219da6b2213349bacdc389803950b5298464b35e76f7ab6ccf27d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a6573742d4332313332353f7374796c653d666f722d7468652d6261646765266c6f676f3d6a657374266c6f676f436f6c6f723d7768697465) + + +## Colour Reference +![Colour reference banner](https://i.im.ge/2022/08/11/FGY0w1.Group-19-1.png) We chose colours which would reflect the goals and theme of our app, using [coolers](https://coolors.co/) 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 ![Background colour example](https://i.im.ge/2022/08/11/FGxQ6a.Rectangle-196.png) | #004F54 ![Primary colour example](https://i.im.ge/2022/08/11/FG3lk1.Rectangle-195.png) | #FF9505 ![Accent colour example](https://i.im.ge/2022/08/11/FG3F9m.Rectangle-194.png) +
+
+ +## 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. diff --git a/el-potential-update b/el-potential-update deleted file mode 100644 index c758d11..0000000 --- a/el-potential-update +++ /dev/null @@ -1,14 +0,0 @@ - Button-UI - Carousel-Component - carousel-potential-update - css-start-form -* development - forms - home-css - join-clean-form - main - main-css - main-page-css - our-mission - start-clean-css - start-form-css diff --git a/project-app/components/Forms/JoinClean.jsx b/project-app/components/Forms/JoinClean.jsx index b419a01..91ed276 100644 --- a/project-app/components/Forms/JoinClean.jsx +++ b/project-app/components/Forms/JoinClean.jsx @@ -1,8 +1,8 @@ import React from "react"; -import { useEffect } from "react"; import { Formik, Field, Form, ErrorMessage } from "formik"; import * as Yup from "yup"; -import Link from "next/link"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; export const JoinCleanForm = ({ showModal, setShowModal }) => { const url = process.env.NEXT_PUBLIC_DATABASE_URL || "http://localhost:5000"; @@ -17,9 +17,25 @@ export const JoinCleanForm = ({ showModal, setShowModal }) => { }), }); const data = await response.json(); - alert( - "Thanks for joining a cleanup! Be there 15 mins prior on the day so your host can brief you." - ); + function successToast() { + toast( + `Thanks for joining a cleanup! \n + Be there 15 mins prior on the day for the host's briefing`, + { + position: toast.POSITION.TOP_CENTER, + autoClose: false, + style: { + background: "#239c13", + color: "white", + width: "370px", + fontSize: "16px", + fontWeight: "bold", + paddingRight: "0.5em", + }, + } + ); + } + successToast(); setShowModal(false); }; @@ -47,14 +63,14 @@ export const JoinCleanForm = ({ showModal, setShowModal }) => { Name - { { Submit + {/* End of form. Modal begins. */} diff --git a/project-app/components/Landing/Landing.jsx b/project-app/components/Landing/Landing.jsx index 50aa530..7743ed7 100644 --- a/project-app/components/Landing/Landing.jsx +++ b/project-app/components/Landing/Landing.jsx @@ -15,9 +15,9 @@ const LandingBanner = () => {
-

Project Clean-Up is a place where you can join others to make a difference to our - environment by creating or joining litter clean-ups. They can - be done anywhere from beaches to rivers and even national parks to your +

Project Clean-Up is a place where you can join others to improve the + environment by creating or joining litter clean-ups. They can + be done anywhere—from beaches, rivers, and even national parks, to your very own neighbourhood!

diff --git a/project-app/components/NavGetInvolved/NavGetInvolved.jsx b/project-app/components/NavGetInvolved/NavGetInvolved.jsx index e416308..f4ab6f6 100644 --- a/project-app/components/NavGetInvolved/NavGetInvolved.jsx +++ b/project-app/components/NavGetInvolved/NavGetInvolved.jsx @@ -1,44 +1,51 @@ -import NavButton from "../Landing/NavButton/NavButton" +import NavButton from "../Landing/NavButton/NavButton"; import Link from "next/link"; const NavGetInvolved = () => { - return ( -
-
-
- - - - - - - - - - - - - - - -
+ return ( +
+
+
+ + + + + + + + + + + + + + + +
-
-

If you would like to join a clean-up in your area, click "Join A Clean", and sign up by joining an existing clean on the map. Start a clean-up in your area by clicking the "Start A Clean" button. If you have hosted an event, make sure to log the results of your hard work via the "Log A Clean" button to update the project with how many bags were collected and how many people took part.

-
- +
+

+ If you would like to join a clean-up in your area, click{" "} + "Join a Clean", and sign up with an existing clean + on the map. Start a clean-up in your area by clicking the{" "} + "Start a Clean" button. If you have hosted an + event, make sure to log the results of your hard work via the{" "} + "Log a Clean" button to update the project with how + many bags were collected and how many people took part. +

- ) -} +
+ ); +}; -export default NavGetInvolved; \ No newline at end of file +export default NavGetInvolved; diff --git a/project-app/components/Navbar/NavbarHome.jsx b/project-app/components/Navbar/NavbarHome.jsx index 71ecc56..11f96a8 100644 --- a/project-app/components/Navbar/NavbarHome.jsx +++ b/project-app/components/Navbar/NavbarHome.jsx @@ -29,12 +29,13 @@ const NavbarHome = () => { const menu = ( @@ -46,7 +47,7 @@ const NavbarHome = () => { key: "2", label: ( @@ -57,7 +58,8 @@ const NavbarHome = () => { { key: "3", label: ( - + Join a Clean-up ), @@ -66,7 +68,7 @@ const NavbarHome = () => { key: "4", label: ( @@ -85,7 +87,7 @@ const NavbarHome = () => { return (
-
+
Loading user profile...
diff --git a/project-app/components/Navbar/NavbarLogClean.jsx b/project-app/components/Navbar/NavbarLogClean.jsx index bbf3395..b33ab64 100644 --- a/project-app/components/Navbar/NavbarLogClean.jsx +++ b/project-app/components/Navbar/NavbarLogClean.jsx @@ -30,11 +30,15 @@ const NavbarLogClean = () => { const menu = ( + About ), @@ -42,12 +46,17 @@ const NavbarLogClean = () => { { key: "2", - label: Join a Clean-up, + label: Join a Clean-up, }, { key: "3", label: ( - + Start a Clean-up ), @@ -55,6 +64,7 @@ const NavbarLogClean = () => { ]} /> ); + const { user, error, isLoading } = useUser(); if (isLoading) diff --git a/project-app/components/Navbar/NavbarStartClean.jsx b/project-app/components/Navbar/NavbarStartClean.jsx index 1930923..8d1da5d 100644 --- a/project-app/components/Navbar/NavbarStartClean.jsx +++ b/project-app/components/Navbar/NavbarStartClean.jsx @@ -29,11 +29,15 @@ const NavbarStartClean = () => { const menu = ( + About ), @@ -41,12 +45,17 @@ const NavbarStartClean = () => { { key: "2", - label: Join a Clean-up, + label: Join a Clean-up, }, { key: "3", label: ( - + Log a Clean-up ), diff --git a/project-app/components/OurMission/OurMission.jsx b/project-app/components/OurMission/OurMission.jsx index 4110872..05d4ecf 100644 --- a/project-app/components/OurMission/OurMission.jsx +++ b/project-app/components/OurMission/OurMission.jsx @@ -5,17 +5,17 @@ const OurMission = () => { return (
-

What is Project Cleanup?

+

What is Project Clean-Up?

- Project Clean-Up allows you to start your own clean-up or join an + Project Clean-Up enables you to start your own litter clean-up, or join an existing one. All you have to do is go to the {" "} map {" "}and search for a clean-up in any area you're interested in. If one is available, simply click the map marker, read the details, then - go ahead and join that cleanup. If there aren't any, you could{" "} + go ahead and join that clean-up. If there aren't any, you could{" "} {

Get some friends together, make a family day of it, take your pupils out for an educational excursion, or even take your corporate team for - an authentic team-building day out. -

-

- Whichever you choose, you will be making a positive impact on the - environment. There are so many benefits when getting involved with a - cleanup; not only are you making a massive difference to the planet, - you are also immersing yourself in the great outdoors, keeping active, + an authentic team building experience. Whatever you choose, you will make a positive impact on the + environment. There are many benefits from getting involved with a + clean-up; not only are you making a massive difference to the planet, + you are immersing yourself in the great outdoors, keeping active, and meeting new people—all at the same time.

diff --git a/project-app/components/Stats/Stats.jsx b/project-app/components/Stats/Stats.jsx index cc78655..8026750 100644 --- a/project-app/components/Stats/Stats.jsx +++ b/project-app/components/Stats/Stats.jsx @@ -40,7 +40,7 @@ export default function Stats() { { //Defining state const [weatherObject, setWeatherObject] = useState(); @@ -25,11 +26,25 @@ const Weather = () => { try { const response = await fetch(url); const data = await response.json(); - /* WEATHER OBJECT CONSOLE - DELETE AFTER BUILD */ + /* WEATHER OBJECT CONSOLE - DELETE AFTER BUILD */ // console.log(data); if (response.status === 404) { - alert("Please enter a valid city name"); + + { + toast.error("ERROR: Please enter a valid city name", { + position: toast.POSITION.TOP_CENTER, + style: { + background: "#e13333", + color: "white", + width: "380px", + fontSize: "16px", + fontWeight: "bold", + }, + }); + } + + // alert("Please enter a valid city name!"); } else if (response.status === 200) { setWeatherObject(data); //uncomment the below city State after development stage - means each time you make a change, props cant be found @@ -37,6 +52,14 @@ const Weather = () => { } } catch (error) { console.log(error); + if (error) { + toast("ERROR", { + className: "error-toast", + draggable: true, + position: toast.POSITION.TOP_CENTER, + }); + } + } } @@ -50,15 +73,15 @@ const Weather = () => { Check the Weather

- Before you head out, it's a great idea to check the weather forecast - to make sure you're prepared for your clean-up. + Before you head out, it's a great idea to check the weather forecast to + make sure you're prepared for your clean-up.

- Unsure what to wear or bring with you?{" "} + Unsure what to wear or bring with you?{" "} - - {" "}for some helpful advice! + {" "} + for some helpful advice!

@@ -75,6 +98,7 @@ const Weather = () => { fetchWeather={fetchWeather} city={city} /> +
); diff --git a/project-app/components/Weather/WeatherForecast.jsx b/project-app/components/Weather/WeatherForecast.jsx index 3a3f22b..d319bf8 100644 --- a/project-app/components/Weather/WeatherForecast.jsx +++ b/project-app/components/Weather/WeatherForecast.jsx @@ -102,7 +102,7 @@ const WeatherForecast = ({ weatherObject }) => {

{/* CARD 3 */} -
+

{datConvertor(weatherObject?.list[24].dt)} @@ -121,7 +121,7 @@ const WeatherForecast = ({ weatherObject }) => {

{/* CARD 4 */} -
+

{datConvertor(weatherObject?.list[32].dt)} diff --git a/project-app/components/Weather/WeatherReqs.jsx b/project-app/components/Weather/WeatherReqs.jsx index 2df5446..dc237a1 100644 --- a/project-app/components/Weather/WeatherReqs.jsx +++ b/project-app/components/Weather/WeatherReqs.jsx @@ -6,7 +6,7 @@ const WeatherReqs = () => { return ( <>