NetConstruct React Developer Assessment

Overview

The purpose of this assessment is to demonstrate:

1. An 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

Prerequisites

In order to run the provided solution the following software will need to be installed:

• NodeJS (LTS) here.
• A code editor (We recommend VS Code here.)

Setup

1. Fork and clone the repository or download and extract the ZIP file here.
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.tsx 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.

Note: The only exception is the use of UI Component libraries (e.g. Material UI, etc) as these reduce our ability to review your styling ability.

Requirements

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. Use semantic markup where possible.
5. Create a responsive layout with HTML and CSS, this must be suitable for use on a public-facing website. For example, a grid-based card layout.

Additional Exercises

If you have time then demonstrating any of the following would be considered as a bonus:

1. Implement pagination - this can be traditional numbered pages or "load more".
2. Persist filter state in the query string.
3. Include animated transitions between application state, e.g. when filtering.
4. Use styled components instead of plain CSS.
5. Use client-side routing to create a "detail" page. This page only needs to include the title and author name.

Submission

Please submit your completed exercise either by supplying the URL of your forked repository or by including a ZIP archive of your local folder - please ensure you do not include the node_modules folder.