Develop a product listing page using React and TypeScript, enabling users to filter, and sort product items. The application must effectively load and display product data, including images, allowing interaction based on attributes such as colors, availability, sizes, and price.
- Mock API Call: Implement a mock API call to simulate fetching product data dynamically. Use the provided sample JSON data to create this mock API call.
- Data Modification: You are encouraged to modify the input test data to display a variety of attributes for each product, ensuring the application can handle and effectively showcase products with diverse attributes.
- Filter: Users should be able to filter products by colors, sizes, in-stock and out-of-stock status, and price.
- Sort: Provide options for sorting products by name and price, both in ascending and descending order.
- Design a user-friendly interface that effectively presents the products along with filter, and sort functionalities.
- Ensure the design is responsive and accessible across various devices.
- Utilize React.js with TypeScript, justifying the use of state management and any other libraries employed.
Provide a README file detailing:
- Setup and Run Instructions: How to set up and run your project.
- Technologies Overview: An overview of the technologies used and the rationale behind their selection.
- Development Assumptions: Any assumptions made during the development process.
The goal of this assessment is to provide a picture of your approach to development as it relates to:
- Design patterns/programming paradigm
- Scalability
- API interface design
- Frameworks
- Documentation
- Clean code
- UI
- Testing
- Automated testing
- Error handling
- Logging
- Readability
Please consider these elements when completing your assignment, as they will be crucial in the evaluation process.
- Infinite Scrolling: Implement infinite scrolling to dynamically load products as the user scrolls down the page.
- Search: Allow users to search for products by title.
- Advanced Features: Highlight any advanced features or best practices you've integrated into the project.
- Submit your code via a public GitHub repository link.
- Ensure the repository is public for review purposes.
- Functionality: The application operates as intended without bugs.
- Code Quality: Code is organized, clean, and comprehensible.
- UI/UX: The application is user-friendly, visually appealing, and responsive.
- Innovation: Incorporation of additional features or unique approaches that enhance the application.