Live Demo

AcmeDashboard: from guided tutorial to rigorous engineering exercise.

A full-stack invoice and customer management application built to explore the technical concerns tutorials skip: ORM migration, robust testing, architectural refactoring, accessibility, and modern React 19 patterns.

Try live demo View source

Role

Engineering exercise

Architecture, testing, refactoring

Type

Live case-study demo

Full-stack invoice/customer app

Status

Live, source available

External app, public source

Stack

Next.js + Drizzle

React 19, TypeScript, Auth.js

Evidence

75 tests, ORM migration

Server Actions, React 19 patterns

License

MIT

Open-source exercise project

Demo Route Map

Standard CRUD, rigorously implemented.

The application features essential business flows, built with accessibility, type-safety, and validation at every boundary.

  1. 01 Access: Public

    Login

    Credential-based authentication using Auth.js. Edge middleware protects dashboard routes.

    Route: /login
  2. 02 Access: Protected

    Dashboard

    Overview with revenue chart, summary cards, and latest invoices fetched via Drizzle ORM.

    Route: /dashboard
  3. 03 Access: Protected

    Invoices

    Full CRUD for invoices with search, pagination, and server-side validation using Zod.

    Route: /dashboard/invoices
  4. 04 Access: Protected

    Customers

    Customer management workflow, replacing the original tutorial read-only view with full CRUD.

    Route: /dashboard/customers

Engineering Focus

The deliberate work behind the UI.

Beyond the tutorial foundation, this repository represents independent work to solve architectural, testing, and structural challenges in modern web apps.

definitions.ts type safety 
# Compile-time schema enforcement
Expect> // Ensures types stay in sync with DB
  1. 01 lib/db/schema.ts

    Data Migration

    Replaced raw SQL with Drizzle ORM. Schema and types are co-derived and verified at compile time.

  2. 02 Vitest + RTL

    Testing

    75 tests validating form interaction, async submission, pending UI states, and accessibility.

  3. 03 useActionState

    React 19 Patterns

    Utilized useActionState for form state, useFormStatus for pending UI, and Server Actions for mutations.

  4. 04 app/ui/common/

    UI Abstraction

    25+ reusable components and 3 custom hooks consumed by both invoices and customers workflows.

  5. 05 TrackedToast

    Notifications

    Cookie-based flash notification system ensuring exactly one toast per mutation.

  6. 06 ARIA + Keyboard

    Accessibility

    ARIA live regions, keyboard-navigable dialogs, screen-reader labels, and semantic navigation.

Architecture

Server Components and React 19 mutations.

Data fetches are performed directly on the server via Drizzle. Mutations flow exclusively through Zod-validated Server Actions, leveraging React 19 features to manage pending states and form lifecycle without third-party state managers.

Authentication leverages Next.js middleware at the edge to protect routes, only spinning up the Node.js runtime when checking credentials against the database.

architecture.md request flow 
Browser
  -> Middleware (Edge Auth)
  -> Server Components (Read)
  -> Drizzle ORM (PostgreSQL)

Form Submit
  -> Server Actions (Mutation)
  -> Zod Validation
  -> DB Write + Flash Cookies
  -> Redirect to View

Source Evidence

Where the claims meet the source.

The repository provides concrete examples of how to test asynchronous UI, implement cookie-based flash notifications, and ensure type safety across the stack.

Architecture

Mutations flow through Server Actions with strict server-side validation and consistent UI feedback.

Source

app/lib/actions/*

export async function createInvoice(
  prevState: State, 
  formData: FormData
) {
  // Validate with Zod before DB access
  // Write to DB via Drizzle
  // Set flash cookies for notifications
  // Redirect on success
}

Takeaway

Shows a resilient mutation pattern replacing manual fetch calls with React 19 Server Actions.

Testing

Observable behavior is validated instead of internal component state.

Source

tests/components/*

// Test suite execution
pnpm test
pnpm test:coverage

75 tests across 10 files
Coverage: ~85% across metrics

Takeaway

Demonstrates ability to test complex interactive UI including toasts, dialogs, and pending states.

Security

Authentication is split across runtimes to protect routes efficiently.

Source

auth.config.ts, auth.ts

auth.config.ts (Edge):
  // Gates every request
  // Redirects unauthenticated

auth.ts (Node):
  // Validates credentials
  // Queries DB via bcrypt

Takeaway

Edge middleware ensures the database stays out of the request path for unauthenticated visitors.

Boundaries

An exercise, not a product.

AcmeDashboard exists to demonstrate engineering practices, testing strategies, and modern architecture. It is not intended as a production application.

Designed for

  • Exploring and solving real-world engineering concerns omitted by typical tutorials.
  • Demonstrating modern React 19 patterns (Server Actions, useActionState, useFormStatus).
  • Showcasing robust testing strategies for interactive UIs with Vitest and RTL.
  • Implementing accessibility as a core design constraint rather than an afterthought.

Not designed for

  • Being used as an actual production invoicing tool for real businesses.
  • Processing real payments or storing sensitive personal data.
  • Embedding the live application inside the YGBStudio site.

Demo status

Live public demo with demo credentials. The app is intended for inspection, walkthroughs, teaching, and portfolio review.

Not for production

This is a technical demonstration and should not be used to process real invoices or handle sensitive business data.

If you like what you see

I'm always open to interesting work. Say hello.

Email me Browse GitHub

Independent software studio. Open source.