Client

The client directory contains codes and configurations/settings for the (React) NextJS front end and Firebase. The folder tree displays the relevant files and folders.

The NextJS frontend uses the pages router (opens in a new tab) since this is suitable for generating static pages to host on GitHub Pages. It uses the "container component" as a dominant pattern, also known as "component and presentational" components, for distinguishing between logic (container) and UI (component).

ℹ️

This documentation only contains information about relevant files and directories within the client directory. For more information about NextJS-specific files and configurations (such as the next.config.js, _app.js, or document.js files), please head over to the NextJS documentation (opens in a new tab) for Pages Router.

⚠️

Developers should take care not to "bake" or "build" sensitive data and information into the frontend build during the NextJS static build time with "next export" as part of Security - Sensitive Data Management.

Files

.env.example - example keys and values to put in the .env file
.firebaserc - Firebase configuration file
firebase.json - Firebase configuration file
firestore.rules - Firestore Rules definitions to publish in a Firebase project's Firestore Rules settings
storage.rules - Firebase Storage Rules definitions to publish in a Firebase project's Storage settings
Dockerfile.acap - multi-stage build Dockerfile definition for running the client on localhost development or as "built" static files for production deployment running on nginx.
package.json / package-lock.json - Contains definitions of the client's NodeJS dependency libraries

Folders

/pages

Components here serves as the "container" components in the container-component pattern, mostly component logic
ex: "pages/admin", "pages/admin/reports", "pages/bulletins", "pages/home"

/components

Components defined here serves as the "UI" counterpart of each "page" in the container components
They can contain nested UI components
ex: "components/admin", "components/admin/reports", components/bulletins", "components/home"

/components/common/ui

Common UI used everywhere
ex: loading spinners, modal, snackbar, skeleton loaders, fileuploader

/components/layout

UI for massive page-wide layouting

/components/entities

(main) UI with processing functions
ex: login, searchbar, auth hoc

/domain

UI subcomponents of main UI/features stored in the /components or /pages directory

/src/hooks

Custom hooks used for main objects

/src/services

Firebase API calls for main objects
ex: reports, bulletins, provinces, atbp

/src/store

Redux (toolkit) stores and slices
Used for managing and tracking heavy-weight main objects data
Convenient for passing data across deeply-nested React components
ex: reports, recommendations, municipalities

File Tree

.env.example
.firebaserc
Dockerfile.acap
firebase.json
firestore.rules
storage.rules
package.json
package-lock.json

Folder Structure Server