Is your feature request related to a problem? Please describe.
Currently, the application fetches and renders the entire product catalog at once. As the database grows, this will cause significant performance bottlenecks, increase initial load times, and degrade the user experience on the frontend.
Describe the solution you'd like
I propose implementing pagination for the product catalog to limit the data payload and improve rendering speeds. This involves updates to both the backend API and the React frontend.
Backend Requirements (Express/MongoDB):
- Update the
GET /products endpoint (or relevant catalog route) to accept page and limit query parameters.
- Implement Mongoose
.skip() and .limit() logic in the controller.
- Ensure the API response returns pagination metadata (e.g.,
products, currentPage, totalPages, totalItems).
Frontend Requirements (React/Chakra UI):
- Create a reusable
<Pagination /> component using Chakra UI's button group or pagination patterns.
- Update the product fetching logic (Axios/state management) to pass the current page query.
- Ensure the UI gracefully handles loading states when switching between pages.
Describe alternatives you've considered
An alternative would be implementing "Infinite Scrolling" using an Intersection Observer, but standard numeric pagination provides a more accessible and navigable experience for an e-commerce dashboard.
Acceptance Criteria:
Additional context
I am participating in SSOC '26 and would love to be assigned to this issue! I am comfortable handling both the backend Express routing and the frontend Chakra UI integration.
Is your feature request related to a problem? Please describe.
Currently, the application fetches and renders the entire product catalog at once. As the database grows, this will cause significant performance bottlenecks, increase initial load times, and degrade the user experience on the frontend.
Describe the solution you'd like
I propose implementing pagination for the product catalog to limit the data payload and improve rendering speeds. This involves updates to both the backend API and the React frontend.
Backend Requirements (Express/MongoDB):
GET /productsendpoint (or relevant catalog route) to acceptpageandlimitquery parameters..skip()and.limit()logic in the controller.products,currentPage,totalPages,totalItems).Frontend Requirements (React/Chakra UI):
<Pagination />component using Chakra UI's button group or pagination patterns.Describe alternatives you've considered
An alternative would be implementing "Infinite Scrolling" using an Intersection Observer, but standard numeric pagination provides a more accessible and navigable experience for an e-commerce dashboard.
Acceptance Criteria:
page/limitparameters (defaults to page 1).Additional context
I am participating in SSOC '26 and would love to be assigned to this issue! I am comfortable handling both the backend Express routing and the frontend Chakra UI integration.