Scribd
Upload
6 views2 pages

ReactJS Assignment 1 - 2024

The document outlines an assignment to develop an E-commerce Product Listing Page using ReactJS, requiring setup through Vite and installation of necessary packages. It specifies the use of provided APIs for data fetching, implementation of various filters, and adherence to coding guidelines such as using functional components and CSS-in-JS for styling. Submission requires compressing the project folder into a .zip file without the node_modules folder and ensuring the code is well-documented.

Uploaded by

dayema7777
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 views2 pages

ReactJS Assignment 1 - 2024

The document outlines an assignment to develop an E-commerce Product Listing Page using ReactJS, requiring setup through Vite and installation of necessary packages. It specifies the use of provided APIs for data fetching, implementation of various filters, and adherence to coding guidelines such as using functional components and CSS-in-JS for styling. Submission requires compressing the project folder into a .zip file without the node_modules folder and ensuring the code is well-documented.

Uploaded by

dayema7777
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/ 2

ReactJS Assignment

Setup
• Either use the command
npm create vite@latest react-assignment -- --template react
or
npm create vite@latest
to generate react template project for you.
• Install the packages through npm i
• Development process can be started through the command npm run dev
• Make sure your template project is working before you start your solution for this
assignment.

Instructions

• Develop an E-commerce Product Listing Page following the attached design mockup.
• Ensure the application is responsive and functions seamlessly across various screen
resolutions.
• Use the provided APIs to fetch data
– Get all products: https://fakestoreapi.com/products
– Get all categories: https://fakestoreapi.com/products/categories
• Implement filters as shown in the attached design. Ensure the following filters are
functional
– Category Selection
– Price Range
– Rating
– Search
• Implement clear filters functionality.
• Replicate the design mockup as closely as possible.

Coding Guidelines

• Use functional components and React hooks for state management.


• Follow clean coding practices with meaningful variable names.
• Use a CSS-in-JS solution such as Styled Components, Emotion, or CSS Modules for
styling.
• You can use react component library such as Antd (Preferable), Chakra UI, MUI, etc.
if you want.
• Creating your own custom components will get you extra points.
• Use of AI assistants (such as ChatGPT, Github Copilot, etc.) is strictly prohibited.

Submission Guidelines:

NOTE: Failure to adhere to Submission Guidelines will render the


submission useless as it will not be evaluated.

• Compress your project folder into a .zip file named _ReactAssignment.zip.


• Do not include the node_modules folder in the zip file.
• Ensure your code is well-documented and includes setup and execution
instructions.
• After uploading your project, you’re required to fill this form. Click here.

You might also like