COPS-IITBHU / COPS-IITBHU/hackalog-frontend

Pagination in Hackathon Detail Page

Open
#67 3 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
TypeScript
Stars
17
Forks
49
PR merge metrics
No merged PRs in 30d

Description

### Description

The "Participants" tab on the hackathon details page requires pagination to improve on the participants' list load time. This requires some changes in the backend as well as the frontend. On frontend side, this can be achieved by using some packages like `react-pagination` or by creating custom pagination components.

### Details

File: `pages/hackathon/slug/index.js` (E.g. slug = "debug-it-2021")
Tab: Participants
Example Link: https://hackalog.copsiitbhu.co.in/hackathon/debug-it-2021

Contributor guide

Open the contributing guide

Research direction

Start in pages/hackathon/slug/index.js and inspect how the Participants tab loads and renders its list for a hackathon such as debug-it-2021. Trace the related backend request before choosing a pagination approach. Done means the Participants list loads paged results and the page supports moving through those results without loading the full list at once.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
backend, frontend, full-stack
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.