Skip to content

Latest commit

 

History

History
35 lines (29 loc) · 2.26 KB

react-js-challenge-2.md

File metadata and controls

35 lines (29 loc) · 2.26 KB

React.js Coding Challenge

Problem

Create a React.js web application with login and register utilising local storage, that displays a list of products. Build UI from Vite, react-bootstrap and saas for styling

Requirements

  1. Login and Register page using local storage.
  2. Profile Page with minimum details.
  3. Fetch a list of products from an API endpoint ( fakestoreapi.com or any other api of your choice ) using axios.
  4. Display the list of products in a grid view, showing the product name, price, rating and an image.
  5. Implement a filter functionality using query parameter, that allows users to filter products based on categories (e.g., electronics, clothing, books) or any other relevant criteria.
  6. Implement a sorting functionality using query parameter, that allows users to sort products by price (low to high or high to low) or any other relevant criteria.
  7. Include pagination or infinite scrolling to handle large product lists.
  8. Implement a search functionality using query parameter, that allows users to search for products by name or any other relevant search criteria.
  9. Add a products to cart, allow users to view cart and modify and remove items from cart.
  10. Implement proper error handling and loading states for API requests and data retrieval.
  11. Use React Router to create multiple routes/pages, such as a product detail page when a product is clicked.
  12. Use context API to manage the app's state.
  13. The code should be well-organized, commented, and readable.
  14. You should use Git for version control.

Submission:

  1. Please create a public GitHub / BitBucket repository for your project.
  2. Your repository must have a detailed README.md with instructions on how to set up & run your code locally.
  3. We would like you to present your work no later than 3 days from the day you receive your task.

The presentation would be done in these steps:

  1. Run your code locally
  2. Give us a UI and features walkthrough
  3. Explain your code
  4. Run tests, if any

Feel free to use any additional packages, libraries, or UI frameworks you find useful. Provide the source code of the React.js app and any necessary instructions to run it.

Remember, you can modify or extend this challenge according to your specific requirements and the skills you want to evaluate.