Development setup

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = spaces
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,40 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest/globals": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "plugins": [
+    "react",
+    "jest"
+  ],
+  "rules": {
+    "prettier/prettier": "warn",
+    "no-unused-vars": "warn",
+    "react/prop-types": "warn"
+  }
+}

.github/CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing
+
+We're using [GitHub Issues](https://github.com/cmdalbem/ciclomapa/issues) for our backlog. Feel free to take a look around and chose the task you want. Use the tags at your advantage:
+
+- `complexity` tags tell you how difficult a task *probably* is.
+- `good first issue` is the perfect place to start if you're new to the project, or to coding itself.
+- `help wanted` are issues where external help is currently more needed.
+
+After you've chosen your task, you have no doubts on it and you're ready to start coding, follow these steps:
+
+1. Fork this repository.
+2. Create a branch: `git checkout -b <branch_name>`.
+3. Make your changes and commit them: `git commit -m '<commit_message>'`
+4. Push to the original branch: `git push origin <project_name>/<location>`
+5. Create the pull request.
+
+Alternatively see the GitHub documentation on [creating a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
+
+---
+
+## Visual Studio Code
+
+### Settings
+
+`.vscode/settings.json`
+```
+{
+  ...
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  ...
+}
+```
+
+### Extensions
+
+#### [EditorConfig](https://editorconfig.org/)
+
+`code --install-extension EditorConfig.EditorConfig`
+
+#### [ESLint](https://eslint.org/)
+
+`code --install-extension dbaeumer.vscode-eslint`
+
+#### [Prettier](https://prettier.io/)
+
+`code --install-extension esbenp.prettier-vscode`

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -1,4 +1,4 @@
-![Mockups of different devices showing the app](./mockups.png)
+![Mockups of different devices showing the app](./.github/mockups.png)
 
 
 # CicloMapa
@@ -31,7 +31,7 @@ The basic premise is that the OSM Overpass API is *very* slow and we couldn't hi
 
 We store a mirror of the OSM data in a Firebase Database. Any user (possibly an OSM contributor) can manually update this data, which will automatically update the Database.
 
-![A diagram of the system architecture and how it communicates with external services](./arch.jpg)
+![A diagram of the system architecture and how it communicates with external services](./.github/arch.jpg)
 
 
 # Getting started
@@ -64,21 +64,9 @@ yarn run deploy
 
 ## Contributing
 
-We're using [GitHub Issues](https://github.com/cmdalbem/ciclomapa/issues) for our backlog. Feel free to take a look around and chose the task you want. Use the tags at your advantage:
+Thanks for considering contributing to CicloMapa!
 
-- `complexity` tags tell you how difficult a task *probably* is.
-- `good first issue` is the perfect place to start if you're new to the project, or to coding itself.
-- `help wanted` are issues where external help is currently more needed.
-
-After you've chosen your task, you have no doubts on it and you're ready to start coding, follow these steps:
-
-1. Fork this repository.
-2. Create a branch: `git checkout -b <branch_name>`.
-3. Make your changes and commit them: `git commit -m '<commit_message>'`
-4. Push to the original branch: `git push origin <project_name>/<location>`
-5. Create the pull request.
-
-Alternatively see the GitHub documentation on [creating a pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
+Check out our [Contribution Guide](.github/CONTRIBUTING.md).
 
 
 ## Contact

package.json

@@ -30,11 +30,18 @@
   },
   "scripts": {
     "start": "craco start",
+    "lint": "eslint src --max-warnings=0",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject",
     "predeploy": "yarn run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "src/**/*": [
+      "yarn lint --fix"
+    ]
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -50,5 +57,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.16.7",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "husky": "^7.0.0",
+    "lint-staged": "^12.3.4",
+    "prettier": "2.5.1"
   }
 }