Skip to content
Matt BiehlIndependent design + development
Back to work

Project

Building the Admin Control Plane for VSR Catalog Operations

An admin control plane giving internal users a safer interface for managing categories, product metas, images, sort order, and cleanup workflows.

VSR catalog operations workflow diagram, not a product screenshot
Workflow diagram

Editorial workflow diagram based on the published case study. Internal screens were not accessed or reconstructed.

View full-size View source

In detail

Portfolio source

Project snapshot

Client: North Coast Medical / VSR modernization

Role: Full-stack design engineer

Stack: Next.js, React, TypeScript, PocketBase auth, VSR API, dnd-kit, Tailwind CSS, shadcn-style UI, Vitest, Testing Library, Cloudflare Images.

Problem

Operators needed authenticated tools for category hierarchies, ordering, images, product metas, and cleanup without routine database access or engineering intervention. Evolving API contracts, legacy concepts, image migration, and destructive actions created operational risk.

Approach

I worked across UX, frontend, backend integration, auth, tests, and scripts. The interface makes category, meta, ordering, and image state inspectable. Focused surfaces, confirmation, feedback, and tests provide guardrails while VSR’s platform evolves.

Implementation

  • Built email/password login, session restore, logout/auth-store cleanup, route gating, user profiles, dashboard/settings routes, and shared layouts.
  • Implemented a category tree with create/delete actions, subcategory deletion, drag-and-drop ordering, cursor-offset/reorder fixes, and Sonner toast feedback.
  • Added image upload UI, admin API integration, server helpers, Cloudflare Images-backed migration, and updated-image display.
  • Added product-meta search/detail views, visibility into category assignments, and removal of assigned categories.
  • Created an empty-product-meta cleanup script and tests covering search, detail, cleanup, and API behavior.
  • Exposed meta sorting, category meta order, tools navigation, and an order-audit page backed by reusable audit logic.
  • Tested login, route shells, categories, drag/drop, image fields, product-meta operations, cleanup, audits, and PocketBase/VSR API helpers.

Outcomes and limitations

Delivered an authenticated catalog control plane for category trees, ordering, media, product-meta maintenance, cleanup, and audits. It makes backend capabilities usable by internal operators while retaining engineering precision. Continued API and migration changes remained constraints. The portfolio reports delivered capabilities, not quantified operational gains.

Adapted from portfolio text; images and navigation omitted.

Back to all work

What’s getting in
your product’s way?

Tell me what you’re building, where it gets difficult, and what you’d like to change.

Email your projectmatt@biehl.io