Tablet Dashboard with Tailwind CSS and Livewire

That tablet that was always lying around, I had to do something with it. Obviously the result is a dashboard, but that kind of took a while. I tried multiple Dashboard templates, but that wasn't it. So, I decided to build it from the ground up. The result is a neat looking Dashboard, find the demo here.

For the frontend I used TailwindCSS; A relative new CSS framework that allows you to create websites without writing a single line of CSS. The only downside; long class attributes in the HTML.  The code snippet below is from the clock at the top.

<div class="max-w-3xl container mx-auto">
       <card class="w-full pb-10 font-poppins">
        	...
       </card>
</div>

The dashboard needs to get the metrics automagically, but we need something fancy. What about, only update the parts of the website that needs updating; introducing Livewire. The dashboard emits an event so that Livewire does a post request to the server, and retrieves the new View component, where this is intelligently updated into the window.

Adding cards needs to be a walk in the park, so I created a constructor that has access to all the cards classes (yes each card is separated into its own class) . The array $metrics holds all the cards, and $current_metric remembers which card we are displaying right now.

class Metric
{
    public string $icon;
    public string $name;
    public string $value;
    public string $description;
    public string $iconset;

    public int $current_metric = 0;
    
    public array $metrics = [
        OpenWeatherTemp::class,
        OpenWeatherPressure::class,
    ];
    
    ...
}

Of course the metric cards needs to abide by some rules, written in the abstract class that all cards extend. The four functions are all the values needed for the card.

abstract class Data
{
    public string $iconset = 'default';
    public abstract function icon(): string;
    public abstract function name(): string;
    public abstract function value(): string;
    public abstract function description(): string;
}

And voilá, we have a dynamic Dashboard, adding and removing cards is as easy as adding it to the array! The only thing that remains is finding some good API endpoints, news, info, data?

Thank you for reading, and have a nice day!