Styled Card - Copy this React, Mui Component to your project

Objective: Build a single page web application for a fictional e commerce dashboard. The application should display a list of products, allow for filtering and sorting, and support loading more products dynamically as the user scrolls. The focus should be on code structure, design patterns, dynamic data loading, responsiveness, and optimization. Requirements 1. Product List View ○ Fetch and display a list of products from a provided API endpoint. Each product should show basic details like name, price, category, and image. ○ The list should support infinite scrolling or "load more" functionality, loading more products as the user scrolls down. 2. Filtering and Sorting ○ Implement filter options to allow users to filter products by category, price range, and rating. ○ Provide sorting options (e.g., price low to high, high to low). ○ Filters and sorting should work together seamlessly without reloading the page. 3. Product Details Modal ○ When clicking on a product, show a modal with additional details (e.g., description, availability, detailed image). ○ The modal should load data dynamically for optimized performance. 4. Responsive Design ○ The application should be responsive, supporting both mobile and desktop views. ○ Use a grid layout for desktop and a list layout for mobile, adapting seamlessly based on screen size. 5. Optimized Code and Best Practices ○ Use structured code and modular components. ○ Follow design patterns relevant to front end development (e.g., Container Presenter, Singleton for state management). ○ Optimize images and other assets to reduce load time. ○ Apply lazy loading for images and components where appropriate. 6. Error Handling and Loading States ○ Include error handling for network requests, showing user friendly messages if loading fails. ○ Display loading indicators for data fetches to improve the user experience. Evaluation Criteria 1. Code Structure & Design Patterns ○ Assess the use of modular, reusable components. ○ Look for clean, structured code that follows best practices. ○ Evaluate the usage of design patterns appropriate for front end architecture. 2. Dynamic Data Loading ○ Ensure smooth infinite scrolling or “load more” functionality. ○ Check if data is loaded efficiently without unnecessary re fetches. 3. Responsiveness and UI ○ Evaluate how well the layout adapts to different screen sizes. ○ Look for UI/UX consistency and visual appeal. 4. Performance Optimization ○ Assess the handling of images, lazy loading, and overall application performance. ○ Look for minimization of re renders, unnecessary API calls, and excessive DOM updates. 5. Documentation & Code Comments ○ Clear documentation on setup and usage. ○ Comments explaining complex code sections or logic