System Architecture Overview

Muse & Co runs on three web portals backed by Cloudflare infrastructure. This page describes how the pieces fit together.

The Three Portals

Portal	URL	Purpose
Customer	ncmuse.co	Public-facing site. Event listings, bookings, Sit and Paint sign-ups, drink menu, gift cards.
Admin / Staff	staff.ncmuse.co	Internal portal. Event management, check-in, quotes, orders, inventory, label printing.
Wiki	wiki.ncmuse.co	This site. Employee documentation and procedures.

Architecture Diagram

                         Customers / Staff / Employees
                                    |
                                    v
                         +-----------------------+
                         |   Cloudflare CDN/DNS  |
                         +-----------+-----------+
                                     |
                    +----------------+----------------+
                    |                |                 |
                    v                v                 v
            +-----------+    +-----------+     +-----------+
            | ncmuse.co |    | staff.    |     | wiki.     |
            | (Customer)|    | ncmuse.co |     | ncmuse.co |
            +-----------+    | (Admin)   |     | (Wiki)    |
            | CF Pages  |    +-----------+     +-----------+
            | + Functions|    | CF Pages  |     | CF Pages  |
            +-----+-----+    | + Functions|     | VitePress |
                  |           +-----+-----+     +-----------+
                  |                 |
                  +--------+--------+
                           |
              +------------+------------+
              |            |            |
              v            v            v
        +---------+  +---------+  +---------+
        |   D1    |  |   R2    |  |  Stripe |
        | (SQLite)|  | (Files) |  |(Payments|
        +---------+  +---------+  +---------+
              |
              |        +---------+  +------------------+
              |        | AWS SES |  | Brother QL-820NWB|
              |        | (Email) |  | (Label Printer)  |
              |        +---------+  +------------------+
              |                           |
              |                     CF Tunnel via
              |                     local network
              +---------------------------+

Technology Stack

Layer	Technology	Notes
Frontend	React + TypeScript + Vite	Customer and Admin portals
Styling	Tailwind CSS	Utility-first CSS framework
Static Site	VitePress	Wiki only
Hosting	Cloudflare Pages	All three portals
API Routes	Cloudflare Pages Functions	Serverless functions co-deployed with each portal
Database	Cloudflare D1	SQLite at the edge, shared across portals
File Storage	Cloudflare R2	Images, uploaded assets
Payments	Stripe	Event tickets, bookings, gift cards
Email	AWS SES	Order confirmations, booking receipts, notifications
Label Printing	Brother QL-820NWB	Drink order labels, printed from Admin portal

How the Pieces Connect

Cloudflare Pages + Functions

Each portal is a Cloudflare Pages project. The customer and admin portals include a functions/ directory that defines serverless API routes. When a request comes in to /api/..., Cloudflare routes it to the corresponding Pages Function instead of serving a static file.

INFO

Pages Functions have access to Cloudflare bindings (D1, R2, KV, etc.) through the function's context.env object. This is how the API routes talk to the database and file storage.

Cloudflare D1

D1 is Cloudflare's edge SQLite database. All application data lives here:

• Event listings and schedules
• Customer accounts and bookings
• Orders and payment records
• Inventory tracking
• Staff and admin data

Both the customer and admin portals share the same D1 database. This means data entered through the admin portal (like new events) is immediately available on the customer site.

Cloudflare R2

R2 stores uploaded files -- event images, artwork photos, and other assets. The admin portal uploads files to R2, and the customer portal serves them.

Stripe

Stripe handles all payment processing:

• Event ticket purchases (Paint & Boba, workshops, classes)
• Private event booking deposits
• Gift card purchases

Stripe webhooks notify the application when payments succeed, fail, or are refunded. The webhook endpoint runs as a Pages Function.

AWS SES

Transactional email (order confirmations, booking receipts, password resets) is sent through AWS Simple Email Service. SES is called from Pages Functions when an email needs to go out.

Label Printer

The Brother QL-820NWB label printer sits on the local network at the shop. It is accessible from the admin portal through a Cloudflare Tunnel that routes traffic from staff.ncmuse.co through the local network to the printer.

TIP

The label printer is used for drink order labels during events and daily operations. If the printer is offline, check the Cloudflare Tunnel status in the dashboard and verify the printer is powered on and connected to Wi-Fi.

Monorepo Structure

The codebase is organized as a monorepo with separate directories for each portal:

Muse_and_Co/
  muse-customer/      # Customer portal (ncmuse.co)
    src/               # React app source
    functions/         # API routes (Pages Functions)
    dist/              # Build output
  muse-admin/          # Admin portal (staff.ncmuse.co)
    src/               # React app source
    functions/         # API routes (Pages Functions)
    dist/              # Build output
  muse-wiki/           # Employee wiki (wiki.ncmuse.co)
    docs/              # VitePress markdown content
  migrations/          # D1 database migration SQL files

Each project has its own package.json, wrangler.toml, and build configuration. They are deployed independently.

Data Flow Examples

Customer Buys a Paint & Boba Ticket

1. Customer visits ncmuse.co/events and selects a Paint & Boba session
2. Customer portal calls Stripe Checkout to process payment
3. Stripe webhook fires on successful payment
4. Pages Function receives webhook, creates order record in D1
5. AWS SES sends confirmation email to customer
6. Order and ticket appear in the admin portal for check-in

Staff Prints a Drink Label

1. Staff opens staff.ncmuse.co and enters a drink order
2. Admin portal sends a print request through the Pages Function API
3. Request routes through Cloudflare Tunnel to the local network
4. Brother QL-820NWB prints the label

---

Last updated: March 2026