Skip to content

Find more sustainable options for your favourite products

Notifications You must be signed in to change notification settings

ineshbose/how-green

Repository files navigation

How Green logo

How Green?

GitHub deployments GitHub Workflow Status GitHub Workflow Status

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

Developed With

Team Members

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

Screenshots

Extension

Extension showing score Extension showing alternatives
Extension with text on tooltips due to limited space Extension in loading state

Extension on non-tesco page

Frontend

Product score Product alternatives
Product visualisations (1/2) Product visualisations (2/2)
Home page Loading state