Skip to content
Back to work overview
Work

GitlabHost Dashboard

Front-end engineer (with designer Martijn Runia)

By

GitlabHost Dashboard screenshot: home

I built the GitlabHost dashboard front end from design to shipped UI. It brings onboarding, instance and runner management, billing, support, and account settings into one product that feels consistent day to day.

Project context

Challenge

The dashboard had to support many workflows and edge states without feeling like separate tools stitched together.

Approach

Martijn set the visual direction. I turned that into reusable Django templates and front-end components with HTMX, Alpine.js, Tailwind CSS, and Chart.js. We walked through the key user flows in the browser and captured the important states so design and implementation stayed in sync. Feature-level technical implementation was handled by GitlabHost's in-house development team.

Outcome

The dashboard now feels like one product instead of separate tools. Even complex flows stay readable, and new modules can be added without rebuilding the UI.

Impact

  • 22 key screens selected from a full route inventory.
  • Shared UI patterns across onboarding, billing, support, and settings.
  • Faster handoff because new states reuse existing UI structures.
Django HTMX Alpine.js Tailwind CSS Chart.js Dashboard UX
Gallery
GitlabHost Dashboard screenshot: /1-1-instance-general/
GitlabHost Dashboard screenshot: /1-2-instance-runners/
GitlabHost Dashboard screenshot: /1-5-1-instance-maintenance-job-detail/
Load 18 more
GitlabHost Dashboard screenshot: /1-2-1-runner-detail/get-runner-01/
GitlabHost Dashboard screenshot: /2-1-1-activate-instance-instance-details/
GitlabHost Dashboard screenshot: /2-1-2-activate-instance-gitlab-details/
GitlabHost Dashboard screenshot: /2-2-4-activate-runner-creating/
GitlabHost Dashboard screenshot: /3-1-1-quote-detail/S01173/
GitlabHost Dashboard screenshot: /4-0-shop/
GitlabHost Dashboard screenshot: /4-1-1-shop-instance/
GitlabHost Dashboard screenshot: /4-2-2-shop-runner-cpu-optimized/
GitlabHost Dashboard screenshot: /5-0-cart/
GitlabHost Dashboard screenshot: /6-1-1-support-ticket-detail/12345678/
GitlabHost Dashboard screenshot: /6-2-support-files/
GitlabHost Dashboard screenshot: /6-3-support-id-verification/
GitlabHost Dashboard screenshot: /2-1-settings/
GitlabHost Dashboard screenshot: /8-1-notifications/
GitlabHost Dashboard screenshot: /9-5-admin-data-export/
GitlabHost Dashboard screenshot: /auth/login/
GitlabHost Dashboard screenshot: /auth/signup/create-account/
GitlabHost Dashboard screenshot: /auth/register/address-company/

More work

View all