Skip to content

full stack application for children to learn about electronic waste

Notifications You must be signed in to change notification settings

revyrob/operation-mother-earth

Repository files navigation

👩‍💻 Operation Mother Earth

Operation Mother Earth is a full stack application for children to learn about electronic waste. It is a multi-page React application which uses MongoDB as the database. There are 3 sections to the application.

Section 1: Storyboard Game Children can follow a simple story/game and test their knowledge on electronic waste. The game scores the user at the end of the game and encourages them to play again if they have a low score.

Section 2: Electronic Waste Recycling Center This section geolocates the client (with their permission). Geolocation was chosen because the user I intend to target is young and may spell their location incorrect or not know it. With the geolocation the appliation searches the Google API to find e-waste centers within a 30km radius of their location. The default location is central Vancouver. The client can also add e-waste centers to the map and it uses Google Geocode to find the lattitude and longitude of the client's location and add it to the map. The new center will be posted right away.

Section 3: Education - Videos and Q&A The Education section has videos about electronic waste and circular economty (targetting to children). There are also videos of clearing data off your device so you can safely recycle it, this is targetted towards the parents. The Education sections also has a Q&A sections with questions and their answers and a form that the client can fill out and add a question, which will be answered later but is posted right away.

🚀 Deployed site

https://operation-mother-earth.netlify.app/

📸 Images

OME

🎥 Demo Video

Video

💻 Built with

  • React
  • MonogDB
  • Mongoose
  • Express
  • Axios
  • Node
  • SASS
  • BEM
  • Formik
  • Framer-motion
  • React-router-dom
  • 🛠️ Installation Steps:

    1. To start using this app you first need to clone the repository:

      git clone [email protected]:revyrob/operation-mother-earth.git

    2. Then you will need to install all the required packages for the application. Run this command (if you're using npm):

      npm i

    3. To run the frontend and the backend:

      npm run dev

    👩‍💻 Things to work on

  • The added centers are not added to the list, only to the map
  • Make a selection at the beginning for the user to choose French or English
  • There to be an email to myself and check the centers and the questions before they are added to the app
  • The Google Maps is turned off because I am not paying for it
  • Test in schools