Back to Projects

Clean Water Monitoring

Fullstack DeveloperIoT Developer

Final Year Project - Real-time water quality monitoring system. Built with React frontend and Node.js/Express backend, integrated with IoT sensors via MQTT. Features include admin dashboard, user mapping, issue reporting, and LINE LIFF authentication.

Clean Water Monitoring 1
Click to Expand
Clean Water Monitoring 2
Click to Expand
Clean Water Monitoring 3
Click to Expand
Clean Water Monitoring 4
Click to Expand
Thumbnail 1
Thumbnail 2
Thumbnail 3
Thumbnail 4

Key Features

  • 01Real-time sensor dashboard with pH, TDS, Turbidity, Temperature charts
  • 02Interactive map with water service point locations (Leaflet)
  • 03User authentication via LINE LIFF + Admin JWT login
  • 04Issue reporting system with image upload (Cloudinary)
  • 05Lab document management & upload
  • 06User management with role-based access (Admin, Lab Staff, User)
  • 07Activity logs & audit trail
  • 08Device management for IoT sensors
  • 09RESTful API with 6 route modules (auth, locations, issues, users, devices, logs)

Highlights

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

Technologies

ReactNode.jsExpressFirebase Realtime DatabaseMQTTLINE LIFFJWT AuthenticationChakra UIChart.jsLeafletCloudinary

Responsibilities

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

Project Links

Demo