Scribd
Upload
11 views3 pages

React Technical Task

The document outlines a React JS task to develop a web application for a small E-commerce store, with a due date of January 21, 2025. The application should feature user registration, a product catalog, and a responsive UI/UX design, along with error handling and documentation. Key pages include Registration, Home Page, Details Page, and My Cart, with specific requirements for each page's functionality and layout.

Uploaded by

Osama Shata
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
11 views3 pages

React Technical Task

The document outlines a React JS task to develop a web application for a small E-commerce store, with a due date of January 21, 2025. The application should feature user registration, a product catalog, and a responsive UI/UX design, along with error handling and documentation. Key pages include Registration, Home Page, Details Page, and My Cart, with specific requirements for each page's functionality and layout.

Uploaded by

Osama Shata
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/ 3

Due Date: 21/01/2025

REACT JS TASK

Please note that this test procedure is a guide. Feel free to add extra features to your
application. Additionally, you are not restricted to the public API provided in this test.
Make use of other data sources if they'll set you apart. This test procedure is only a
guideline. please feel free to incorporate additional features into your application. You
are welcome to utilize other data sources in addition to the public API mentioned in this
test if you believe it will enhance your submission.

Objective:
We need to build a web application for a small E-commerce store. The
application should display a list of products and their summary details assignment is to
develop a web application for a small E-commerce platform. This application should
present a catalog of products along with a summary of each product's details. Users can
register new accounts and then use these accounts to sign in later.

UI/UX Design
• Implement a clean and user-friendly interface.
• Pay attention to responsive design to ensure the application looks good on both
desktop and mobile devices.

Error Handling
• Implement error handling for cases where the API request fails.
• Display an appropriate error message to the user.

Documentation
• Provide clear instructions on how to run your application locally.
• Include any additional notes or explanations you think are relevant.

Submission
• Create a Git repository for your project and commit your code regularly. Include a
README.md file with instructions on how to run your application. Send the
repository link to [email protected]
The website should has the following Pages

1. Registration
Create a user registration form with fields
a- First Name (Required)
b- Last Name
c- Username (Required)
d- Password (Must be not less than 8 characters with at least one digit, one
uppercase letter and one special character.
e- Email (Validate email format)
f- Address
Validate inputs and display appropriate error messages.

2. Home Page
After user is registered, user can sign in to library home page. The home page should
have
1- Navigation bar that contains:
a- Home
b- Login Information (First Name, Last Name)
c- My Cart
d- About
e- Contact us
f- Log out
2- Home Page Sections
Home page should contain section for product categories, you can retrieve
product categories using public API endpoint
https://fakestoreapi.com/products/categories

Each section should be an accordion component that allows users to expand and
collapse sections to view products in this category, you can retrieve products in
each category using public API endpoint
https://fakestoreapi.com/products/category/{CAT_NAME}
NOTE: replace cat_name with a valid category name as returned from the
categories API.
a- Ensure only one section can be expanded at a time.
b- Add animations for smooth transitions.

3. Details Page
Create a page that displays the details of a selected product.
• When a user clicks on a product in the listing, they should be taken to the
product details page.
• Display additional information about the product, such as a description and any
other relevant data. (You can retrieve product detail using public API endpoint
https://fakestoreapi.com/products/{id}
NOTE: replace id with valid product id.
• In the details page, the user can click a button Add to My Cart

4. My Cart
Design a page where the user should open to see all the products he added from the
products page. The items should be rendered in a sortable list with user can drag and
drop to reorder and the list is updated dynamically.

You might also like