Homeserver Dashboard
- 6 Devlogs
- 12 Total hours
A Homeserver dashboard where all containers and their website ports are stored to quickly open them.
At first, adding or deleting service cards required manually hardcoding HTML into the index.html file. Now, the dashboard is fully dynamic! You can manage your services directly via the “+ Add Service” button / ui and all data is instantly saved in the browser’s localStorage,
Though, when moving from hardcoded files to user inputs, you openup two dangerous vulnerabilities: XSS (Cross-Site Scripting) and URL Script Injection (e.g. entering javascript:alert(‘test’) into the URL field to execute code). To fix that, I changed the saving logic. Here is what I added:
if (!url.toLowerCase().startsWith(‘http://’) && !url.toLowerCase().startsWith(‘https://’)) {
return alert(’The URL must start with http:// or https:// ’);
}
So now it has to start with http:// or https:// and you cant add code because it would just open a website.
I am working on an update that gives the option to add a card through the website (so you dont have to hardcode it in to the file like before). I finished the button and i am working on the java script for the popup of this button where you need to enter a name, url and (optional) a description. Im on it and its a bit difficult. I will keep you updated!
Fixxed a bug where the status indicator would sometimes not be showed when hovered over the boxes for some reason. Done :)
Ship #1
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 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 :)
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.
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.
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
