This project was bootstrapped with Create React App.
I used https://jsonplaceholder.typicode.com/comments as the JSON dummy data online generator.
Since, the application will look nicer if we have accessible and responsive components like tables, spinners, overlays, toast messages, etc, I decided to use one of Material UI/Ant Design/Chakra UI desgin systems.
I decided to use Chakra UI since I haven't tried it out and wanted to find out how it works. I created the application using this command:
npx create-react-app my-app --template @chakra-ui/typescript
I decided to build three different views rendered within react's built-in Profiler component. The profiling information of the mount phase and the fetch duration are captured as a single measurement when the Start button is clicked. This measurement is persisted to Local Storage and exposed via a custom hook.
On visiting the Measurements page, information captured in Local Storage is displayed.
I used 'nanoid' package for id generation 'date-fn' for date formatting and 'lodash' for performant deep object comparisons and other utility functions.
Jest with React testing Library and React hooks testing library.