Please sign in to access this page

Device Dashboard

Device Dashboard Used AI

8 devlogs
27h 27m
Created by Toitsu

A modern, real-time dashboard for monitoring a network of ESP32 devices deployed throughout a building. Instantly track live metrics, such as device status, uptime, WiFi signal strength, and more!

Timeline

Ship 1

1 payout of shell 144.0 shells

Toitsu

2 months ago

Toitsu Covers 8 devlogs and 27h 27m

I added a modal for viewing per-device raw data for the last 7 days but I scrapped it due to me not having enough time to finish it. Other than that, I improved consistency again and I will now be shipping this for the first time!

Update attachment

I tried to add light mode support, but it was so frustrating. I wanted a toggle to change quickly between dark/light mode, but I just couldn't get it to work. There was a white flash every time i loaded the page. I used next-themes which should have prevented the flash, but it still flashed even in production build. After all of that, I decided to give up but I might revisit the idea in the future.

I improved the consistency of the code and UI and removed some bugs. I might have to use an UI library because the native components won't match my needs.

Update attachment

I finally added the uptime graph and did lots of small changes. It took a lot of debugging with the Chart.js cuz the documentation is a bit confusing and I couldn't find many answers online, but it kinda works now. I still got work to do, for example consistency across the dashboard, code cleanup and the ESP32 code needs to be updated to actually send the status updates.

Update attachment

I upgraded the dashboard with new data and additional info. I think the layout is beginning to be close to its final form. I just need to implement the uptime history to the ESP32 devices. It took a long time to get the layout right, but now I'm happy with it.

Update attachment

I've been working on the layout. I want to make it modern and epic but I'm still not quite sure what to add. The current layout is heavily inspired by Better Uptime dashboard. I'm planning to add uptime graph but adding it has some challenges related to the ESP32 devices not being always on by circumstances.

Update attachment

I added ability to sort devices and improved secrets handling and overall logic. Also added status counts to the top. The UI/layout still needs massive overhaul but I'm not yet sure what I want to add. I will at least be adding some kind of graph for the uptime in the future.

Update attachment

I added email/password authentication to the ESP32 code so that the ESP32 can insert data into Supabase, but the dashboard website for end-users can only read the data from Supabase. It took quite a while to figure out the RLS policies because Supabase is new for me, but I luckily got it working. The Arduino library i'm using in the ESP32 to connect to Supabase is quite old and undocumented so that was also a challenge, but everything works as intended now.

Update attachment

Hey, my first devlog! I used Next.js for the website and Supabase as the database. The dashboard is still in its early stages, but it still has some functionality. It updates the data from Supabase every time the user refreshes the page.

Update attachment