Rozetka Admin Panel Design

Welcome to the Rozetka Admin Panel project!

Design

You can access the project design here.

Login Page

• Send a token request, receive a token, and store it (frontend + backend), or handle the entire login process on the frontend (check in the component + store the token in localStorage).
• Eye icon to show and hide the password (clicking reveals the password, and the icon changes to a crossed-out eye).

Products Table

• Retrieve a list of products and display it in a table.
• "Preview" button - redirects to the preview page.

Adding a Product

• Open a modal window similar to "Edit Product" (but with all fields empty). After adding a product, the table should update.
• The modal window should open in the center of the page, and the entire page should have reduced opacity (you can add a shadow to the modal window).

Editing/Deleting a Product

• Icons for "Edit" and "Delete" open modal windows for editing and deleting, respectively, for the corresponding row.

Product Preview

• Display product blocks (cards) from the table (Products table page).
• Show information from a new product request.
• Clicking on a card redirects to a page with a specific product, where the same information plus a description will be displayed.

Additional Requirements

• Store all code in this repository.
• Submit each individual task or user story as a separate pull request (PR).
• Retrieve data from your express.js server or mock API.

Additional Information

• Font: Inter

Getting Started

In the project directory, you can run:

npm start

This command launches the app in development mode.
Open http://localhost:3000 in your browser to view the app.

The page will automatically reload when you make changes.

Default Login Credentials

• Login: Admin
• Password: 123