Tech Stack Overview
Asset Information Centre is a modern React SPA with a Firebase BaaS backend.
Architecture pattern
| Layer | Technology | Role |
|---|---|---|
| Presentation | React 18 + TypeScript | UI components & routing |
| UI framework | Material UI 5 | Design system, Data Grid, icons |
| Build tool | Vite 5 | Dev server, HMR, production bundling |
| Backend | Firebase 10 | Auth, Firestore, optional Hosting |
| State | React Context | Auth, notifications, mail, settings |
Runtime
| Component | Version |
|---|---|
| Node.js | 18.x – 20.x LTS |
| npm | 9.x – 10.x |
| TypeScript | 5.3.x |
| ES target | ES2020 |
Browser support
Production builds target browsers with >0.2% market share (see browserslist in package.json).
Data flow
User action → React component → Service layer → Firestore SDK → Cloud Firestore
↓
AuthContext (role + permissions)
↓
RBAC check (hasPermission)
Security stack
| Feature | Library / Service |
|---|---|
| Authentication | Firebase Auth |
| SSO | Firebase OAuth providers |
| MFA | otplib (TOTP) |
| Passkeys | @passwordless-id/webauthn |
| Authorization | Custom RBAC + Firestore rules |
Export & documents
| Feature | Library |
|---|---|
| Excel export | xlsx |
| PDF export | jspdf, pdf-lib |
| Charts | recharts |
| QR codes | qrcode.react |
| E-signatures | react-signature-canvas |
Documentation site
| Tool | Version |
|---|---|
| Docusaurus | 3.7.x |
| MDX | 3.x |
Located in /documentation folder.