Frontend Application

React-based web application for IoT project management and FROST server data handling.

Overview

The sensorHUB frontend is a React web application that provides:

Project and group management
Device, sensor, and datastream management
Data entry and observation logging
Dashboards for project overview
User authentication via Keycloak
Group-based access control

Built with React 17, TypeScript, and Material-UI for a responsive, type-safe application.

Technology Stack (Main Libraries)

React 17.0.2 — UI framework
TypeScript 4.1.2 — Type safety
React Router 5.2.0 — Client routing
Material-UI (MUI) 5.5.2 — UI components
Redux Toolkit 2.8.1 — State management
Keycloak JS 26.2.0 — Authentication
Axios 0.27.2 — HTTP requests
Formik 2.2.9 — Form handling
Yup 0.32.11 — Validation
Styled Components 5.3.3 — Styling
AG Grid 34.1.1 — Data tables
Recharts 2.1.9 — Charts
Leaflet 1.9.4 — Maps
Date-fns 2.29.3 — Date utilities
React Toastify 9.0.8 — Notifications

High-Level Code Structure

src/
├── pages/                          # Page components
│   ├── Home.tsx                   # Landing page
│   ├── Register.tsx               # User registration
│   ├── DashboardPage.tsx          # Project dashboard (main view)
│   ├── ListClients.tsx            # Project/client list
│   ├── DataSpace.tsx              # Project details and overview
│   ├── Groups.tsx                 # Group management
│   ├── Stepper.tsx                # Multi-step data entry wizard
│   ├── QuickDataEntry.tsx         # Quick data entry for observations
│   ├── Reports.tsx                # Reports page
│   ├── Location.tsx               # Location details
│   ├── Datastream.tsx             # Datastream details
│   ├── Contact.tsx                # Contact page
│   ├── 404.tsx                    # Not found
│   ├── devices/                   # Device management
│   │   ├── ListDevices.tsx
│   │   ├── StoreDevice.tsx
│   │   ├── ListDatastreamPerDevice.tsx
│   │   └── Observations.tsx
│   ├── sensors/                   # Sensor management
│   ├── locations/                 # Location management
│   ├── datastreams/               # Datastream management
│   ├── observation_property/      # Observation properties
│   ├── audit_trails/              # Audit logs
│   ├── logBooks/                  # Log books
│   └── training/                  # Training documentation
├── components/                     # Shared components
│   ├── Sidebar.tsx                # Navigation sidebar
│   ├── DataGrid.tsx               # AG Grid wrapper
│   ├── DataGridServerSide.tsx     # Server-side pagination grid
│   ├── EntityFormModal.tsx        # Generic entity form modal
│   ├── DashboardComponent.tsx     # Dashboard card
│   ├── InfiniteDataTableCard.tsx  # Table with infinite scroll
│   ├── Footer.tsx                 # Footer
│   ├── GlobalStyle.tsx            # Global styling
│   └── [other UI components]      # UI utilities and helpers
├── routes/                         # Routing
│   ├── index.tsx                  # Route definitions
│   └── utils.tsx                  # PrivateRoute wrapper
├── store/                          # Redux state
│   ├── store.ts                   # Store setup
│   ├── rolesSlice.ts              # User roles and group state
│   └── types.ts                   # State types
├── hooks/                          # Custom React hooks
│   ├── useTheme.ts                # Theme management
│   └── createTheme.ts             # Theme creation
├── utils/                          # Utility functions
├── keycloak.ts                     # Keycloak client config
├── index.tsx                       # App entry point
└── App.css                         # Global styles

Key Features

Authentication & Access

Keycloak Integration — SSO and centralized user management
Group-Based Access — Users assigned to projects/groups with role-based permissions
Protected Routes — PrivateRoute wrapper for authenticated pages
Token Management — Automatic token refresh via Keycloak

Project & Data Management

Projects/Clients — Manage multiple FROST servers per user
Groups — Organize projects into groups
Devices — Create and manage IoT devices
Sensors — Manage sensors attached to devices
Datastreams — Handle data streams from sensors
Observations — Log sensor observations and readings
Locations — Geographic data for devices
Observation Properties — Define measurement types

Data Views

Dashboards — Overview of projects and device counts
Data Tables — Browse devices, sensors, datastreams (AG Grid)
Server-Side Pagination — Handle large datasets efficiently
Form Entry — Formik-based forms for data entry
Multi-Step Wizard — Stepper component for complex workflows
Quick Entry — Fast observation logging interface

Additional Features

Audit Trail — View system logs and changes
Log Books — Document project activities
Reports — Generate project reports
Training Materials — FROST, Node-RED, and web app tutorials
Notifications — Toast messages for user feedback

Core Architecture Patterns

Authentication Flow

User → Home → Keycloak Login → GroupInitializer → Redux Store
  ↓
Redux (rolesSlice) stores user groups and permissions
  ↓
PrivateRoute wrapper protects authenticated pages
  ↓
Component accesses user info via useKeycloak() hook

Data Management Pattern

Page Component → useEffect() fetch data via axios
  ↓
API request includes Keycloak token
  ↓
Response → setState (useState) or Redux dispatch
  ↓
Component renders with data or loading state

Form Handling Pattern

Formik manages form state
  ↓
Yup validates form values
  ↓
Entity Form Modal displays Formik form
  ↓
Submit → API call via axios
  ↓
Toast notification shows success/error

Environment Variables

REACT_APP_IS_DEVELOPMENT=true|false     # Development mode
REACT_APP_KEYCLOAK_URL=                 # Keycloak server
REACT_APP_KEYCLOAK_REALM=               # Keycloak realm
REACT_APP_KEYCLOAK_CLIENT_ID=           # Keycloak client
REACT_APP_API_URL=                      # API endpoint
REACT_APP_BACKEND_URL=                  # Backend URL
REACT_APP_GOOGLE_ANALYTICS_ID=          # Analytics tracking

Build & Deployment

Development:

npm install
npm start                    # Dev server on port 3000

Production:

npm run build               # Optimized build
docker build -t hefsensorhub_image_frontend .
docker run -p 3000:80 --env-file .env hefsensorhub_image_frontend

Docker:

Multi-stage build: Node.js → webpack → nginx
Port: 80 (default, mapped to 3000 in dev)
Static file serving via nginx
Environment config via .env file

State Management

Redux store (via Redux Toolkit):

rolesSlice — User roles, groups, selected group ID
Used with useAppDispatch and useAppSelector hooks

Local state (useState):

Form inputs, loading states, UI toggles
Component-level data (devices, sensors, etc.)

Styling Approach

Material-UI for component styling
Styled Components for custom styles
Theme Provider from Material-UI for theming
Global styles in App.css and GlobalStyle component

Code Organization Principles

Pages — Route-level components with full page logic
Components — Reusable UI units (forms, grids, cards)
Hooks — Custom React hooks for shared logic
Store — Redux slices for global state
Utils — Helper functions and utilities
Types — TypeScript definitions

Backend Keycloak