Skip to content

Latest commit

 

History

History
34 lines (27 loc) · 2.76 KB

fullstack-reactjs-php.md

File metadata and controls

34 lines (27 loc) · 2.76 KB

React.js Coding Challenge with Laravel API (Preferred)

Problem

Create a React.js web application that displays a list of products and allows users to filter and sort them based on various criteria. Use your own Laravel API(preferred) or PHP API to fetch the list of products.

Requirements

  1. Create a React.js web application that fetches the list of products from the Laravel or PHP API.
  2. Display the list of products in a grid or list view, showing the product name, price, and an image.
  3. Implement a filter functionality using query parameters, that allows users to filter products based on categories (e.g., electronics, clothing, books) or any other relevant criteria. The filter options should be fetched from the API.
  4. Implement a sorting functionality that allows users to sort products by price (low to high or high to low) or any other relevant criteria.
  5. Include pagination or infinite scrolling to handle large product lists. The pagination details should be provided by the API.
  6. Implement a search functionality that allows users to search for products by name or any other relevant search criteria.
  7. Add a feature to mark products as favorites using global state management ( use Context/Redux ) and allow users to view their favorite products separately.
  8. Implement proper error handling and loading states for API requests and data retrieval.
  9. Use React Router to create multiple nested routes ( pages ), such as a product detail page when a product is clicked.
  10. Use any state management library of your choice (e.g., Redux, Context API) to manage the app's state and handle data fetching and sharing.
  11. The code should be well-organized, commented, and readable.
  12. 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. Include both instructions for setting up the app.
  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 (both the Laravel API(If you choose to) and/or the React.js app).
  2. Give us a UI and features walkthrough.
  3. Explain your code, including how you structured the React components, state management, and API interactions.
  4. Run tests, if any, and explain how you ensured code quality and correctness.

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

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