Skip to main content
Web Wizard Dev
All projects

In-house work · HR technology (SaaS)

User Profile Drawer & Component Library

Built a 15+ component library that cut cross-team feature development time by about 40%.

Built by
Our head engineer, in-house at an HR software company
Industry
HR technology (SaaS)
Timeline
2 months
Year
2025
Platforms
Web
Start a similar project
User profile drawer showing personality insights, team memberships and private notes

Results at a glance

~40%less cross-team feature development time
15+reusable components in the library
20+feature modules built on it

The challenge

  1. Building a multi-drawer navigation architecture with nested panels
  2. Creating a polymorphic button system supporting color, style, and size variants with full type safety
  3. Implementing private notes with real-time autosave and rich-text editing

About the project

Designed and built a user profile system and a component library for a SaaS HR platform. The profile drawers display rich user information including personality assessments (DiSC, Working Genius, Enneagram, Strengths), team memberships, favorites, private notes, and personalized callouts. The component library provides 15+ reusable components (polymorphic buttons, form inputs, drawer headers) that serve as the UI foundation across 20+ feature modules. The system supports multi-drawer navigation with nested panels, feature flag controlled rollouts, and full accessibility compliance.

What was delivered

Scope

  • Component library
  • Design system
  • Rich-text notes
  • Multi-panel navigation
  • Accessibility

Our approach

  1. A component library with 15+ reusable components using TypeScript generics, discriminated unions, and compound component patterns

  2. A private notes system with debounced autosave using React Query mutations and Froala WYSIWYG editor integration

  3. Feature flag integration for controlled rollouts

The outcome

  • Reduced cross-team feature development time by approximately 40% through the reusable component library
  • Delivered a rich user profile experience with personality insights, team visibility, and private note-taking
  • Strict TypeScript compliance with generics, discriminated unions, and type guards in a mixed JS/TS codebase

Built with

Next project:TNEK Jazz Press Kit & Booking Site

More projects like this

PFT homepage with the breaking-news banner, a hero carousel and quick links to the contract, FAQs, enrollment and Find Your Rep

Labor union

Teachers' Union Website & Member Platform

Moved a 14,000-member teachers' union off a hard-to-edit Drupal site onto one platform where staff publish content, keep the roster current and target members by school or district, without a developer.

14,000+members on the roster the platform serves

Next.js · React · TypeScript

View project
9-Box assessment home screen with the talent grid and the employee list

HR technology (SaaS)· In-house work

9-Box Talent Assessment Platform

Gave HR leaders a digital 9-Box workflow for assessing more than 1,000 employees.

1,000+employees assessed on the platform

React · TypeScript · TanStack Query

View project
Org Hub dashboard with engagement trends, objective progress and meeting health charts

HR technology (SaaS)· In-house work

Org Hub & Team Hub Analytics Dashboards

Gave executives and managers one view of engagement, meeting health and OKRs, unifying 10+ data sources with AI-generated insights.

React · TypeScript · TanStack Query

View project

Have a project like this in mind?

Tell us what you're building. We'll show you how we'd approach it and what it would take.

Start a similar projectView all projects