Freek Van der Herten: Building a realtime dashboard powered by Laravel, Vue, Pusher and Tailwind (20

Freek Van der Herten has a tutorial posted on his site sharing the 2018 edition of how to build a dashboard powered by Laravel, Vue, Pusher and Tailwind CSS. It's based on a project they use internally to keep up to date on current work, events and even music people are listening to.

At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which tasks each of our team members should be working on, what music they are listening to, and so on.

[...] This dashboard is not entirely new. The initial version was published a couple of years ago. At our company, we like to tinker with new stuff. That's why we perform a big cleanup of the source code every year. We also update all the dependencies and technologies used. This year we focused on updating the design. The dashboard now uses Tailwind CSS. In this blog post, which is an update to the previous one, I like to explain how this dashboard is built.

He starts with a bit of history of the project and a look at the UI before diving into the code. The remainder of the (lengthy) tutorial is then broken down into functional pieces, each with code and explanation:

• the creation of the markup for the grid
• a closer look at the "internet connection" component
• a closer look at the "statistics" component
• the use of "dark mode" depending on the sun being up
• displaying sites that are down

There's also a mention of the security requirements involved in the creation and use of the dashboard, the hardware used to show it on the TV and how data is saved to prevent the need for the initial "reboot" of the data.