Naar inhoud
Terug naar werkoverzicht
Werk

GitlabHost Dashboard

Front-end engineer (samen met designer Martijn Runia)

Door

Screenshot van GitlabHost Dashboard: home

Ik bouwde de front-end van het GitlabHost-dashboard van ontwerp tot live UI. Onboarding, instance- en runnerbeheer, billing, support en instellingen komen samen in één product dat in de praktijk consistent aanvoelt.

Projectcontext

Uitdaging

Het dashboard moest veel verschillende workflows en states ondersteunen, zonder dat het als losse schermen aanvoelde.

Aanpak

Martijn zette de visuele richting neer. Ik vertaalde die naar herbruikbare Django-templates en front-end componenten met HTMX, Alpine.js, Tailwind CSS en Chart.js. We liepen de belangrijkste gebruikersflows in de browser door en legden de relevante states vast, zodat ontwerp en implementatie in sync bleven. De feature-level technische implementatie is uitgevoerd door het interne development team van GitlabHost.

Resultaat

Het dashboard voelt nu als één product in plaats van losse onderdelen. Ook bij complexere flows blijft het overzichtelijk, en nieuwe modules zijn toe te voegen zonder de UI opnieuw op te bouwen.

Impact

  • 22 kernschermen geselecteerd uit een volledige route-inventarisatie.
  • Gedeelde UI-patronen over onboarding, billing, support en instellingen.
  • Snellere overdracht doordat nieuwe states bestaande UI-structuren hergebruiken.
Django HTMX Alpine.js Tailwind CSS Chart.js Dashboard UX
Galerij
Screenshot van GitlabHost Dashboard: /1-1-instance-general/
Screenshot van GitlabHost Dashboard: /1-2-instance-runners/
Screenshot van GitlabHost Dashboard: /1-5-1-instance-maintenance-job-detail/
Laad 18 meer
Screenshot van GitlabHost Dashboard: /1-2-1-runner-detail/get-runner-01/
Screenshot van GitlabHost Dashboard: /2-1-1-activate-instance-instance-details/
Screenshot van GitlabHost Dashboard: /2-1-2-activate-instance-gitlab-details/
Screenshot van GitlabHost Dashboard: /2-2-4-activate-runner-creating/
Screenshot van GitlabHost Dashboard: /3-1-1-quote-detail/S01173/
Screenshot van GitlabHost Dashboard: /4-0-shop/
Screenshot van GitlabHost Dashboard: /4-1-1-shop-instance/
Screenshot van GitlabHost Dashboard: /4-2-2-shop-runner-cpu-optimized/
Screenshot van GitlabHost Dashboard: /5-0-cart/
Screenshot van GitlabHost Dashboard: /6-1-1-support-ticket-detail/12345678/
Screenshot van GitlabHost Dashboard: /6-2-support-files/
Screenshot van GitlabHost Dashboard: /6-3-support-id-verification/
Screenshot van GitlabHost Dashboard: /2-1-settings/
Screenshot van GitlabHost Dashboard: /8-1-notifications/
Screenshot van GitlabHost Dashboard: /9-5-admin-data-export/
Screenshot van GitlabHost Dashboard: /auth/login/
Screenshot van GitlabHost Dashboard: /auth/signup/create-account/
Screenshot van GitlabHost Dashboard: /auth/register/address-company/

Meer werk

Bekijk alles