Solution to the DTA frontend exercise.
This app was set up using Create React App and offers a standard set of npm
commands to start the dev server, run tests and build for production (see package.json
).
It has also been deployed to Google App Engine at https://dta-frontend-exercise.appspot.com/.
After checking out the code, the following commands will get the dev server running locally.
npm install
REACT_APP_BARS_ENDPOINT="http://frontend-exercise.apps.staging.digital.gov.au/bars" \
npm run start
Start the runner.
npm test
Generate coverage.
npm test -- --coverage
Build the optimised production distribution passing across the required environment variables.
REACT_APP_BARS_ENDPOINT="https://frontend-exercise.apps.staging.digital.gov.au/bars" \
npm run build
Deploy to Google App Engine (assumes that GAE tools and SDKs are installed).
appcfg.py -A "dta-frontend-exercise" update .
eslint
is used for linting. The configuration used is an extension ofcreate-react-app
s eslint config, plus the prettier plugin.prettier
is used for automatically formatting JS code (thus giving the closestgo fmt
equivalent that seems to exist).stylelint
is used for the CSS reset/normalize/reboot inindex.css
.
- Avoided using frameworks like Bootstrap or 3rd party libraries for grids and form components, even though such libraries have tried and tested CSS and would be useful for things like the controls layout.
- Avoided splitting all tiny components into their own file. If the app was larger, components like the simple loading indicator would probably be their own component and reused elsewhere.
- Used
styled-components
for styling instead of other options like SASS, LESS, CSS modules, Aphrodite or inline styles. - Does not really need to be deployed to Google App Engine in this way (that is, using Go) since it's just a simple static website.
- It's not ideal that
create-react-app
requires its env vars to be prefixed withREACT_APP_
, but that's how it works.