Skip to content
Frank Spin

2025

GitlabHost Dashboard

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.

My role
Lead front-end engineer
The problem
The dashboard had to support many workflows and edge states without feeling like separate tools stitched together.
The result
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.

Stack

  • Django
  • HTMX
  • Alpine.js
  • Tailwind CSS
  • Chart.js
  • Dashboard UX

UI design by Martijn Runia · Front-end architecture and product UI implementation by Frank Spin · Feature-level technical implementation by GitlabHost's in-house development team

GitlabHost Dashboard screenshot: home

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.

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.
GitlabHost Dashboard screenshot: /1-1-instance-general/
GitlabHost Dashboard screenshot: /1-2-instance-runners/
GitlabHost Dashboard screenshot: /1-5-1-instance-maintenance-job-detail/
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/