React Js, Bootstrap, MirageJS

Attempt this assessment from Lizard Global is to demonstrate my:

1. Understanding of React syntax
2. Working with an API
3. Storing and manipulating React state
4. Structuring an application with multiple components
5. HTML and CSS ability
6. Responsive web development ability

1. Fork and clone the repository
2. Open the repository folder and install the dependencies using yarn or npm install.
3. Run the development server using yarn start or npm start. The repository contains a App.jsx file inside the components folder; this should be the starting point for your exercise. Please feel free to create more components to structure your app in a logical manner. The repository also contains an API endpoint mocked using MirageJS. This can be accessed when running the development server at the URL /api/posts. We would love to see code comments to help explain your approach and thought process, this will also be discussed in a follow-up technical interview. Finally, the use of third party libraries and/or components is permitted - and in some cases encouraged. However, please ensure that you are still demonstrating the skills we have outlined above.

These are the minimum requirements for the exercies:

1. Retrieve the data from the mock API.
2. Output the data in a list, including properties from the data that are appropriate for a list view.
3. Implement a category filter - this can be single or multi-select.
4. Implement pagination - this can be traditional numbered pages or "load more".
5. Use semantic markup where possible.
6. Create a responsive layout with HTML and CSS.

1. Use client-side routing to create a "detail" page.
2. Persist filter state in the query string.
3. Include animated transitions between application state, e.g. when filtering.
4. Convert the application to use TypeScript instead of JavaScript.
5. Use a CSS preprocessor or CSS-in-JS rather than plain CSS.