This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.

npm run lint

Runs Eslint to the root folder and fix all the issues that can be handled automatically.

Linter

This project is extending the Airbnb Style Guide eslint rules, and applying custom rules (see package.json) to improve code quality.

Folder structure

• ./src
  • ./assets --> place to store assets like images, fonts, custom icons, etc.
  • ./api --> api calls, grouped by feature: the structure should mimic the api call itself
  • ./components
    • ./__tests__ sample test folder
      • App.test.js --> this way test files are closer to other ones, but in a separate folder in order to keep the folder structure cleaner
    • ./common --> folder containing common components
      • CommonComponent.js
    • ./App --> example of component that could have container
      • App.css
      • App.js --> keep the same name as component folder so we can find it easily when doing a file search
      • AppContainer.js --> container for the App component, adds state
  • ./state --> application state (e.g. redux), if any
    • ./sample-feature --> grouping by feature
      • sample-feature.actions.js
      • sample-feature.reducer.js
      • sample-feature.selectors.js
      • sample-feature.types.js
    • store.js --> configure redux store
  • index.js --> entry point