Architecture Guide
Eventbuoy Inc. · May 2026
System Architecture
┌─────────────────────┐ ┌──────────────────────┐
│ Physical Yearbook │ │ Digital Class Network │
│ (NFC Tags Embedded) │────▶│ (Web App) │
└─────────────────────┘ └──────────────────────┘
│ │
│ tap phone │ serves
▼ ▼
┌─────────────────────┐ ┌──────────────────────┐
│ Browser Opens │ │ Vercel + Supabase │
│ Profile URL │ │ (Hosting + Data) │
└─────────────────────┘ └──────────────────────┘
NFC URL Scheme
Each tag is programmed with a unique URL:
https://<custom-domain>/<member-id>
Example: classof26.network/jordan-k
Tag types:
| Tag | Size | Memory | Use Case |
|---|---|---|---|
| NTAG215 | 25mm | 540 bytes | Senior portraits, section openers |
| NTAG215 | 20mm | 504 bytes | Faculty portraits (smaller format) |
| NTAG216 | 30mm | 888 bytes | Inside back cover (time capsule) |
Access Control
- Invite-only — no profile visible without authentication
- Class code — distributed in yearbook and via committee
- Members own their profiles — contact info is opt-in
- Time capsule — sealed until reunion year (e.g. 2036)
Data Model
Member
id: string (slug-based, e.g. "jordan-k")
name: string
role: "graduate" | "teacher" | "alumni"
quote: string
future: string (next chapter)
song: string (anthem with artist)
emoji: string
color: string (HSL-compatible accent)
guestbook: Message[]
timeCapsule: CapsuleEntry[] (sealed until date)
Message
from: string
msg: string
timestamp: ISO datetime
Superlative
title: string
winner: string (member name)
icon: string (emoji)
Senior Will
from: string
to: string
item: string
Timeline Event
month: string
event: string
detail: string
hue: number (for dot color)
Component Architecture
The frontend is organized into three independent apps sharing a design system:
1. Yearbook Concepts (yearbook-concepts.jsx)
Interactive concept browser for yearbook committees to explore themes, layouts, and interactive pages before committing to a design direction.
2. NFC Print Layout (yearbook-nfc-layout.jsx)
Blueprint for print production. Shows exactly where each NFC tag sits in the page, with cross-section diagrams and production notes. Used by the print vendor and yearbook committee.
3. Class Gazette (class-gazette-template.jsx)
Newspaper-style template with "Draw Your Face" onboarding canvas. The onboarding hook: instead of "fill out your profile," graduates draw their face. The hand-drawn avatar appears both in the physical yearbook and the digital NFC profile.
4. Class Network (class-network.jsx)
The production web app. Full member directory, profile pages with guestbook + time capsule, superlatives, senior wills, timeline, playlist, and NFC admin dashboard.
Design System
All apps share a consistent set of design tokens with per-app theming:
| Token | Gazette | Print Layout | Class Network |
|---|---|---|---|
| Display font | Playfair Display | Cormorant Garamond | Playfair Display |
| Body font | Outfit + Source Serif 4 | Libre Franklin | DM Sans |
| Mono font | JetBrains Mono | IBM Plex Mono | JetBrains Mono |
| Background | #F0EBE0 | #F5F3EE | #0C0B0F (dark) |
| Surface | #FDF8EF | #FAF8F3 | #16141C |
| Accent | #B8963E (gold) | #B8963E (gold) | #C9A46C (gold) |
| Ink | #1A1510 | #1A1714 | #E8E5F0 |
Tech Stack
- Frontend: React (JSX), no framework — portable to any React environment
- Hosting: Vercel (serverless, free-tier viable at yearbook scale)
- Database: Supabase (auth profiles, guestbook, time capsules)
- NFC: NTAG215/NTAG216 chips programmed via NFC Tools app
- Fonts: Google Fonts (Playfair Display, DM Sans, JetBrains Mono, etc.)
Privacy Architecture
- No tracking, no ads, no data harvesting
- Class code gating prevents external access
- Members opt in to share contact information
- Time capsule messages are encrypted/sealed until reunion date
- Built on Eventbuoy's privacy-by-architecture philosophy