-
Notifications
You must be signed in to change notification settings - Fork 43
React App
The frontend web application provides a UI that interfaces with the backend API. This provides users a way to manage property inventory and dispose properties through any modern web-browser.
It is primarily written using TypeScript, a language that builds upon JavaScript to add static type annotations.
Code for this service is found here.
React is a free and open-source frontend JavaScript library for building user interfaces based on components by Facebook Inc.
Developers can create and combine components that are defined in a combination of JavaScript and the HTML-like JSX (and TSX with TypeScript).
To learn more about React, check out their website.
The frontend application currently uses Vite for both development and production builds.
The result of the Vite build is served using NGINX.
See the README file in /react-app for more information on how to run the application.
One of the key features of PIMS is the spatial representation of properties within a map.
Leaflet is used to render the map component. It has the ability to draw markers quickly and responsively for each property in the PIMS inventory.
To group properties in close proximity, the Supercluster library is used. It takes multiple geojson objects and combines them into a single map marker.
Many of the inventory features in PIMS require complex forms. To handle this requirement, React Hook Form was chosen as the library to build and manage these forms. It provides built-in validation controls and allows an architecture where each form can be separated in terms of scope yet similar in construction.
Material UI (MUI) offers a suite of modern frontend components. These pre-styled components provide consistent logic, behaviour, and style.
React Testing Library is used for unit testing in the React App service. It's integration with Jest allows for testing consistency between the React App and Express API services.
The file structure of this service is broken down as follows:
/src
├── App.css
├── App.tsx
├── assets
│ ├── icons
│ └── images
├── components
│ ├── adminAreas
│ ├── agencies
│ ├── common
│ ├── dialog
│ ├── display
│ ├── fileHandling
│ ├── form
│ ├── layout
│ ├── ltsa
│ ├── map
│ ├── projects
│ ├── property
│ ├── table
│ ├── text
│ └── users
├── constants
├── contexts
├── guards
├── hooks
│ ├── api
├── index.tsx
├── interfaces
├── pages
├── themes
├── utilities