COM4RT Portal
Last Edited: 4 April 2022
Contributors:
| Name | Role |
|---|---|
| Ibrahim Izdhan | UI Design of dashboard and Real time graph View, Supabase Database configuration, Design of Serverless API Functions for Data logging with Vercel |
| Low Wai Sing | UI Design of Login and Signup Page |
Tags: node sveltekit tailwind css supabase
Status:
What is this?
COM4RT portal was designed as a real-time dashboard to view the data sent by a temperature and monitoring device that a user will register with the portal. The portal was built using Sveltekit and is served initially from the server and is subsequently hydrated client side. The UI is designed to be both accessible from a mobile or desktop browser.
 |
 |
|---|
Authentication was handled with Supabase as well as storing registered devices and data sent from said devices. Row level Security policies were implemented to protect pages and API routed from unauthorized access.
The portal allows for registration of devices (buddies as they were called) and generates a numeric ID for the Device. This ID is tied to the user email address as well.
 |
 |
|---|
The graph was made with Apex Charts and is therefore interactive.
Tech Stack Used
| Front End | Sveltekit, Tailwind CSS, Daisy UI |
|---|---|
| Back End | Node, Vercel |
| Authentication | Supabase |
| Database | Supabase |
Current Issues
-
Auth has issues with cookie not properly being deleted from browser though logout was successful server side.
-
Protected pages check if a user (email) is present in the browser
local storagerather than the session object provided by svelte leading to issues where users can access the site, though not interact, if they are idle for a long period, as cookie expires (access token) -
Realtime is implemented as a API Request sent every 5 seconds to check if any datapoint has changed due to clash with RLS and Supabase Realtime.
-
Currently the API that the device sends the readings to is not protected - as in it logs any request sent to the API - rather than validating before insertion.
Future Plans
As the project was simply done as a proof of concept for an IoT based device and its dashboard, no follow up is currently planned for the device. Perhaps in the future the same portal may be built with Nuxt 3 as Vue JS has better support for Supabase