[go: up one dir, main page]
Scribd
Upload
24 views2 pages

React Practical Test

The document outlines a practical test for building a mini e-commerce product listing page using React. Key features include displaying products, adding them to a cart with adjustable quantities, fetching product data from an API, and ensuring responsive design. Additional requirements involve using React Hooks, managing global state with Context API or Redux, and optional features like persisting cart data and implementing a search bar with debounce functionality.

Uploaded by

MAURYA ABHINAND
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
24 views2 pages

React Practical Test

The document outlines a practical test for building a mini e-commerce product listing page using React. Key features include displaying products, adding them to a cart with adjustable quantities, fetching product data from an API, and ensuring responsive design. Additional requirements involve using React Hooks, managing global state with Context API or Redux, and optional features like persisting cart data and implementing a search bar with debounce functionality.

Uploaded by

MAURYA ABHINAND
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

React Practical Test

Objective: Build a mini e-commerce product listing page where users can view products, add them to
a cart, and adjust quantities.

Requirements:

1. Create a Product Listing Page:

* Display a list of products with the following details:

* Product Image

* Product Name

* Price

* "Add to Cart" button

2. Cart Functionality:

* When a user clicks "Add to Cart," the product should be added to a cart.

* If a product is already in the cart, increase its quantity by 1.

* Display the cart as a sidebar or popup with the following information:

* List of added products, each with its:

* Name

* Quantity (editable by user)

* Price per item

Total price per item (quantity price)

* Total amount for all items

* "Checkout" button (just a placeholder, no backend integration needed)

3. Adjust Quantity:

* Allow users to increase or decrease the quantity of each product in the cart.

* Update the total price of each item based on quantity.

* Update the cart total dynamically.

4. Fetch Products from an API:

* Use the following sample API endpoint to fetch product data:

* https://fakestoreapi.com/products

* Display at least the first five products from the response.

5. Responsive Design:

* Make sure the page looks good on both desktop and mobile.
6. Technical Requirements:

* Use React Functional Components.

* Use React Hooks (e.g., useState, useEffect).

* Use Context API or Redux to manage global cart state.

* Use CSS Modules or Styled Components for component-specific styling.

Bonus (Optional):

1. Persist Cart: Use local storage to persist the cart data so it’s retained even if the user refreshes the
page.

2. Debounce API Calls: Add a search bar to filter products based on a search term. Use a debounce
technique to avoid excessive API calls while typing.

You might also like