{"id":16260965,"url":"https://github.com/ineshbose/how-green","last_synced_at":"2026-01-12T02:10:20.451Z","repository":{"id":38212370,"uuid":"426972868","full_name":"ineshbose/how-green","owner":"ineshbose","description":"Find more sustainable options for your favourite products","archived":false,"fork":false,"pushed_at":"2023-10-23T23:05:21.000Z","size":6415,"stargazers_count":0,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T04:46:17.654Z","etag":null,"topics":["bootstrap","chrome-extension","flask","react","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ineshbose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-11T11:17:35.000Z","updated_at":"2023-10-08T18:18:37.000Z","dependencies_parsed_at":"2024-10-27T21:36:59.195Z","dependency_job_id":"ab20b45d-d7d6-40e2-9477-aa463440c1f1","html_url":"https://github.com/ineshbose/how-green","commit_stats":{"total_commits":53,"total_committers":6,"mean_commits":8.833333333333334,"dds":0.5471698113207547,"last_synced_commit":"c92934088497bb00d06086db3d572fe39bafce79"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ineshbose%2Fhow-green","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ineshbose%2Fhow-green/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ineshbose%2Fhow-green/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ineshbose%2Fhow-green/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ineshbose","download_url":"https://codeload.github.com/ineshbose/how-green/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246827758,"owners_count":20840464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","chrome-extension","flask","react","typescript","vue"],"created_at":"2024-10-10T16:21:58.640Z","updated_at":"2026-01-12T02:10:15.419Z","avatar_url":"https://github.com/ineshbose.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cp align=\"center\"\u003e\n        \u003cimg alt=\"How Green logo\" src=\"assets/logo.svg\" height=\"250px\"\u003e\n        \u003ch3 align=\"center\"\u003eHow Green?\u003c/h3\u003e\n        \u003ca href=\"https://how-green.herokuapp.com\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub deployments\" src=\"https://img.shields.io/github/deployments/ineshbose/how-green/how-green?style=flat-square\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://github.com/ineshbose/how-green/actions/workflows/test-vue.yml\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/workflow/status/ineshbose/how-green/Test%20frontend?style=flat-square\u0026label=frontend\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://github.com/ineshbose/how-green/actions/workflows/test-api.yml\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/workflow/status/ineshbose/how-green/Test%20backend?style=flat-square\u0026label=backend\"\u003e\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\nHow Green? is an application, created for the Human Computer Interaction (H) Coursework, aiming to provide awareness about green shopping.\n\n## Getting Started\n\n### Prerequisites\n\n#### Cloning this Repository\n\nTo clone this repository, you need to have [Git](https://git-scm.com/) installed, however you can also download a [ZIP](https://github.com/ineshbose/how-green/archive/master.zip) instead.\n\n```sh\n$ git clone https://github.com/ineshbose/how-green.git\n$ cd how-green\n```\n\n#### Node.js \u0026 NPM/Yarn\n\nThis project uses two Node.js frameworks, and in order to run those, you need to have [Node.js](https://nodejs.org/en/download/) installed which will include `npm`. Furthermore, it is **strongly recommended** to install [Yarn](https://classic.yarnpkg.com/lang/en/); issues with `npm` are not to blamed here.\n\n```sh\n$ npm install --global yarn\n# Make sure npm bin is in your PATH, eg (C:\\User\\...\\AppData\\Roaming\\npm)\n```\n\n#### Python \u0026 PIP\n\nYou should have [Python 3](https://www.python.org/downloads/) already installed that also uses the package manager `pip`.\n\n```sh\n$ python --version  # or python3 --version\n$ pip --version     # or pip3 --version or python -m pip --version\n```\n\n##### Virtual Environment\n\nIt is good practice that you create a virtual environment before hand to install packages and get the project running.\n\n```sh\n$ python -m venv env        # name env\n$ source env/bin/activate   # or env\\scripts\\activate.bat on Windows\n```\n\n### Frontend\n\n```sh\n$ yarn              # or npm install\n$ yarn run serve    # or npm run serve\n```\n\n### Backend\n\n```sh\n$ pip install -r requirements-dev.txt\n$ python run.py\n```\n\n### Extension\n\n```sh\n$ cd extension\n$ yarn              # or npm install\n$ yarn run start    # or npm run start\n```\n\nThe extension will be in `dist/` with `manifest.json` that can be added to your browser.\n\n### `launch.json` (convenient option)*\n\n```json\n{\n    \"configurations\": [\n        {\n            \"name\": \"how-green-backend\",\n            \"type\": \"python\",\n            \"request\": \"launch\",\n            \"program\": \"${workspaceFolder}/run.py\"\n        },\n        {\n            \"name\": \"how-green-frontend\",\n            \"type\": \"node\",\n            \"request\": \"launch\",\n            \"runtimeExecutable\": \"yarn\",\n            \"cwd\": \"${workspaceFolder}\",\n            \"runtimeArgs\": [\n                \"serve\"\n            ],\n            \"skipFiles\": [\n                \"\u003cnode_internals\u003e/**\"\n            ]\n        },\n        {\n            \"name\": \"how-green-extension\",\n            \"type\": \"node\",\n            \"request\": \"launch\",\n            \"runtimeExecutable\": \"yarn\",\n            \"cwd\": \"${workspaceFolder}/extension\",\n            \"runtimeArgs\": [\n                \"start\"\n            ],\n            \"skipFiles\": [\n                \"\u003cnode_internals\u003e/**\"\n            ]\n        }\n    ],\n    \"compounds\": [\n        {\n            \"name\": \"How Green\",\n            \"configurations\": [\n                \"how-green-backend\",\n                \"how-green-frontend\",\n                \"how-green-extension\"\n            ]\n        }\n    ]\n}\n```\n\n### Dev References\n\n* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)\n* [Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/getstarted/)\n* [`flask-vuejs-template`](https://github.com/gtalarico/flask-vuejs-template)\n* [`react-typescript-chrome-extension-boilerplate`](https://github.com/sivertschou/react-typescript-chrome-extension-boilerplate)\n\n## Developed With\n\n- [Flask](https://flask.palletsprojects.com/en/2.0.x/)\n- [Flask-RESTX](https://flask-restx.readthedocs.io/en/latest/)\n- [React](https://reactjs.org/)\n- [React-Bootstrap](https://react-bootstrap.github.io/)\n- [Vue](https://vuejs.org/)\n- [BootstrapVue](https://bootstrap-vue.org/)\n- [Chart.js](https://www.chartjs.org/)\n\n## Team Members\n\n- Anna Berry\n- Hector Jones\n- Inesh Bose\n- Marc Auf der Heyde\n- Stephen Connolly\n\n## Screenshots\n\n### Extension\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/product_page_with_score.png\" alt=\"Extension showing score\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/product_page_with_alternatives_hwindow.png\" alt=\"Extension showing alternatives\" /\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/extension_tooltips.png\" alt=\"Extension with text on tooltips due to limited space\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/extension_loading.png\" alt=\"Extension in loading state\" /\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd colspan=\"2\"\u003e\n        \u003cdiv align=\"center\"\u003e\n            \u003cp align=\"center\"\u003e\n                \u003cimg src=\"assets/final/extension_homepage.png\" alt=\"Extension on non-tesco page\" /\u003e\n            \u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Frontend\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/product_score_view_more.png\" alt=\"Product score\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/product_alternatives_view_more_hwindow.png\" alt=\"Product alternatives\" /\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/visualisations_1.png\" alt=\"Product visualisations (1/2)\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/visualisations_2.png\" alt=\"Product visualisations (2/2)\" /\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/landing_page.png\" alt=\"Home page\" /\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003cimg src=\"assets/final/product_page_loading_tablet.png\" alt=\"Loading state\" /\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fineshbose%2Fhow-green","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fineshbose%2Fhow-green","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fineshbose%2Fhow-green/lists"}