7. Pure components and storybook

Pure components (all components under webapp/src/component directory) can't use or modify global variables (import history from '../history' useDispatch useSelector), can't make network request (The use of GoogleLoginButton or GoogleMap components), and can't use any components under webapp/src/container directory.

| Resources | | --------- | | Official storybook tutorial | | Traversy React tutorial | | Official React tutorial | | CSS cheat sheet | | flexbox cheat sheet | | CSS grid generator | | material-ui styling solution |

Steps for a backend - frontend story from a data flow perspective

• Create knex migration to create/modify tables in database

• Create objection models

• Endpoints and empty controllers

• Backend jest unit testing

• Implement controllers

• Create authorization/validation middlewares

• Run tests and make sure everything passes

• Create pure frontend components in storybook

• res.data normalizer, redux slice, redux selectors to hold and access the data

• Redux saga for get/post/put/patch request

• Container component to connect saga actions/selector with pure components

• Connect Route component with container components with react router

• Manual testing