Project overview
HydroPulse is an end-to-end smart water monitoring ecosystem that connects embedded device firmware, secure cloud communication, an authenticated monitoring portal, and a dedicated public product website. Rather than treating hardware and software as separate demonstrations, the project brings them together as parts of one integrated product.
My work spans the ESP32-based device software, the backend and responsive monitoring experience, and a separately implemented branding website that explains the solution to prospective users.
01 — The problem
Water-tank levels are often checked manually, making it harder to follow changes over time or recognize important level conditions without visiting the tank. A useful monitoring product must turn sensor readings into understandable information while making device access, security, and onboarding practical for real users.
02 — The HydroPulse solution
HydroPulse uses an IoT monitor to measure water levels and send telemetry through a secure communication path. Backend services process and store readings, while authorized users view current status, trends, historical information, and device-related features through the monitoring portal.
A separate product website introduces the system, explains how it works, provides setup guidance, and directs existing customers to the secured portal. The website's animated tank preview is an illustrative demonstration, not live sensor data.
03 — Three connected implementations
- Embedded firmware: ESP32 device software for sensor measurement, calibration, connectivity, provisioning, and MQTT-based communication.
- IoT monitoring platform: A React frontend and Node.js backend for authenticated access, device management, telemetry, dashboards, and historical monitoring.
- Branding and product website: An independent React website for product education, demonstration, enquiries, and access to the monitoring portal.
Each implementation has a separate technical responsibility and can be reviewed in the Project Components section of this case study.
04 — Branding website implementation
The public-facing HydroPulse website was designed to make the product understandable before a customer signs in or asks about a monitoring setup. It combines a branded hero section, feature cards, a step-by-step explanation, selected portal showcase imagery, onboarding information, FAQs, and clear enquiry and portal-access routes.
- Responsive product design: Optimized layouts and navigation for desktops, tablets, and smartphones.
- Visual storytelling: Water-themed motion graphics, optimized background video, and a simulated tank-level preview clearly distinguished from real telemetry.
- Product showcase: Reviewed screenshots of the monitoring interface and explanatory device visuals, with privacy-conscious presentation.
- Enquiry workflow: A validated contact form using Formspree, explicit consent, and optional verified direct-contact methods.
- Accessibility: Keyboard-friendly navigation, focus management, semantic content, and reduced-motion and data-saving accommodations.
- Discoverability: Search and social metadata, canonical URLs, sitemap, robots directives, preview artwork, and public legal pages.
The branding site is deliberately isolated from firmware, MQTT connections, databases, and device controls. It provides product information and a link to the monitoring portal without exposing operational capabilities.
Product website: hydropulse.live.
05 — Engineering and architecture decisions
The ecosystem separates device firmware, cloud services, the authenticated portal, and the public marketing website. This gives each layer a clear responsibility and allows the website to be updated independently of monitoring operations.
The branding application uses React and Vite with static hosting-friendly output. The project includes public URL validation, production-build checks, asset and security-header configuration, and manual accessibility and deployment checklists.
06 — Outcome and next documentation
HydroPulse demonstrates end-to-end engineering across embedded systems, real-time data services, frontend interfaces, and product presentation. The branding website contributes a polished, accessible entry point that explains the connected monitoring experience without requiring a user to access private operational screens.
Detailed firmware and portal implementation notes, architecture evidence, and grouped screenshots are documented as separate components of this same portfolio project.
