Enhancement - Follow up on Pagination and UI improvements

[KC900201]

Description

• It's been almost a year since the waiting for the pagination feature (Pagination (suggestion) #15). Since there are no updates, I would like to follow up with the feature on this new ticket to include it in the suggestion lists for improvement

Improvement List

• Follow-up with the pagination feature (Will implement it from scratch from this ticket)
• Improvement on the UI layout for the website using Astro-catered UI library. Suggestion is StarWind UI
  
• Create a progressive web app (PWA) for Devpedia to improve offline accessibility

Expected behavior

• The pagination feature for the web is implemented (Unit testing will be included)
• The user interface could be improved for a fresh new outlook using Astro.js-catered UI library
• A PWA for Devpedia is created

Additional references

• StarWind UI
• Learn PWA

[KC900201]

@RayMathew @Buzzpy please review

[RayMathew]

Hey :) Been a while. Hope you're doing well! Sounds good to me. Could you elaborate on what kind of improvements you're thinking for the UI?

[KC900201]

Hi @RayMathew,

It's been a while. Sorry for the late reply, as I was occupied with other urgent matters. As these improvements will need some time to accomplish, below are my elaborations for the proposed improvements:

1. Further implement the missing pagination feature (Pagination (suggestion) #15) from my side from scratch. (2 ~3 working days)
2. Revamp the UI design for the website using the Astro-tailored Stardwind UI, which is styled with Tailwind CSS with ready-to-use components and allows for self-customisation. As this is a total overhaul for the web application, I would propose to open a new branch once pagination is done (5 ~ 7 working days)
3. This may be omitted, but I would like to create a progressive web app version of the website for more accessibility, so that user can "install" on their device from the browser without app store requirements.

Depending on your feedback, I would advocate for quickly working on the first improvement.

cc @Buzzpy

[RayMathew]

Sounds good. Pagination is a must-have for sure.

About the UI design, do you have a mockup or something to show what the revamped UI would look like? Would probably make it easier for @Buzzpy to make a decision on whether to give the go-ahead.

No complaints about the PWA either.

[KC900201]

Hi @RayMathew,

So sorry for the late update.

Thanks for the feedback. I can work on the pagination starting from next week (24th August) by latest. However, I don't have a readily available mockup for the proposed UI revamp for now, which I should probably be able to prepare afterwards (2 - 5 days working days). You can refer to my mock project to have a preview of how StarWind.UI integrated in Astro.js project. They also have some templates to be refer.

The PWA would be the lowest priority as of now.

cc: @Buzzpy

[RayMathew]

Cool, no worries. I would suggest then maybe you can work on the pagination in a branch, and wait on @Buzzpy before starting any work on the UI revamp.

[KC900201]

@RayMathew , @Buzzpy,

Hi, I'm here to announce that the pagination logic is completed, with PR #206 is submitted for peer review and approval.

Once PR #206 is approved and merged to master branch, I'll proceed with option 2 and 3 on the list to follow-up

[KC900201]

@RayMathew , @Buzzpy,

Hi, I'm here to announce that the pagination logic is completed, with PR #206 is submitted for peer review and approval.

Once PR #206 is approved and merged to master branch, I'll proceed with option 2 and 3 on the list to follow-up

@RayMathew, @Buzzpy

Any updates?

[Buzzpy]

On it! I'm unsure about a UI revamp however, I'll think a bit more about it and get back to you.

In the meantime, if possible, could you provide a rough idea of the new UI you are suggesting (just a sketch would suffice!); no pressure or rush, ignore if you're busy.

[KC900201]

Hi @Buzzpy,

Apologies for replying late. I may not have time to provide a detailed UI layout for the revamp, but I'll try to work on a sketch (low-fidelity prototype) especially on the homepage revamp.

Basically, some of the elements (highlighted blue) may take too much space in the heading of the page, so we can relocate them to the footer after the pagination is implemented. While the buttons (highlighted red) also take up much of the spacing, and we can reorganize them based on their common functions.

The prototype may take 2-3 days to complete.

[KC900201]

Hi @Buzzpy,
cc: @RayMathew

since pagination is completed in #206, I will continue work on the remaining tasks for this ticket,

• Improvement on the UI layout for the website. (Will provide a rough layout later)
• Create a PWA

[KC900201]

Created PR #211 for the UI layout improvements.
cc: @RayMathew, @Buzzpy