Project - Machine Monitoring Platform (School Project)
A school project: built a real-time machine monitoring dashboard using Supabase and Next.js for Q3 Concept B.V. to visualize production data and track mold health.
- Client
- Q3 Concept B.V.
- Year
- Service
- Full-Stack Development
Machine Monitoring Dashboard (School Project)
Project Overview
This was a school project for Q3 Concept B.V. The goal: build a simple web dashboard to monitor machine and mold usage in real time. I used Supabase (for the database, auth, and live updates) and Next.js (for the frontend). No custom Node.js API, just Supabase and Next.js working together!
How It Works
- Supabase stores all the machine and mold data in PostgreSQL tables.
- Real-time updates: when a machine or mold changes, Supabase instantly pushes the new data to the dashboard (no polling needed).
- Authentication is handled by Supabase. Users log in with email/password.
- The Next.js frontend fetches and displays live data, with simple charts and tables for easy monitoring.
Key Features
- Live machine status and production counts
- Mold health tracking (see when a mold needs maintenance)
- Simple dashboards for students, operators, and managers
- No custom backend. All logic is in Supabase and the Next.js app
Tech Stack
- Supabase (PostgreSQL, Auth, Realtime)
- Next.js (React, API routes for edge cases)
- Recharts (for graphs)
- Tailwind CSS (for styling)
What I Learned
- How to use Supabase for a full-stack project without writing a custom backend
- How to connect Next.js to Supabase for real-time data
- How to build a dashboard that updates instantly as data changes
This project was a great intro to building real-time web apps with modern tools. Supabase and Next.js made it possible to focus on features, not boilerplate. If you’re a student, I highly recommend trying this stack for your next project!