Water Level Monitoring WebApp
Frontend Developer · Team of 6
A web application for monitoring water levels across the Flanders region in real time, built for the company CIPAL as part of a team project.
Overview
About the project
Water management teams in Flanders needed a single, accessible place to monitor water levels across many sensor stations in real time, with timely warnings whenever a level crosses a critical threshold.
The team integrated existing sensor infrastructure through the waterinfo.be APIs, processing the incoming data with Node-RED before it reached the application. I focused on the user facing layer, building a Streamlit web app with login and registration, interactive water level charts, customisable alert thresholds for notifications, and file management for sensor configuration, all backed by Firebase, whose integration I helped coordinate.
We delivered a working, user friendly application that lets stakeholders monitor water levels across Flanders, set their own alert thresholds, and manage sensor files from one central place.
System Overview
At a glance
A team built web application for monitoring water levels across Flanders in real time. Sensor data flows in through the waterinfo.be APIs, is shaped by Node-RED, and is surfaced in a Streamlit interface backed by Firebase. My focus was the user facing layer and the Firebase integration.
How It Works
System Architecture
waterinfo.be API
Source of live water level sensor readings
Node-RED
Processes the incoming sensor data
Streamlit App
The user facing monitoring dashboard
Firebase
Authentication and file storage backend
Process Flow
How the project moves from start to finish, step by step.
Collect
Sensor readings flow in through the waterinfo.be APIs.
Process
Node-RED shapes and cleans the data before it reaches the app.
Visualise
The Streamlit app charts levels and triggers threshold alerts.
System Breakdown
Subsystems
Each subsystem owns one slice of the data path, from sensor to user.
Sensor Ingestion
waterinfo.be API
Live water level sensor readings for the region.
Polling Layer
Pulls current readings at a defined cadence.
Data Processing
Node-RED Flow
Cleans, normalises, and routes the readings.
Threshold Logic
Compares levels against user defined warning thresholds.
User Interface
Streamlit App
Front end for monitoring, configuration, and alerts.
Interactive Charts
Water levels over time for each monitoring station.
Custom Alerts
Threshold based notifications a user can configure.
File Management
Central place to upload and manage sensor configuration files.
Backend
Firebase Auth
Login and registration for end users.
Firebase Storage
Persistence for sensor configuration files.
Grafana Layer
Additional visualisation layer for sensor analysis.
Workflows
Data Path
How a sensor reading travels from the field to a user dashboard.
Collect
Purpose: Bring in fresh sensor readings from the waterinfo.be APIs.
How it works
- Poll the API for the configured set of sensor stations.
- Pull each station's most recent water level reading.
- Tag every reading with its source station and a timestamp.
Process
Purpose: Shape raw readings into something the UI can use.
How it works
- Node-RED normalises and cleans every incoming reading.
- Threshold logic compares the value against user defined warning levels.
- Cleaned readings flow into the Streamlit app and Firebase.
Visualise and Alert
Purpose: Give users a live view and timely warnings.
How it works
- Streamlit charts the current and recent levels for each station.
- Threshold breaches trigger user notifications.
- Users can adjust thresholds and manage sensor configuration files.
What It Does
Features & Capabilities
User Accounts
Login and registration backed by Firebase authentication.
Interactive Charts
Water levels shown over time for each monitoring station.
Custom Alerts
User defined thresholds that trigger timely notifications.
File Management
Central storage for sensor configuration files.
Running It