Scribd
Upload
6 views1 page

React Advanced Topics Assignment

The document outlines an assignment for a React Advanced Bootcamp, focusing on building an e-commerce application with specific functionalities. Key requirements include fetching products from an external API, implementing 'Add to cart' functionality using Redux, and utilizing HOC and conditional rendering. Additionally, the submission must include screenshots or GIFs of various application features and adhere to guidelines regarding file structure.

Uploaded by

khushboos2594
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views1 page

React Advanced Topics Assignment

The document outlines an assignment for a React Advanced Bootcamp, focusing on building an e-commerce application with specific functionalities. Key requirements include fetching products from an external API, implementing 'Add to cart' functionality using Redux, and utilizing HOC and conditional rendering. Additionally, the submission must include screenshots or GIFs of various application features and adhere to guidelines regarding file structure.

Uploaded by

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

Front-end Extended Bootcamp Training

Topic: React Advanced (lifecycle methods, HOC and Hooks, conditional rendering, container, and
component architecture, REDUX)

Assignment:
Incorporate the advance react topics in an react app with following functionalities:
1. Create react application having basic functionality of ecommerce website.
2. On the home page, fetch products from an external API and display them in a grid
format. Each product card should include a title, description, category, price, and a
dummy image of your choice.
3. When fetching products via an external API, use HOC and conditional rendering to show
a Loading message until the product data is retrieved.
4. Implement "Add to cart" functionality with a button labelled "Add to cart" on each card.
The header should feature a cart icon displaying the number of products in the cart,
increasing by 1 with each addition.
5. When the Cart icon on the Header is clicked, it navigates to a page displaying all the
products added to the cart.

Guidelines:
1. Implement an 'Add to Cart' feature with Redux store.
2. Ensure conditional rendering based on application state.
3. Incorporate High Order Components (HOC) for component reuse.
4. Maintain a clear separation between container and component architecture.
5. API Details:
a. Get all products: https://dummyjson.com/docs/products#products-all
b. Get single product: https://dummyjson.com/docs/products#products-single
6. Include screenshots or GIFs of each page with features for the application along with
your browser profile and time. Following screenshots should have:
a. Home page – with Loading message.
b. Home page with product details.
c. Cart feature.
d. Product detail page.
7. Do not focus much on CSS.

Evaluation Criteria: Use the topics from Workshop 2. Your implementation of the feature will be
evaluated based on these topics.

In case of doubts, please reach out to Mentors.

Please ensure that assignment solutions are uploaded without the node_modules folder. Only
solutions submitted without the node_modules directory will be reviewed. Make sure to include
screenshots or GIFs of each page with features for the application.

You might also like