- visit: https://garethtalty.github.io/gcn-fe or;
- clone https://github.com/garethtalty/gcn-fe.git,
$ npm install && npm run start
. visithttp://localhost:3000
,
- note, this app has been built using the current LTS version of Node (node 14 & npm 6). While this app may build on lower versions, this has not been tested for the purposes of this task.
- The app must be viewed in Chrome at iPhone 6 resolution (375x667).
A full critique of the existing navigation is provided here and this solution aims to implement the suggestions outlined in the Recommendations section.
Unit tests can be run with npm run test
or npm run test:unit
. Integration tests are written with Cypress and require the app to be started on http://localhost:3000
to run successfully.
This section outlines the steps that are required to prepare this solution for production (in no real order, and probably not exhaustive).
- Configure production build accordingly. Under the hood, create-react-app uses webpack to produce the build. There are some sensible defaults provided when doing a production build through CRA, however they should be optimized as appropriate, paying attention to code-splitting and asset caching.
- Measure application performance and implement any enhancements.
- Evaluate the application with an accessibility checker and implement a11y improvements.
- Upload and serve assets from a CDN, such as Amazon Cloudfront.
- Include analytics and any other necessary 3rd party/vendor scripts.
- Containerize the application.
- Extend test suites to provide automated coverage across all in-scope browsers.
- Ensure solution meets relevant acceptance criteria
- Build the application through a CI pipeline with:
- test runners
- code quality gates (tooling like sonarqube, lighthouse)
-
Fetch video data through proxy
-
Throttle vs intersection observer
-
Eject from CRA (or not)
-
Todo's
-
Storybook component lib
-
CRA template / index html title