GesDec

GesDec is an app which detects the sign gestures. The app is deployed in herokuapp https://gesdec.herokuapp.com/
API Repo: https://github.com/NabinKawan/GesDec-api

Features:

Detect sign gestures
Send feedback
Download the model
View model summary,confusion matrix, loss graph

Run project

* git clone https://github.com/NibanK/GesDec-web.git
* npm install 
* npm run dev

Eslint and prettier setup

What it does ?

Eslint

Improves quality of the code by improving readability, removing errors before execution

Prettier

Formats your code

Installing

npm install --save-dev @babel/eslint-parser eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-import

Here we added eslint for code-quality rules and we will follow the Airbnb js/react standard for that. Also, we added prettier which will format your code to follow a specific set of formatting rules. Eslint-plugin-prettier helps to use prettier as a plugin for eslint. And the job of eslint-config-prettier is to turn off all ESLint rules that are unnecessary anymore or might conflict with Prettier rules.
Add .prettierrc.json file:
```
{
    "printWidth": 100,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all"
}
```
The formating rules will be taken from this file. You can also change some default rules as your requirement.
Add .prettierignore file to ignore formating for the specific files:
```
node_modules
build
.gitlab-ci.yml
.github
README.md
```

For eslint add .eslintrc

{
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "sourceType": "module",
        "requireConfigFile": false,
        "allowImportExportEverywhere": false,
        "codeFrame": false
    },
    "extends": ["airbnb"],
    "env": {
        "browser": true,
        "jest": true
    },
    "rules": {
        "max-len": ["error", { "code": 100 }],
        "prefer-promise-reject-errors": ["off"],
        "react/jsx-filename-extension": ["off"],
        "react/prop-types": ["warn"],
        "no-return-assign": ["off"],
        "no-unused-vars":"warn"
    },
    "plugins": ["prettier"]
}

You can also ignore linting for specific files by adding .eslintignore

In package.json add below portion in scripts section
```
"scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
},
```
Then you can lint and fix whole code using this by npm run lint or npm run lint:fix
Now choose default formatter as eslint

Typescript setup

Installation

npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest Rename atleast one the file to .tsx/ts so that after starting server it will generate tsconfig.json file automatically.

NabinKawan/GesDec-web