✔️ SPA application with just one view.
✔️ API endpoint to display the paginated list of products.
✔️ Text input, which allows the user to filter results by id.
✔️ The input should accept only numbers, other signs should not even appear.
✔️ Table displaying the following items’ properties: id, name, and year.
✔️ Background colour of each row should be taken from the colour property.
✔️ After clicking on a row a modal should be displayed and should present all item data.
✔️ The table should display 5 items per page.
✔️ Under the table, there should be a pagination component, which allows switching between pages with “next” and “previous” arrows.
✔️ Handle situations when API endpoint returns a 4XX or 5XX error. In such a case the user should be informed about the error.
✔️ Unit tests.
✔️ Redux/Context API or other state management library.
✔️ Filtering and pagination should be performed within the API, not on the frontend side.
🏗 - in progress - [optional] Pagination and filtering in the address URL, so users can copy and share the URL with each other. After changing the page it should be possible to copy-paste web browser URL to another tab, where this exact page should be displayed on the start.
👉 Demo 👈