biehl.io
All case studies

North Coast Medical / VSR modernization

Building the Admin Control Plane for VSR Catalog Operations

I designed and built the admin control plane for VSR catalog operations, giving internal users a safer interface for managing categories, product metas, images, sort order, and cleanup workflows.

Who
North Coast Medical / VSR modernization
What
Build the admin control plane for VSR catalog operations
Result
A safer internal interface for managing categories, product metas, images, sort order, and cleanup workflows
VSR admin control plane case study cover

Project snapshot

Client / context: North Coast Medical / VSR modernization

Role: Full-stack design engineer

Focus: Admin UX, catalog operations, category management, product-meta tooling, image workflows, audit tools

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

One-line version

I designed and built the admin control plane for VSR catalog operations, giving internal users a safer interface for managing categories, product metas, images, sort order, and cleanup workflows.

The challenge

Modernizing VSR required more than public storefronts and APIs. Internal users also needed a management layer for the messy operational work behind the catalog.

The system needed to support:

  • authenticated admin access
  • category tree management
  • drag-and-drop ordering
  • category creation and deletion
  • category image uploads
  • product-meta search and detail views
  • visibility into which categories a product meta belonged to
  • cleanup tooling for orphaned product metas
  • audit visibility into meta ordering and category relationships
  • integration with the evolving vsr-api backend

The challenge was turning backend catalog capabilities into a usable admin experience without giving operators raw database access or requiring engineering intervention for routine updates.

My role

I worked across UX, frontend implementation, backend integration, auth, tests, and operational scripts.

My contributions included:

  • designing the admin app shell and navigation
  • building authenticated route gating through PocketBase-backed auth
  • creating category management UI and drag-and-drop behavior
  • implementing category image upload workflows
  • integrating admin UI with VSR API endpoints
  • building product-meta search and detail views
  • adding category-assignment visibility and removal flows for product metas
  • creating cleanup scripts for metas with no products
  • adding a meta-order audit tool
  • writing tests around category rows, drag/drop logic, image fields, product-meta detail/search, cleanup scripts, and audit behavior

Selected work

1. Admin shell and authenticated access

I started from a PocketBase-backed Next.js app and shaped it into a VSR management surface.

The admin foundation included:

  • email/password login
  • session restore
  • logout and auth-store cleanup
  • authenticated route gating
  • user profile display
  • dashboard/settings routes
  • shared app sidebar and page layout components

This created a secure internal entry point for catalog tools instead of exposing operational actions through ad hoc scripts.

2. Category tree management

VSR category structure needed direct admin control. I built category management around a tree-style interface that let users understand hierarchy and make changes safely.

Work included:

  • category list/tree rendering
  • category create and delete flows
  • drag-and-drop ordering
  • cursor-offset and reorder behavior fixes
  • subcategory deletion support
  • toast-based feedback with Sonner
  • tests around category tree rows and drag/drop logic

This gave operators a visual model of the catalog instead of forcing them to reason through IDs and scripts.

3. Category image uploads and Cloudflare migration

Category images were part of the customer-facing catalog experience, so admin users needed a reliable way to manage them.

I built and refined:

  • category image upload UI
  • API integration for admin image upload routes
  • image field tests
  • PocketBase/server helper changes
  • migration from earlier image handling to Cloudflare Images-backed uploads
  • support for showing updated images through the management UI

This connected admin operations to the same media direction as the broader VSR platform.

4. Product-meta operations

Product metas sit at the center of VSR catalog behavior, so the admin app needed tools to inspect and maintain them.

I added:

  • product-meta search
  • product-meta detail pages
  • category assignment visibility
  • removal flow for categories assigned to a product meta
  • cleanup script for product metas with no products
  • tests for search, detail, cleanup, and API behavior

This made product-meta maintenance less opaque and gave internal users a path to correct catalog relationships.

5. Meta sort order and audit tooling

VSR product display order depends on meta/category relationships. I added tooling to make that behavior visible and manageable.

Work included:

  • allowing meta items to be sorted
  • showing category meta sort order in the admin UI
  • adding a tools navigation section
  • building a meta-order audit page and reusable audit logic
  • tests for the meta-order audit tool and supporting library

This turned hidden ordering rules into an inspectable admin workflow.

6. Testing and maintainability

Because admin tools can cause production data problems, I added tests around the behaviors most likely to regress:

  • login form behavior
  • layout and route shell behavior
  • category admin interactions
  • category image fields
  • category tree drag/drop helpers
  • product-meta search and detail views
  • empty-meta cleanup scripts
  • meta-order audit logic and UI
  • PocketBase/VSR API server helpers

The result was an admin app that could evolve with the API without relying only on manual checks.

Design engineering approach

Make operational complexity visible

Catalog data is hard to reason about when hidden inside database rows and sync scripts. The admin UI exposed relationships - categories, metas, sort order, image state - in forms operators could inspect and act on.

Build guardrails into the workflow

Deletion, image updates, category assignment changes, and cleanup scripts all carry risk. I designed flows with confirmation, feedback, tests, and focused admin surfaces instead of all-purpose editing.

Pair API platform work with admin UX

The VSR API provided the backend capability; VSR Management made that capability usable. Together they formed a platform plus control plane.

Impact

VSR Management gave North Coast a real admin surface for VSR catalog operations.

It provided:

  • authenticated admin access
  • category tree management
  • drag-and-drop sort behavior
  • category image upload workflows
  • Cloudflare Images-backed media handling
  • product-meta search and detail views
  • category assignment inspection and removal
  • cleanup tooling for empty metas
  • meta sort-order visibility
  • audit tooling for product/category order behavior
  • test coverage for critical admin interactions

What made this hard

The hard part was designing admin tools for a moving platform.

The app had to sit between:

  • evolving VSR API contracts
  • legacy catalog concepts
  • product-meta/category relationships
  • image storage migration
  • internal operator workflows
  • risk of destructive admin actions

The solution needed to be usable enough for operations, precise enough for engineering, and flexible enough for ongoing migration work.

Why it matters

This project shows full-stack design engineering applied to internal admin UX. It is not enough to build an API or public storefront; real platforms need maintainable control planes that let teams manage data safely.