hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
206 stars 265 forks source link

[ENHANCEMENT]: [PHOENIX] [BE] Implement Pagination Controls #1452

Open Olnuel opened 2 months ago

Olnuel commented 2 months ago

Description

Implement pagination controls that will allow users to navigate through product listings by breaking the product list into manageable pages. This enhancement will make it easier for users to find and view products.

Acceptance Criteria

  1. Implement pagination controls, including "Previous" and "Next" buttons, as well as numbered page links for direct navigation.
  2. Product list should be updated immediately to display the products for the selected page without refreshing the entire page.
  3. Provide options for users to select the number of products displayed per page.

Endpoint

GET /api/products

Links

| FIGMA LINK https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=771-9815&t=VEj4y3G0vEn4g18k-4

Images

https://www.loom.com/share/16b4855ec8fc4f738720340afdf8ec97?sid=29037632-79f7-4f22-ad29-379201132fc6

https://www.loom.com/share/3408b0c15af644729172ddd262867af9?sid=7bb9135e-e1a5-4509-ab83-79daeb18e3f3

image