Scribd
Upload
14 views

ReactJS Assignment

Uploaded by

Ashutosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

ReactJS Assignment

Uploaded by

Ashutosh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

ReactJS Assignment

The idea is to create a Product Listing page and cart (checkout) summary page of an
ecommerce website which has certain functionalities.

The above shown image is a product listing page which shows a list of products which you can
fetch from a dummy api or a dummy json .
Product Items should have the following attributes: name, image, price,
description/features/category (ex: color , size, etc), instock, total available quantity.

On the top left corner there are dropdowns shown which will filter out the products based on the
filter applied.

For example if the filter applied is of category hoodie and size XL then only hoodies with size XL
should be visible to the user on the listing page. On click of reset button the filters will be reset
to default values. The default values will be blank. By default all products will be shown.

On the right corner there is a search bar in which user can search for products and based on
the keywords entered the matching products should be filtered out and be shown on the page.
In each product there will be a cart icon and an input in which the user can add the quantity of
product the user wants to buy. And there will be a checkbox next to the cart icon and only those
products which are selected will be added to cart and will be visible on cart summary page.

On click of Add to cart button on top right corner user will be taken to cart/checkout summary
page.

The checkout summary page will look like below.

Only those products which are selected by the user on the product listing page will be visible
here with their respective quantities , subtotal and cart total on the right side.
Users will have an option to change the quantity of items by clicking + and - buttons present
next to each item.

Whenever anything is updated on the cart page then subtotal value and total value should
change accordingly.

On clicking the Proceed checkout button the user will be taken to the thank you page .

Note: Please share the github link where your code will be there.
Also please host your project on any open source platform and share the url of the
same (ex: https://www.netlify.com/ , heroku, gitlab etc)

You might also like