search

FAC-Sixteen / RE4.W

https://recycling-heroes.netlify.com/
1 stars 2 forks source link

readme

:seedling: RE4.W: Recycling Heroes

Netlify Status

https://recycling-heroes.netlify.com/

Recycling Heroes homepage

About

The Problem: Lots of potential recyclables are thrown in the wrong bin - people just aren't educated enough about this. It would be good to educate children from a young age in what can and can't be recycled.

The Solution: Recycling Heroes is an interactive, educational game for primary school students and their teachers that will better student understanding of recycling and environmental concerns.

image alt

Tech Stack

The App

Currently the app is a Minimum Viable Product (MVP) primarily focussing on the drag and drop game and educating kids with tips and facts of what they can and how they can recycle certain items.

The app loads data from an external database to populate a game. The game requires the user to drag and drop rubbish items into the correct bin. At the end of the game, the user can see their score, and click on items to see facts about the rubbish they just sorted.

User Journeys

User Stories

Student - [ ] I want to be able to search for different products in order to understand if they are recyclable - [x] I want to know if a product is recyclable through playing a game - [x] I want to be able to find out additional information about the product through playing a game - [x] I want to see a fact that I can understand & visualise - [x] I would like to have visual aids to help me understand the information - [x] I want to get scores for answering questions correctly - [ ] I would like to be able to contribute my score to our overall class score - [ ] I want to be able to have the same categories shown to me multiple times in order to help me remember them (frequency of 8) - [ ] I would like to have an introduction to what recycling is, and what happens to waste when things are not recycled #### Stretch Goals - [ ] I would like learn about how much water goes into making different types of food - [ ] I would like to learn about wider environmental issues outside of recycling
Teacher - [x] I want my students to be able to play the game by themselves - [ ] I want my students to login to the app with their name / pin / password - [ ] I want to be able to register my class in order to keep track of our score - [ ] I want my students to be able to use the app at different times and results tracked - [x] I want the students to be able to easily follow the app / story line without supervision - [ ] I want to be able to have an overview of all the questions and answers #### Stretch Goals - [ ] I would like to be able to see the scores / time of use the students have on the app

Prototyping

Prototype built in Figma

Showcases idea of the completed app, including stretch goals such as leaderboards, character creation, a comic-based story mode and a 'recycling cave' where you can look up what you can and can't recycle.

Leaderboards

Character Creation

Adventure Mode

Recycling Cave

How to install a local version of Recycling Heroes:

Instructions 1. Clone this repo onto your local machine ```git clone https://github.com/FAC-Sixteen/RE4.W.git``` 2. Install dependencies ```npm i``` 3. Start local server ``` netlify dev ``` 4. Open your browser to: *https://localhost:8888* :heavy_plus_sign: See our test results ``` npm devTest ``` The app does require environment variables to run using the Airtable API key.

ToDo

If we had more time, we would...