The Front End Application was developed as a Single Page Application, and is performing client rendering (as opposed to Server Side Rendering).
Project is fetching data via fetch, for some devices we may need to use a polyfill
An alternative would be to use Axios but we would lose the ability to intercept requests in the Service Worker if required.
We are not employing any of the PWA (Progressive Web App) improvements at this stage of the project.
Project is using Bulma for styling, which is based on Flexbox, providing responsiveness
Project does not specifically tackle Accessibility in this instance
At the moment, Project loads data on the first load, and stores API result into redux, via Redux Thunk
An alternative for Redux would be to use Redux Saga
Another, possibly better approach would be to cache the result by intercepting fetch API calls via the Service Worker via PWA.
We are using create-react-app proxy feature to work around CORS in the development mode.
In general, Atomic Design works well with larger React Apps, in this instance we used minimal amount of components.
Project Assumptions: You already have yarn or npm installed already, you can view command comparison
We are showing yarn commands below, but npm can be also used.
Please run
yarn install
yarn start
Navigate to http://localhost:3000 in your browser
To build
yarn build
You can find the optimised bundle in the dist folder.
To test Components, please run tests as below
yarn test
Currently, only simple tests have been implemented, typically, we should do: