TH
Back to projects

Fullstack Developer / IoT Developer

Clean Water Monitoring

Final-year project connecting water-quality sensors to a real-time dashboard. MQTT feeds Firebase; React and an Express API support location maps, issue reporting, and separate LINE LIFF and admin authentication flows.

Contribution
Fullstack Developer / IoT Developer
Built with
React, Node.js, Express, Firebase Realtime Database, MQTT
Live demo
Image 1 / 4View full size

Mobile views showing a service-point map, water readings, and a location list.

Inside the project

How does a sensor reading become something people can use?

This final-year project connects water-quality sensors to a dashboard and a service-point map. The story continues in the automated checks built around the same system.

Look inside this system

  1. Sensors

    Sensors measure pH, TDS, turbidity, and temperature.

  2. MQTT

    MQTT carries the sensor readings to the data service.

  3. Firebase

    Firebase Realtime Database stores and syncs those readings.

  4. Dashboard

    The React interface presents water readings alongside service-point locations.

Archived Playwright terminal excerpt with completed admin dashboard, issue, location-management, and user-management checks.
Archived execution-log excerpt showing named admin UI checks.
See the testing work around this system
See the API, UI, and E2E testing for this system

My contribution

  1. Design & implement RESTful API with Express.js
  2. Build responsive React frontend with Chakra UI
  3. Integrate Firebase Realtime Database for data persistence
  4. Implement MQTT service for IoT sensor data
  5. Setup LINE LIFF authentication flow
  6. Create admin dashboard for location, user & device management
  7. Develop issue reporting workflow with Cloudinary image upload
  8. Deploy frontend to Vercel, backend to Render

Design & engineering decisions

  1. Full-stack development (React + Node.js/Express)
  2. IoT integration with MQTT protocol
  3. LINE LIFF authentication
  4. Admin dashboard + User portal

What it does

  1. Real-time sensor dashboard with pH, TDS, Turbidity, Temperature charts
  2. Interactive map with water service point locations (Leaflet)
  3. User authentication via LINE LIFF + Admin JWT login
  4. Issue reporting system with image upload (Cloudinary)
  5. Lab document management & upload
  6. User management with role-based access (Admin, Lab Staff, User)
  7. Activity logs & audit trail
  8. Device management for IoT sensors
  9. RESTful API with 6 route modules (auth, locations, issues, users, devices, logs)

Technologies

  • React
  • Node.js
  • Express
  • Firebase Realtime Database
  • MQTT
  • LINE LIFF
  • JWT Authentication
  • Chakra UI
  • Chart.js
  • Leaflet
  • Cloudinary

Available for conversations about web and testing work

Something in mind?

For web development, software testing, and opportunities to work together.

[email protected]
Contact detailsGitHub