Tracktik challenge

General infos

App is deployed on Heroku and liveDemo can see at this address. As it is Heroku, be patient cause it can be long if the app is asleep ^^
UI has been partially done with Material UI lib
Unit tests have been done with Jest and Enzyme
a local json server is available and can be run from the server folder with json-server --watch db.json to simulate API calls

For unit testing, I was only able to test the Components generation and create snapshots for comparison. For some reasons, I wasn't able to simulate DOM manipulation with Enzyme, as node targeting was always returning empty, even if debugging the test would show me the generated markup from Enzyme shallow or react-renderer create function... Have it been working, I would have created mock functions with Jest spies and would have tested it with Expect methods.
Also, I decided to play a little with React Hooks and worked with useEffect and useState. As a consequence, there are no Class Components in the project, only Functional Components with state.
As for the UI, I went for Material UI lib but it created a lot of extra markup and some components have become pretty big because of that. On a small project like this, I'd choose Evergreen UI next time as it is more lightweight in my opinion.

Available Scripts

This project was bootstrapped with Create React App.

`npm install`

Install all necessary packages ans stuff

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

`npm test`

Launches the test runner in the interactive watch mode.

`npm run build`

Builds the app for production to the build folder.

Editor configuration

project runs ESlint and Prettier.
In VSCode, install the respective plugins and add the following code to your editor JSON settings to activate auto-save and automatic linting

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": [
    "js"
  ],
  "files.autoSave": "onFocusChange"

fuentesloic / react-api