Airbnb — Command Hub

## Context

Airbnb's Command Hub is an internal tool for browsing, organizing, and acting on entities across the platform. As an Apprentice on the Connect program, I joined the team responsible for evolving Command Hub's frontend and shipped two user-facing features into the production internal product: entity favoriting and a project hierarchy system.

## Approach

### Favorite entities

I led a feature that lets users star and unstar entities, with the favorite status syncing to the backend through GraphQL. The interaction had to feel instant — optimistic UI updates ahead of the GraphQL mutation, then reconciliation if the server response disagreed.

I designed and built the interactive UI components — the star icon affordance, hover and active states, the favorites filter view that surfaces only starred entities. The mutations went through the existing GraphQL layer with new resolver work paired with a backend engineer.

### Project hierarchy

The bigger project: a hierarchy system that lets users organize entities into folders. Tree structure rendering on the frontend, drag-and-drop reordering, expand/collapse state preservation across navigations.

I built the React tree component from scratch — recursive node rendering, virtualization for long lists, keyboard navigation. The drag-and-drop used react-dnd with custom drop targets. The state lived in URL params via the existing useURLManager hook (which I also extended for adaptable URL pattern recognition).

### Beyond the milestone

Outside the milestone project, I shipped feature work across the Command Hub codebase: enhanced error handling and testing capabilities in the savePolicy function (deployed to production); UI optimization in the EntityList component for better interaction and visual polish; refinements to useURLManager for cleaner application navigation patterns.

## Outcome

Both features shipped to production. The favorite-entity feature became part of the daily Command Hub flow for the internal users. The project hierarchy gave teams a way to organize entity collections that the previous flat list couldn't.

I also designed the wireframes and high-fidelity mockups in Figma before committing to implementation — closing the loop between design and frontend so the team could validate the interaction before code.