Scribd
Upload
17 views2 pages

Reiz Tech Frontend Developer Task 2

Reiz Tech

Uploaded by

antonio.parejo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views2 pages

Reiz Tech Frontend Developer Task 2

Reiz Tech

Uploaded by

antonio.parejo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Reiz Tech Frontend developer task.

Feature requirements

• Create a dummy dashboard page, using this figma design as


baseline. Figma (To see full layout you might need to login)
• Page layout should adapt to every screen size. While a specific
design has not been provided, you should use your imagination
and best judgment to create a clean, user-friendly interface.
• Most of the page does not need to be interactive, unless
specifically mentioned. For example, the search bar or the
notifications button should not be interactive.
• Products should be fetched from: Products API and displayed
inside the table.
o Use “title”, “category”, “brand”, “price”, “stock” and
“rating” fields.
o Search fields should be used to search the table by “title”
and “brand”. Implement two input fields that allow users
to enter search terms for "title" and "brand" respectively.
Upon initiating a search, refer to the initial Products API
documentation to construct the correct API call and update
the table based on the search results.
o Add a sort button for “title” and “brand” columns to sort
the “title” and “brand” columns ascending or descending
order.
o The “title” column should contain clickable titles that act
as link. When a user clicks on a product title, they should
be redirected to a dynamic route. On this route, fetch and
display the product details from the Products API using the
product ID. The product detail page does not require a
specific design; simply present the JSON data returned
from the Products API in a readable format.

Technical requirements
• VueJS 3
• Vite
• Typescript
• Vitest
• Write a fetch helper which theoretically would be used
throughout the application to fetch data.
o It must be typesafe.
o Be an improvement over a default fetch function.
o Write 2 unit tests for it.
• Use your new fetch helper to fetch a products list.
• Avoid duplicate code, use right abstractions for layout and
components.
• Code cleanliness and consistent style is important. Airbnb
javascript style guide can be used as a baseline, but is not
required: Airbnb JavaScript Style Guide

You might also like