Xata Console

Xata Console - Postgres Platform Web App

The Xata console is where developers create projects, branch their Postgres databases, connect applications and manage settings. Over the past year I led the redesign of its core navigation and information architecture, and rebuilt the branching experience, the platform's central object, from a flat list into a navigable, shareable hierarchy.

This entry covers the console's foundations. Three feature areas grew large enough to have their own pages: Logs Viewer, Query Editor and Onboarding & Data Import.

Key Contributions:

• Navigation architecture: Replaced horizontal header tabs with a sidebar-first layout across two hierarchy levels, with all nav logic centralized in a single hook.
• Settings as routes: Converted project and branch settings from in-page state toggles into real Next.js route segments, making every settings page linkable and bookmarkable.
• Branches overview: Redesigned the branches page as a tree data grid with a resizable detail panel, selection driven by the URL so links are shareable.
• Entity switchers: Split one combined nav menu into separate organization, project and branch switchers, rebuilt on the Command palette pattern with search and ID copy.
• Branch creation UX: Made creation land the user on the new branch, with a searchable source picker and the base branch pinned and badged.
• Sticky page headers: Built a shared header primitive that pins the title and toolbar on scroll, applied across five pages.
• Responsive pass: Took the console from desktop-only to usable on small screens, adding mobile card views, tab overflow handling and a shared breakpoint hook.
• Accessibility: Gave the branch hierarchy real treegrid semantics, added focus management for the detail panel, and named every icon-only control.

Technical Impact:

The navigation and settings work removed a class of bugs rather than fixing instances of it. Real routes made settings pages linkable and testable, and centralizing nav in one hook meant new sections no longer required touching layout components. Several changes were driven by evidence rather than taste: sticky headers and the responsive settings header both came out of PostHog session replays showing users scrolling back up to reach page tools. Roughly 150 merged pull requests over the year.

Project Structure:

• App: Next.js App Router application (apps/webapp) inside a pnpm monorepo
• Shared packages: consumes @xata.io/components, @xata.io/theme and @xata.io/utils
• Feature areas: branches, queries, logs, metrics, extensions, integrations, onboarding, settings