Live Demo

AgentWellnessCenter: a playful app for a serious engineering habit.

A booking and admin demo for fictional AI agents, built to show how YGBStudio turns agent-assisted development into bounded, reviewable software: clear specs, protected routes, validation, persistence, tests, documentation, and edge deployment.

Try live demo View source

Role

Founder-led build

Product, architecture, docs, validation

Type

Live case-study demo

AI-assisted delivery and app structure

Status

Live, source available

External app, public source

Stack

Next.js + Workers

TypeScript, React, Cloudflare D1

Evidence

Specs, tests, docs

Validation gates and deployment notes

License

MIT

Open-source YGBStudio project

Demo Route Map

A small app with real application boundaries.

The live demo is intentionally compact, but it still exercises the product paths that make architecture visible: public booking, confirmation, login, protected admin pages, and guarded writes.

  1. 01 Access: Public

    Public booking

    Visitors choose seeded agents, ailments, therapies, and appointment details.

    Route: /booking
  2. 02 Access: Public

    Confirmation

    The booking flow resolves into a confirmation state instead of a loose form handoff.

    Route: /booking/confirmation
  3. 03 Access: Admin

    Login

    A JWT-backed admin/staff login protects operational routes from public browsing.

    Route: /login
  4. 04 Access: Protected

    Dashboard

    Authenticated users enter a compact admin shell for operational review.

    Route: /dashboard
  5. 05 Access: Protected

    Management

    Admin routes expose records, server-side writes, and conflict guardrails.

    Route: /agents

AI-Assisted Delivery

The process is part of the demo.

AgentWellnessCenter is not only an app walkthrough. It documents the working discipline around AI-assisted delivery: define intent, write the spec, plan the phase, validate the outcome, then leave enough context for the next change.

delivery-loop.md reviewable delivery 
# AI-assisted delivery loop
intent -> specs -> plan -> validation
validation -> implementation
implementation -> tests + docs
docs -> next bounded phase
  1. 01 mission.md

    Intent

    The work starts with the product purpose and the engineering claim it needs to prove.

  2. 02 specs/

    Specs

    Requirements, stack decisions, and phase folders keep agent work bounded and inspectable.

  3. 03 plan.md

    Plan

    Each phase turns ambiguity into a concrete implementation path before code changes begin.

  4. 04 validation.md

    Validation

    Completion criteria are named before implementation, so done has visible evidence.

  5. 05 app/ + lib/

    Implementation

    Routes, data boundaries, auth helpers, and UI are kept in clear responsibility zones.

  6. 06 Vitest

    Tests

    Unit and integration-style checks protect validation, data behavior, and UI expectations.

  7. 07 docs/

    Docs

    Architecture, API/data, auth, deployment, and operations notes make the demo teachable.

Architecture

Small enough to inspect, structured enough to trust.

The app keeps public pages, protected pages, route handlers, validation, and persistence separate so the demo remains easy to explain without pretending to be larger than it is.

That balance is the point: a compact project can still show how YGBStudio thinks about maintainability, handoff, and production-minded boundaries.

architecture.md request flow 
Browser
  -> Next.js App Router
  -> public pages + protected pages
  -> route handlers
  -> QueryService
  -> AppDatabase interface
  -> Cloudflare D1 runtime
  -> SQLite-compatible test path

Source Evidence

Where the claims meet the source.

The repository backs the case study with concrete artifacts: specs, data boundaries, auth checks, validation practice, tests, and deployment notes.

Specs

The repository treats specifications as the control plane for AI-assisted work.

Source

specs/mission.md, specs/tech-stack.md, specs/roadmap.md

specs/
  mission.md
  tech-stack.md
  roadmap.md
  phase-*/
    requirements.md
    plan.md
    validation.md

Takeaway

The planning artifacts show how vague requests become bounded, verifiable implementation work.

Architecture

Business logic is routed through a narrow data boundary instead of binding every page directly to storage.

Source

lib/query-service.ts, lib/database/*

Route handler
  -> QueryService
  -> AppDatabase
  -> D1 adapter
  -> SQLite test adapter

Takeaway

The app stays modest while still using a production-minded boundary: route code can stay focused while persistence remains swappable for tests and Workers runtime.

Protection

The admin experience is protected at both route and write-operation levels.

Source

middleware.ts, app/api/auth/*, app/api/*

No session -> /login?from=...
Admin or staff -> protected shell
Write APIs -> server-side auth checks
Deletes with appointments -> 409 conflict

Takeaway

This shows the difference between a UI-only guard and an application boundary that protects server-side mutations.

Delivery

The app is deployed on the edge, not only presented as a local portfolio mock.

Source

open-next.config.ts, wrangler.toml, docs/cloudflare-workers-deployment.md

Next.js App Router
OpenNext Cloudflare
Workers Static Assets
Cloudflare D1 binding
Wrangler preview and deploy scripts

Takeaway

The deployment path matters: visitors can try the app while developers can inspect how it is built, validated, and shipped.

Boundaries

Playful premise, clear limits.

AgentWellnessCenter is a fictional demo clinic for AI agents. Its value is the visible engineering process and deployed app, not the simulated care domain.

Designed for

  • Showing how YGBStudio structures AI-assisted delivery with specs, plans, validation, and docs.
  • Demonstrating a compact full-stack app with public and protected flows.
  • Teaching coding-agent workflow patterns through a playful product surface and concrete engineering evidence.
  • Giving clients, collaborators, and technical reviewers a working app they can try before reading the source.

Not designed for

  • Providing healthcare, wellness, therapy, or clinical advice.
  • Replacing the reusable-tool case studies in Projects.
  • Claiming enterprise production maturity beyond the documented demo scope.
  • 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.

Health disclaimer

This is not a healthcare, wellness, therapy, or clinical product. It is a fictional software demo.

If you like what you see

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

Email me Browse GitHub

Independent software studio. Open source.