Product Dashboard - Copy this React, Tailwind Component to your project
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.
