React Roadmap

# Goal

Built a simple list of products
- Each iteration will have its own **pull request** to master
- Each commit will be **pushed** as soon as possible to prevent blockers
- All in **2 weeks** 😉

## First iteration

Build a shop with a list of products and filters

- Vanila ES6 in front-end
    - Use [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
    - No additional library
    - **Not even for HTTP requests**
- CSS framework of your choice
- Vanila NodeJS 10 **API** in back-end
- JSON file storage
    - Read from disk on **each** request

## Second iteration

Build a shop with **just** a list of products

- React 16.8 in front-end
    - ESLint with AirBnB config for React
    - No state manager (Redux, etc)
    - API fetching done in components
    - Unit & integration tests
- CSS framework of your choice
    - Integrate with React
- Express NodeJS **API**
    - ESLint with AirBnB config for Express
    - Express router
    - Unit & integration tests
- JSON file storage

## Third iteration

On top of the second iteration, add categories and build filters for the list of products

- React in front-end
    - Move **all** API calls to Redux
        - Integration tests
    - Optimise re-renders 😳
- Express NodeJS **API**
    - Implement caching for filters
- Keep JSON file storage

## First test

Backend:

- Express
- JSON storage
- 2 entities (one is child of the other)
- Endpoints:
   - GET list of entities
   - GET child by parent id
- Insert parent
- Insert child
- All tested

UI:

- Fully use the backend that you built
- All tested

ES6:

- Overwritte Array.sort
- Tests

## Second test

Backend:

- Express
- 1 entity
- Endpoints:
   - GET entity list
   - Update entity
- Live updates through websockets on entity list
   - If one user updates one entity, all other users see that change in the list
- All tested

UI:

- Fully use the backend that you've built
- Use one of the following patterns: render props, HOC, hooks
- All tested

ES6:

- Overwritte Object.assign
- Tests

## Third test

Tick tack toe multiplayer websockets
- React
- Express