Super Simple Score System
— classroom point tracker
Ultra-fast, touch-first classroom point-tracking. Teachers tap student tiles to award/subtract points in real time. "The fastest classroom engagement system for live instruction." Currently a WordPress PHP page template; this project migrates it to Next.js + Supabase and evolves through four tiers — free → individual teacher → school → district enterprise (where Hatchstacks Pro fits naturally).
Most projects in the portfolio have one fit-flag. This one has two — because the architecture genuinely changes at the district enterprise tier. Below $50k ARR per district, standard SaaS is right. At and above that, dedicated Mac mini per district justifies itself for compliance, data residency, and white-label needs.
Pro overkill
Multi-tenant B2B2C product. Teachers + students + small schools as end users on Supabase + Vercel. 3.7M potential teacher market = no per-customer Mac mini possible. Standard cloud is the right architecture.
- · Free tier (localStorage)
- · Individual teacher ($5–$10/mo · cloud sync)
- · School ($1–$3/student/year · admin dashboard)
Pro fits naturally
10k+ students per district at $50k+ ARR justifies dedicated infrastructure: isolated Postgres for data residency, district-specific FERPA/COPPA customizations, white-label branding option.
- · Dedicated Mac mini per district
- · Isolated Supabase instance
- · White-label option
- · SSO (Clever · ClassLink · Google Classroom)
- · Off-boarding ownership transfer real
An existing WordPress PHP page template runs the current product (with localStorage persistence per device). The migration moves to Next.js + Supabase without breaking the existing users. Gradual deprecation of the old stack.
Four tiers. The first three are 🔴 standard SaaS. The fourth (district enterprise) is 🟢 Hatchstacks Pro — the only place in the portfolio where the same product crosses the fit-flag boundary.
Free
- 8 classes
- localStorage only
- No cloud sync
- Single device
- All current features
Individual teacher
- Unlimited classes
- Cloud sync across devices
- Multi-device login
- CSV import · sorting · leaderboard
School
- School admin dashboard
- Multi-teacher rollups
- Student accounts (COPPA)
- Analytics + reports
- Team systems
District enterprise
- Dedicated Mac mini
- Isolated Postgres / Supabase
- SSO: Clever · ClassLink · Google Classroom
- White-label option
- FERPA audit logging
- Off-boarding transfer real
The existing product. Single PHP page template, vanilla JS frontend, localStorage persistence per device. Functional but architecturally trapped — no path to multi-device sync, no path to schools, no path to compliance.
Modern SaaS stack. Next.js 15 + App Router · Supabase (Postgres + Auth + Realtime). Free tier still uses localStorage for offline-first. Paid tiers add cloud sync. Same multi-tenant infrastructure scales to school tier; district enterprise breaks out to dedicated infrastructure (§07).
The tier that justifies dedicated Mac mini infrastructure. Districts with 10k+ students and $50k+ ARR want isolation: their data stays in their isolated Postgres, audit logs satisfy FERPA, district can opt for white-label branding. Build Lead spec: one Mac mini per district.
The single most important non-functional requirement. Anything slower than 100ms from tap → visual feedback breaks the teacher's classroom flow. Optimistic UI + async cloud sync makes this viable. Conflict resolution handles offline → online transitions.
sequenceDiagram
participant T as Teacher's tap
participant UI as React state
participant V as Visual feedback
participant LS as localStorage
participant SB as Supabase
participant TR as Realtime broadcast
T->>UI: Touch event on student tile
Note over UI: Synchronous · <16ms
UI->>V: Optimistic state update (+1 point)
V-->>T: Visual feedback (green glow)
Note over V: <100ms target met ✓
par Async cloud sync
UI->>LS: Persist locally (immediate)
UI->>SB: Write PointEvent (background)
SB->>TR: Broadcast to other devices
TR->>UI: Echo to other open tabs/devices
end
alt Sync succeeds
SB-->>UI: Confirm write
Note over UI: All state consistent
else Sync fails (offline)
UI->>LS: Queue retry
Note over LS: Service worker retries on reconnect
Note over UI: UI shows offline indicator
else Conflict on reconnect
SB-->>UI: Conflict (newer write elsewhere)
UI->>UI: Last-write-wins (or operator review)
UI->>V: Reconcile visual state
end
Two federal laws govern student data. FERPA governs all education records. COPPA governs data collection from kids under 13. R1 (FERPA/COPPA non-compliance) is High severity — kills district sales before they start. Compliance review is mandatory before student-account features ship.
Seven risks. R1 (FERPA/COPPA) and R7 (school wifi blocks) are the existential ones — both gate district tier sales entirely. R2 (school procurement cycles 6–12 months) means individual-tier revenue must fund the long enterprise sell.
Risk register
erDiagram
TEACHER ||--o{ CLASS : "owns"
CLASS ||--o{ STUDENT : "contains"
STUDENT ||--o{ POINT_EVENT : "earns"
TEACHER ||--o{ POINT_EVENT : "awards"
CLASS ||--o{ TEAM : "may group into"
TEAM }o--o{ STUDENT : "includes"
SCHOOL ||--o{ TEACHER : "employs"
DISTRICT ||--o{ SCHOOL : "contains"
TEACHER {
uuid id PK
string email
uuid school_id FK
uuid district_id FK
enum subscription_tier "free|individual|school|district"
string stripe_customer_id
jsonb preferences
}
CLASS {
uuid id PK
uuid teacher_id FK
string name
string color
string grade_level
int default_point_amount
jsonb enabled_features
bool archived
}
STUDENT {
uuid id PK
uuid class_id FK
string name
int current_score
int total_points_awarded
int total_points_subtracted
uuid user_id FK
}
POINT_EVENT {
uuid id PK
uuid student_id FK
uuid class_id FK
uuid teacher_id FK
int delta
timestamp event_at
text note
}
TEAM {
uuid id PK
uuid class_id FK
string name
string color
}
SCHOOL {
uuid id PK
string name
string address
uuid district_id FK
uuid billing_account_id FK
}
DISTRICT {
uuid id PK
string name
string billing_contact
string PO_number
int per_student_rate_cents
}
Migration-focused. Day 1–2 study the existing WordPress code carefully (don't reinvent). Day 3–4 scaffold Next.js + Supabase. Day 5–6 port the existing tile UI. Day 7 build the migration helper and test on iPad Safari + Smartboard (the two surfaces that matter most).
- Tailnet · 1Password · Notion access
- Read PRD end-to-end
- Read current WordPress PHP code
- Map existing features to new stack
- FERPA reference reading
- COPPA reference reading
- Common Sense Privacy + iKeepSafe seal docs
- Map compliance to data model
- Next.js 15 scaffold (App Router)
- Tailwind + shadcn/ui
- Supabase project · Postgres schema
- Magic-link auth + Google SSO
- Port student tile component
- Tap zones (left subtract / right add)
- Green / red glow animations
- Multi-class navigation
- iPad Safari smoke test
- localStorage persistence (free tier)
- Supabase cloud sync (paid tier)
- Optimistic UI · <100ms test
- PointEvent audit trail
- CSV import
- Sorting (name / score)
- Leaderboard with slide animations
- Classwide adjustment tile
- Sound effects toggle
- Migration helper: WP localStorage → Supabase
- iPad Safari QA pass
- Smartboard touchscreen QA
- Free tier launch on staging
- Test plan for existing WP users
Mostly standalone in architecture. Stripe subscription pattern reusable. COPPA/FERPA compliance learning transfers to any future ed-tech projects. The district enterprise pattern is reusable for any multi-tenant → enterprise upgrade path elsewhere in the portfolio.
- COPPA
- Children's Online Privacy Protection Act. Governs data collection from kids under 13. Triggers when students have direct accounts on the platform.
- FERPA
- Family Educational Rights and Privacy Act. Governs all student education records — including point histories. Audit log + retention policies enforce this.
- School-as-agent
- COPPA doctrine: schools can consent on behalf of parents for educational tools. Reduces COPPA friction in school + district tier.
- Clever / ClassLink
- Standard SSO providers for K-12 schools. District-level. Required for the district enterprise tier sale.
- Common Sense Privacy
- Standard third-party privacy review for ed-tech. Schools' content filters often gate access based on this seal.
- iKeepSafe COPPA
- Privacy seal program specifically for COPPA compliance. Districts require it before approving an app.
- District
- A school district — administrative + procurement entity. The enterprise customer at Tier 4.
- Per-student licensing
- Standard ed-tech pricing model ($1–$5/student/year). Used at school and district tiers.
- Optimistic UI
- Update the UI immediately on user action, sync to server in background. The pattern that makes <100ms tile response possible.
- PointEvent
- Audit-trail entity. Every point awarded creates a PointEvent. Required for FERPA compliance.
- Tile
- A clickable student card. Tap left = subtract point. Tap right = add point. The atomic UI primitive of the product.
- SOC 2 Type 1
- Compliance audit some districts require before signing. Target: complete before Phase 4 district push.