ZestyShop
All ProductsPhysicalDigitalCategories
Account
All articles

From Storefront to Operations

Published June 2026

The first version of ZestyShop was a polished storefront: product grids, a cart, checkout, and account pages. That is the part customers see. But a real store needs an operations layer — somewhere to manage orders, update the homepage, and ship with confidence. This is the story of building that layer.

Admin-First Thinking

We built the admin dashboard around daily tasks rather than database tables. The sidebar gives direct access to orders, products, categories, the homepage hero, and site settings. Every admin page uses server components to fetch the latest data from Aurora PostgreSQL, so the information is always current.

Orders were the biggest operational need. The admin orders page lists every order with customer details, line items, shipping address, and totals. A dropdown updates status in place — pending, processing, shipped, delivered, or cancelled — through a PATCH API backed by strict input validation.

CMS Without the Overhead

Instead of hardcoding marketing copy, the homepage hero and announcement bar are stored in the database and editable from the admin panel. That means the marketing team can swap a headline or promote a sale without touching code or redeploying. Product categories, featured flags, and inventory work the same way — content and commerce share one source of truth.

Testing as a Habit

As the order flow became more complex, we extracted the SQL and validation into small, testable modules. Unit tests now cover SQL string generation, parameter ordering, and input validation. The suite runs with Vitest and includes component tests for navigation and merchant dashboards.

  • Vitest for unit and component tests.
  • Playwright for end-to-end browser coverage.
  • TypeScript strict checks before every build.
  • ESLint to keep the codebase consistent.

What Changed in the Architecture

The app still runs on Next.js 16 with the app router, but the boundary between server and client is now deliberate. Server components handle data fetching and permission checks via requireAdmin. Client components are reserved for interactivity like the order status dropdown and toast notifications. Better Auth manages sessions, and the Kysely adapter keeps user data in PostgreSQL alongside the catalog and orders.

What’s Next

We are adding integration tests against a real PostgreSQL database, expanding Playwright coverage for the admin order flow, and enriching orders with shipping tracking numbers and carrier details. The storefront already feels alive; now the tools behind it are catching up.

ZestyShop

Bold products, playful vibes. Find your next favorite thing — physical or digital.

Shop

  • All Products
  • Physical Products
  • Digital Products
  • Categories

Account

  • My Account

Help

  • FAQ
  • Shipping Info
  • Returns
  • Contact Us
  • How We Built This
  • From Storefront to Operations

© 2026 ZestyShop. All rights reserved.

PrivacyTerms