Tagebuch: Dashboard


Ein neues Projekt muss her. Diesmal geht’s um ein persönliches Dashboard/Startseite, ähnlich wie Momentum oder Hero Panel.

Außer unendlich vielen Ideen und einem frisch aufgesetzten GitHub Repository ist noch nicht viel passiert. In der README habe ich meine Motivation, Ideen und einen groben Plan aufgeschrieben.

Angelehnt an die anderen Tagebuch-Threads soll die Entwicklung von Anfang an öffentlich stattfinden. Das eigentliche Tagebuch ist Teil des Repositories, ich werde den Stand aber auch hier (re-)posten.


The journey begins :rocket:

With zero practical TypeScript experience, I’ve had some issues setting up the project, despite using a boilerplate. To get started, I’ve migrated three common JS components from my other app (button, link, icon). I’ve checked some best practices and popular Typescript/React projects, trying to do it the right way™ (e.g. correct types).

I’m really looking forward to experiencing the praised improvement over vanilla JavaScript. My IDE of choice, IntelliJ IDEA, supports TypeScript types for popular projects, so I’ve already got a good IntelliSense even without TypeScript .

The CI pipeline is on and the project is already live (not much is going on, though).


I had to make a decision: what responsive behavior should the dashboard grid follow? There are multiple approaches:

  1. Hero Panel uses pixel-perfect sizings and breaks at 700px into 1x1 widgets. This makes the widgets always look good, as they are fixed-sized. However, the content is simply cut above the breakpoint if it does not fit into the viewport. Also, I prefer seeing more content than a 1x1 widget in mobile view.

  2. Use a masonry layout. This approach makes sure to place all widgets optimally at all breakpoints. This is great for content where the order doesn’t matter. However, on a dashboard I don’t want my widgets to move around auto-magically.

  3. Let the user define the layout for each breakpoint. Meh, too much work for the user.

  4. Make the widgets fluid and break into a single column at 767px (example). Also add a max width to prevent over-stretching the content.

I think that #4 is the best trade-off.

I’ve implemented a simple Dashboard using CSS Grid. The user may define the number of columns and rows and assign a relative width and height for each widget. In the future, this should be configurable within the UI (drag and drop), but for a MVP this is enough.


I’ve implemented the first, very basic widget: Text Widget. It just displays fixed text, nothing fancy. Maybe it can be extended to support some basic formatting options in the future.

Most work happened under the hood. I’ve cleaned up the code and tried to establish a good framework to build upon.