This project was bootstrapped with Create React App.

Routing React Web Routing.
Data fetching Axios
CSS and styles Styled Components library.

React hooks was used to store data and implement some memoization in the project.
Fetching has 3 states

1. Loading
2. Error
3. Fetched

For properties type check prop-types library was used.
Media queries for responsive layout.

Project structure

1. index.js - start point
2. App.js - root component
3. components/Container - routing
4. pages folder contain 2 pages (List & Details)
5. components folder contains all small pieces like Header, Loader etc

What can be done better

1. More destructuring for components
2. Better css logic
3. Add state management like redux
4. Some additional optimizations

Installation

npm run install

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.