How Green?

How Green? is an application, created for the Human Computer Interaction (H) Coursework, aiming to provide awareness about green shopping.

Getting Started

Prerequisites

Cloning this Repository

To clone this repository, you need to have Git installed, however you can also download a ZIP instead.

$ git clone https://github.com/ineshbose/how-green.git
$ cd how-green

Node.js & NPM/Yarn

This project uses two Node.js frameworks, and in order to run those, you need to have Node.js installed which will include npm. Furthermore, it is strongly recommended to install Yarn; issues with npm are not to blamed here.

$ npm install --global yarn
# Make sure npm bin is in your PATH, eg (C:\User\...\AppData\Roaming\npm)

Python & PIP

You should have Python 3 already installed that also uses the package manager pip.

$ python --version  # or python3 --version
$ pip --version     # or pip3 --version or python -m pip --version

Virtual Environment

It is good practice that you create a virtual environment before hand to install packages and get the project running.

$ python -m venv env        # name env
$ source env/bin/activate   # or env\scripts\activate.bat on Windows

Frontend

$ yarn              # or npm install
$ yarn run serve    # or npm run serve

Backend

$ pip install -r requirements-dev.txt
$ python run.py

Extension

$ cd extension
$ yarn              # or npm install
$ yarn run start    # or npm run start

The extension will be in dist/ with manifest.json that can be added to your browser.

launch.json (convenient option)*

{
    "configurations": [
        {
            "name": "how-green-backend",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/run.py"
        },
        {
            "name": "how-green-frontend",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "cwd": "${workspaceFolder}",
            "runtimeArgs": [
                "serve"
            ],
            "skipFiles": [
                "<node_internals>/**"
            ]
        },
        {
            "name": "how-green-extension",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "yarn",
            "cwd": "${workspaceFolder}/extension",
            "runtimeArgs": [
                "start"
            ],
            "skipFiles": [
                "<node_internals>/**"
            ]
        }
    ],
    "compounds": [
        {
            "name": "How Green",
            "configurations": [
                "how-green-backend",
                "how-green-frontend",
                "how-green-extension"
            ]
        }
    ]
}

Dev References

• MDN Web Docs
• Chrome Developers
• flask-vuejs-template
• react-typescript-chrome-extension-boilerplate

Developed With

• Flask
• Flask-RESTX
• React
• React-Bootstrap
• Vue
• BootstrapVue
• Chart.js

Team Members

• Anna Berry
• Hector Jones
• Inesh Bose
• Marc Auf der Heyde
• Stephen Connolly

Screenshots

Extension

Frontend