https://github.com/ineshbose/how-green
Find more sustainable options for your favourite products
https://github.com/ineshbose/how-green
bootstrap chrome-extension flask react typescript vue
Last synced: 6 months ago
JSON representation
Find more sustainable options for your favourite products
- Host: GitHub
- URL: https://github.com/ineshbose/how-green
- Owner: ineshbose
- Created: 2021-11-11T11:17:35.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T23:05:21.000Z (over 2 years ago)
- Last Synced: 2025-02-08T04:46:17.654Z (over 1 year ago)
- Topics: bootstrap, chrome-extension, flask, react, typescript, vue
- Language: Vue
- Homepage:
- Size: 6.12 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://git-scm.com/) installed, however you can also download a [ZIP](https://github.com/ineshbose/how-green/archive/master.zip) instead.
```sh
$ 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](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.
```sh
$ 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](https://www.python.org/downloads/) already installed that also uses the package manager `pip`.
```sh
$ 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.
```sh
$ python -m venv env # name env
$ source env/bin/activate # or env\scripts\activate.bat on Windows
```
### Frontend
```sh
$ yarn # or npm install
$ yarn run serve # or npm run serve
```
### Backend
```sh
$ pip install -r requirements-dev.txt
$ python run.py
```
### Extension
```sh
$ 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)*
```json
{
"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": [
"/**"
]
},
{
"name": "how-green-extension",
"type": "node",
"request": "launch",
"runtimeExecutable": "yarn",
"cwd": "${workspaceFolder}/extension",
"runtimeArgs": [
"start"
],
"skipFiles": [
"/**"
]
}
],
"compounds": [
{
"name": "How Green",
"configurations": [
"how-green-backend",
"how-green-frontend",
"how-green-extension"
]
}
]
}
```
### Dev References
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/getstarted/)
* [`flask-vuejs-template`](https://github.com/gtalarico/flask-vuejs-template)
* [`react-typescript-chrome-extension-boilerplate`](https://github.com/sivertschou/react-typescript-chrome-extension-boilerplate)
## Developed With
- [Flask](https://flask.palletsprojects.com/en/2.0.x/)
- [Flask-RESTX](https://flask-restx.readthedocs.io/en/latest/)
- [React](https://reactjs.org/)
- [React-Bootstrap](https://react-bootstrap.github.io/)
- [Vue](https://vuejs.org/)
- [BootstrapVue](https://bootstrap-vue.org/)
- [Chart.js](https://www.chartjs.org/)
## Team Members
- Anna Berry
- Hector Jones
- Inesh Bose
- Marc Auf der Heyde
- Stephen Connolly
## Screenshots
### Extension
### Frontend
