Component Library
Eventbuoy Inc. · May 2026
Overview
Four independent React apps, each exported as a default component. All are vanilla React with inline styles — no CSS framework dependency. Design tokens are defined per-app as JS constants.
1. Yearbook Concepts (YearbookConcepts)
Interactive concept browser for yearbook committees.
Navigation
| Prop | Type | Default | Description |
|---|---|---|---|
sections |
array | (built-in) | Themes, Superlatives, Layouts, Interactive, Extras |
Sub-components
| Component | Props | Description |
|---|---|---|
ThemeShowcase |
none | 4 themes: Y2K Reboot, Golden Hour, Comic Book, Music Festival. Each has gradient, mockup, and description. |
SuperlativesShowcase |
none | 3 tiers: Classic Reimagined, School-Specific, Future-Forward. 9 superlative ideas. |
LayoutShowcase |
none | 4 layouts: Full-Bleed Photo, Mosaic Grid, Editorial Magazine, Timeline Scroll. Each has a design tip. |
InteractiveShowcase |
none | 3 interactive ideas: Autograph Prompts, QR Code Pages, Senior Wills. |
ExtrasShowcase |
none | 4 extras + 8 quick ideas list. |
2. NFC Print Layout (YearbookPrintLayout)
Blueprint for print production showing NFC tag placement.
Design Tokens
paper: #FAF8F3
ink: #1A1714
gold: #B8963E
nfcPurple: #7B5EA7
Fonts: Cormorant Garamond (display), Libre Franklin (body), IBM Plex Mono (mono)
Sub-components
| Component | Props | Description |
|---|---|---|
NFCBadge |
size, pulse, label |
NFC tap icon indicator (SVG wave + optional label) |
Callout |
x, y, width, align, color, children |
Positioned annotation with dot pointer |
YearbookPage |
pageNum, spread, children, label |
Page wrapper with page number footer |
Portrait |
name, future, emoji, color, hasNFC, size |
Portrait cell with optional NFC badge overlay |
SeniorPortraitPage |
none | Grid of 8 seniors with NFC annotations |
FacultyPage |
none | Grid of 6 faculty (smaller format, 20mm tags) |
HowToScanPage |
none | 3-step instructions, compatibility, troubleshooting |
CrossSectionDiagram |
none | Layer-by-layer cross section of tag in page |
SectionOpenerPage |
none | Full-bleed section opener with hidden NFC tag |
PlacementGuide |
none | Decision map: 4 page types with tag size, position, URL, quantity |
ProductionNotes |
none | 3 production notes: timing, laminate, binding |
3. Class Gazette (ClassGazette)
Newspaper-style yearbook template with Draw Your Face onboarding.
Design Tokens
paper: #FDF8EF
ink: #1A1510
gold: #B8963E
red: #8B2020
nfc: #7B5EA7
Fonts: Playfair Display (masthead), Libre Baskerville (headline), Source Serif 4 (body), Outfit (sans), JetBrains Mono (mono)
Sub-components
| Component | Props | Description |
|---|---|---|
Masthead |
date, volume |
Newspaper masthead with thick/thin rules |
HRule / ThickRule |
style |
Decorative horizontal rules |
FrontPage |
none | Full newspaper front page: headline story + sidebar + bottom row |
ProfileCard |
grad, onSelect |
Clickable newspaper-style profile card |
ProfilesGrid |
none | 3-column grid of ProfileCards |
DrawYourFace |
none | Canvas-based drawing tool + name/quote/future/song form |
DigitalProfile |
none | What opens when NFC tag is tapped: profile + guestbook |
PrintDrawGrid |
none | "The Newsroom" spread — 18 circle frames for hand-drawn portraits |
DrawYourFace Canvas API
canvasRef(internal): 240×240 canvas with face outline guide- Touch and mouse input for drawing
- Clear & restart button
- Submit flow with celebration state
4. Class Network (ClassNetwork)
Production web app for the private class network.
Design Tokens (dark theme)
bg: #0C0B0F
surface: #16141C
accent: #C9A46C (gold)
text: #E8E5F0
textMuted: #8B849E
border: #2A2635
Fonts: Playfair Display (display), DM Sans (body), JetBrains Mono (mono)
Sub-components
| Component | Props | Description |
|---|---|---|
NavPill |
label, icon, active, onClick |
Pill-shaped nav button |
MemberCard |
member, onClick |
Card with emoji, name, quote, future — hover glow |
ProfileView |
member, onBack |
Full profile: hero, guestbook, time capsule |
DirectoryPage |
onSelect |
Filterable grid (all / graduates / faculty) |
SuperlativesPage |
none | 2-column grid of voted awards |
SeniorWillsPage |
none | "Last Will & Testament" list view |
TimelinePage |
none | Vertical timeline with colored dots |
PlaylistPage |
none | Tracklist with emoji avatars and song metadata |
NFCAdminPage |
none | Tag assignment table with program/done toggle + 4-step guide |
ProfileView Guestbook Flow
1. Load existing messages from member.guestbook[]
2. Input field + "Sign" button
3. New messages appended optimistically
4. Time capsule: textarea → "Seal Until 2036" → locked state
NFCAdminPage Tag Assignment Table
| Column | Content |
|---|---|
# |
Zero-padded index |
MEMBER |
Emoji + first name |
NFC URL |
Monospace URL (e.g. classof26.network/jordan-k) |
STATUS |
Program / Done toggle button |
Cross-App Patterns
All apps follow these conventions:
- No external CSS — all styles are inline JS objects
- Color system — each app defines a
c/paletteconstants object - Font system — each app defines a
fontconstants object - State —
useStatefor tab/selection management - Responsiveness — flex wrap + overflow-x: auto on nav bars
Eventbuoy Inc. · NFC Yearbook Codex · v1 · May 2026