Homeserver Dashboard

@timon on Homeserver Dashboard · 3 days ago

17m 5s logged

Fixxed a bug where the status indicator would sometimes not be showed when hovered over the boxes for some reason. Done :)

Ship #1 Pending review

@timon on Homeserver Dashboard · 7 days ago

I built a simple selfhosted server dashboard (template). It shows main services like Portainer, Nextcloud, Proxy Manager, and Pi hole (which you can customize yourself) in a grid layout with access buttons to the link with ports.

The most challenging parts were the clock and the status indicator system.
The clock seemed simple at first, but making it update correctly every second and stay formatted (00:00:00 style) took some trial and error.
The status indicator (online/offline dots) was also difficult because I needed to figure out how to check if a web service is reachable from the browser. I used AI help to understand me how the checking works

Im proud of how clean and minimal the final design turned out. It feels nice to use and i will use this dashboard myself.

To test it, just open the HTML file in a browser. The layout and clock work immediately. For the status indicators, you need to replace the data-url in each card with the real URL of your service (for example http://localhost:9000). The dot will turn green if the service is reachable and red if it is not.

To add a new card just copy an existing card block in the HTML file, change the title, describtion, buttons and set the url like explained before :)

4 devlogs
3h

Try project → See source code →

Open comments for this post

@timon on Homeserver Dashboard · 7 days ago

16m 37s logged

I made the status dots feature actually work. Each card now has a dot that shows if a service is online or not. If the service works, the dot is green, if not it is red. It updates automatically every few seconds.

I used some AI help and also looked up a few things on Google to understand how to check if a website is reachable in JavaScript.

Open comments for this post

@timon on Homeserver Dashboard · 7 days ago

49m 24s logged

I added some UI improvements for the dashboard and the status indicators (the little dots on the cards).

At first I ran into a problem where the animation didn’t behave correctly and the status dots were not showing properly once hovered. It took a bit of testing, but I figured out that it was related to the CSS setup and how the hover/animation effects were combined.

After adjusting the everything started working as expected again.

Open comments for this post

@timon on Homeserver Dashboard · 7 days ago

2h 4m 23s logged

Started working on a small internal dashboard for my Docker services. The goal is to keep everything simple and just get a clean dashboard with quick links to containers and self-hosted apps.

Most of the time went into getting a idea (even though its pretty simple now) My first version looked too plain, while another version felt way too much and for a utility page.

Current progress:

page structure finished
grid layout working
Header and live clock working
Example service cards added