Querying data from a provided API and displaying as both a table and graph.
This application uses an API provided by Intellisense.io. The specification for this tech test outlined 3 key goals:
- Create a single page application with a table and line graph
- Access the data from the provided API
- Allow different columns in the dataset to be selected for graphing
The code provided attempts to fulfill all tasks as well as adding a few extra features in an effort to provide a better user experience. A collection of planned features that didn't make it into the current build can likely be found on the issues tab of the github repo.
-
The requirements for running this application locally are the same as any standard
create-react-appreact application, of course with additional dependancies provided by npm. The currently supported browsers are Firefox and Chrome. -
Once this repository is cloned, dependencies must be met through:
npm i
A local development server can then be spun up through
npm start
-
-
This project uses React hooks for state management such as useState and useEffect. Functional components should be used where possible due to their reduced compile size and the phasing out of class-components by the react development team. The project also tries to follow an atomic component structure. The basic idea being to split components into organisms, molecules and atoms. organisms being made of many molecules, and molecules being made of many atoms.
-
App-wide state management is done through Redux. The structure of which is as follows:
"data": { "table": [ { "name": "string", "times": "number", "values": "number", } ], "graph": [ { "name": "string", "times": "number", "values": "number", }, ] }, "status": { "loading": "boolean", "error": "boolean", "sortBy": "string" }
Data stored under
tableis what is returned from the API and is rendered in the table. Graph data should be a subset of that stored underdata. Items understatusshould ideally refer to thestateof the app - as opposed to data being used and presented to users. -
This project uses TypeScript throughout. Variables, functions, and parameters should be typed where possible. There are a number of custom interfaces for describing data returned from the API as well as various levels of the redux state.
-
Accessibility for this project should be kept to at least a AA standard (In compliance with the W3C Web Content Accessibility Guidelines) as best as posssible. aXe-react has been installed as a means of complying with these standards. Current warning can be viewed from the console when the application is being ran in development mode.
-
Husky pre-commit hooks are used to ensure breaking or poor-quality code is not commited to the git repo. The pre-commit hook script can be found in
.husky/_/pre-commit. This scrippt will run the cypress tests as well as linting all tsx files.
-
-
This project uses Cypress for it's testing. Cypress was chosen as it's what's most familiar and better reflects a user journey through an application.
Tests can be found in
/cypress/integration. Elements should be selected using data-name attributes. This is the apporach recommended by Cypress as it's least intrusive to the DOM.To run the test suite run
npm test