kachun333 / kmpk-1617-grad-mag

A web app dedicated for 2016/17 KMPk graduates

KMPk 16/17 Grad Mag

A Graduation Magazine web app dedicated for 2016/17 Kolej Matrikulasi Perak (KMPk) graduates.

Contributing

There are many different ways to contribute to the development. If you're interested, check out our contributing guidelines to learn how you can get involved.

Getting Started

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

kmpk-1617-grad-mag's Issues

Rebranding

this project will be rebranded.

OurPromise will be renamed as KMPk 16/17 Grad Mag

the display name for the end users will be rebranded as
short name: 醇忆 Grad Mag
long name: KMPk 16/17 Grad Mag

for technical folks, the name will be rebranded as
github project name: KMPk-1617-Grad-Mag
real name: KMPk 16/17 Grad Mag

Notes

Grad Mag means Graduation Magazine

Unable to commit using Github Desktop

Environment: Windows 11
Github Desktop version: Version 3.1.2 (x64)
Logs:

2022-12-23T12:16:09.052Z - info: [ui] [Timing] Action 'create commit' for 'kachun333/OurPromise' took 3.195s
2022-12-23T12:16:34.740Z - error: [ui] `git commit -F -` exited with an unexpected code: 1.
stderr:
husky - pre-commit hook exited with code 1 (error)

migrate axios to react-query

react query is really really good

• state tracking (isLoading, isError)
• clean API
• caching
• query invalidate when query keys is changed

https://tanstack.com/query/v4/docs/adapters/react-query

Update App dependencies

for security reasons, update all app dependencies.

Be aware to not break the existing feature of the app.
Read the migration guide.

v2 cloud functions

• /verify
  • will migrate to /v2/verify
• /committee/registration
  • deprecated
• /graduates
  • will migrate to /v2/graduates
• /graduates/:id
  • deprecated
• /magazine/chapIntro/:chapId
  • deprecated
• /lecturers
  • will migrate to /v2/lecturers

v2 will only expose 3 APIs.
The source code of old APIs will not be removed in v1.3.0, instead they will be removed in v1.4.0

Lazy Load Graduates in Graduates Page

in Graduates Page,

the app should not render all 160 graduates at once.

• the loading time is longer
• the mobile data usage is higher

The app shall load more graduates as the user scroll.

add contributing guide

just in case there are enthusiast who like to contribute

Update CONTRIBUTING.md

the default branch has changed from master to main

also added a dev branch, all development-related PR should be targeted to the dev branch.

documentations or .github related PR can optionally merge to the main branch directly

Reference:

• React Router Contributing Guide is a good example to follow

Keep Graduates Images in Firebase Cloud Storage

Firebase Cloud Storage is more cost-effective than Firebase Hosting

Reference:
Firebase Pricing

Migrate to use latest version of mui

v4 has been deprecated, use latest mui from https://mui.com/ instead

Add Pull Request Template

• use keywords to resolve issues (if applicable)
  • if the issue is not yet resolved but it's related, link the issue to the PR
• add screenshots if necessary
• link references or useful notes

related to CONTRIBUTING.md

Use Next Gen Image Formats

images in /assets folder should use next-gen image format to help users save their mobile data usage

can consider using the WebP image format

A balance between small image size and high image quality

• image size should not be more than 200KB
• Image should look good on a 1920x1080 monitor

Update Depedencies of Cloud Functions

update all dependencies of cloud functions, which includes (but is not limited to)

• node 8 -> node 18
• firebase SDK

Dark Mode

support both light mode & dark mode
users are allow to change theme at runtime/real-time

checkout mui doc

Setup CI/CD pipeline

Improve productivity

improve readMe

readme should contains useful information, instead of the readme that been generated by create react app

Service Worker should cache network images

modify service-worker.ts to add a rule

when hostname is https://storage.googleapis.com/ourpromise.appspot.com, and the file extension is webp,
cache it for 1 year

Add Issue Template for Enhancement Request

so that contributors understand the purpose of the enhancement or the needs of the end-user
related to CONTRIBUTING.md

Reference: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/about-issue-and-pull-request-templates

KMPk Captcha

Select image that only KMPk-ians will know

Algo:

• web app initiate verify process
• server randomly choose 9 images and pass to client
• web app allow 1 to 9 selection of image
• web app pass the selection & the choices to server
• server verify the selection with correct answers (stored in somewhere with restricted access)
• server only allows fixed amount of retry (5 attempts)
• server will ban the account if user been banned
• user allow to contact administrator to remove ban if it's a mistake
  • via github issue or
  • via email or
  • contact Ka Chun

remove redux

node_modules is not cached in CI pipeline

we can save CI pipeline time if node_modules is cached

see full logs https://github.com/kachun333/OurPromise/actions/runs/3741372111

Add CODE_OF_CONDUCT.md

the CONTRIBUTING.md should link to CODE_OF_CONDUCT.md created

Reference:
https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project

Migrate Cloud Functions to Typescript

Reference:
https://firebase.google.com/docs/functions/typescript

Setup Service Worker

since most of the data are static (not going to change), we can cache the images & fetched data to save mobile data as well as server usage

when a new version of the app is deployed, all cache must be invalidated.

Add Issue Template for Bug Reporting

so that all bug reported contains sufficient information to reproduce
related to CONTRIBUTING.md

Reference: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/about-issue-and-pull-request-templates

Firebase v9 refactoring

https://firebase.google.com/docs/web/modular-upgrade

use modular style import

Use Flow or Typescript

A lot of development features are lacking if we are using plain JS.

We can improve our productivity by taking advantage of static type checker

Setup Prettier

it helps to improve development productivity

update react-router to v6

Follow the migration guide below
https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v6

Hide/Show on scroll is broken

Hide on scroll

Show on scroll

More Graduates Search Filter Capabilities

Improve the search/filter capabilities on graduates page.

users should be able to filter by

• gender
• birthday month
• class

users should be able to (substring) search by

• name
• Chinese name

Setup Eslint

to improve productivity

Timer Counter

count how many years/months/days/minutes/seconds we have left KMPk 😭

Graduates Pagination

the loading speed when first route to /graduates is extremely slow

this is especially shown when user click back button from GraduatesDetails (/graduates/1 ) page

Images not displayed in legacy browser

Description

webp is not supported by legacy browser

Reproduction steps

choose a legacy browser that doesn't support web. Apple's devices are a good testing device.

https://caniuse.com/webp

Expected behavior

images should be shown

Screenshots

No response

Browsers

Safari

OS

Mac

Additional information

No response

Better Navigation in Graduates Page

Users should be able to intuitively navigate inside the graduates page.

• click/tab to view details of graduate (can consider bottom sheet)
• swipe left/right or click left/right button to view prev/next graduate
• view graduate image in full screen (portrait mode & landscape mode)
• swipe down to close modal, and continue view all graduates

Gradaute Image srcset attribute

use responsive images to save bandwidth as well as improve render performance (LCP)

set xrobotstag in firebase.json

this webpage should not be crawled

Reference:
https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag#xrobotstag