Platform Plan

ESL Online Classes

End-to-end plan for launching virtual English language instruction โ€” connecting U.S. volunteer instructors with youth learners in Trujillo, Peru, integrated into the existing Rising with Melodies school platform.

โœ… Update โ€” July 2026: Teacher-usable version shipped

The plan below was written before any of this was built, and the actual implementation took a faster, narrower path than originally scoped โ€” built to get a real teacher live as quickly as possible, with the student-facing side deferred rather than built up front. What actually shipped:

The phase content below is kept for reference โ€” Phases 3โ€“4 are still the right shape for what's deferred, they just haven't started.

Scale
1โ€“5 pairs
Students โ†” Instructors
Video
Google Meet
Instructors use Google accounts
Database
Supabase
New ESL tables, existing school DB
Phases
4 Phases
~6 weeks to full launch

Overall Progress

0%
0 completed 0 total tasks 0 remaining

System Architecture

๐Ÿ‘ฉโ€๐Ÿซ
Instructor (US)
School admin panel
โ†’
๐Ÿ“…
Session Scheduled
Supabase esl_sessions
โ†’
๐ŸŽฅ
Google Meet
Recurring link stored in DB
โ†’
๐Ÿง’
Student (Peru)
Student portal login
Layer What Status
Hosting Porkbun static hosting โ€” no server changes needed Live
Database Supabase school project โ€” new esl_students and esl_sessions tables To Build
Video Google Meet โ€” instructors create recurring links, stored in Supabase No Build
Admin Panel New ESL section in school/admin.html โ€” manage students, pairings, notes To Build
Student Portal PIN login at school/portal.html โ€” student sees instructor, schedule, Join button To Build
Auth Student PIN stored hashed in Supabase โ€” no email required To Build
Notifications Manual email outreach to start โ€” Mailchimp/Twilio integration in Phase 4 Phase 4
1

Database Foundation

Week 1 ยท Supabase
New Tables โ€” Supabase School Project
Create esl_students table DB
Fields: id, first_name, last_name, display_name, pin_hash, email (optional), location, age, status (active/inactive), created_at. Separate from school students table โ€” this is a new group.
Create esl_sessions table DB
Fields: id, student_id (โ†’ esl_students), instructor_id (โ†’ volunteers), meet_link, schedule_day (e.g. "Tue & Thu"), schedule_time (e.g. "4:00 PM EST"), timezone_student, status (active/paused/completed), notes, created_at, updated_at.
Create esl_attendance table DB
Fields: id, session_id (โ†’ esl_sessions), class_date, attended (bool), instructor_notes, created_at. Used by instructors to log each class.
Set Row Level Security (RLS) policies DB
Students can only read their own session row. Instructors (via admin panel anon key) can read/write their assigned sessions. Admin key has full access.
Add ESL DB functions to src/school-db.js DB
getEslStudents(), createEslStudent(), updateEslStudent(), getEslSessions(), createEslSession(), updateEslSession(), logAttendance(), getEslStudentByPin().
2

Admin Panel โ€” ESL Section

Week 2 ยท school/admin.html
Sidebar & Navigation
Add "๐ŸŒ ESL Classes" item to admin sidebar UI
Insert below the ๐Ÿ™Œ Volunteers sidebar link. Section ID: esl. Data-section attribute pattern matches existing sidebar items.
ESL Students Sub-section
Student list table โ€” name, location, age, instructor, status UI
Shows all ESL students. Status badge (Active / Paused). Clicking a row opens the detail modal.
Add student form โ€” name, age, location, PIN, assign instructor, meet link, schedule UI
PIN is set here by admin and communicated to student separately. PIN is hashed (SHA-256) before storing โ€” never plain text.
Student detail modal โ€” view/edit all fields + session notes history UI
Reset student PIN from admin panel UI
Admin can issue a new PIN at any time. Old PIN immediately invalidated.
ESL Sessions Sub-section
Session overview โ€” all active pairings with schedule and meet link UI
Attendance log view per session โ€” date, attended, instructor notes UI
Add session notes from admin (separate from instructor notes) UI
New JS Module
Create src/school-esl.js โ€” all ESL admin logic UI
Follows same pattern as school-volunteers.js. Imported in school/admin.html. Exports loadEsl() called by the section router.
3

Student Portal โ€” PIN Login & Class View

Week 3 ยท school/portal.html
Authentication
Build PIN login screen on portal.html Auth
Student enters their display name + 4-digit PIN. PIN is hashed client-side (SHA-256) and matched against the stored hash in Supabase esl_students. No email needed.
Session persistence โ€” remember login for 7 days via localStorage Auth
Store student ID + a session token in localStorage. Token expires after 7 days. Student taps "Log Out" to clear.
Brute-force protection โ€” lock after 5 failed attempts for 10 minutes Auth
Tracked in localStorage (attempt count + timestamp). Resets after lockout period or successful login.
Student Dashboard
Welcome card โ€” student name, instructor name, class schedule UI
Shows: "Hello [Name]! Your instructor is [Instructor]. Your classes are [Day] at [Time]."
"Join Class" button โ€” opens Google Meet link in new tab UI
Large, prominent button. Mobile-friendly โ€” works on phone in Peru. Shows the schedule below so student knows when to use it.
Attendance history โ€” last 10 sessions (date + attended โœ“/โœ—) UI
Instructor notes visible to student โ€” progress messages from teacher UI
Shows the most recent note the instructor left. Encourages students between classes.
Mobile-first layout โ€” optimized for smartphone in Peru UI
Single column, large touch targets, minimal data usage. Test at 3G speeds.
Spanish translation for portal UI UI
Portal defaults to Spanish for ESL students (they are learning English, not yet fluent). Add a language toggle (ES / EN) on the portal page.
Instructor View (lightweight)
Instructor login to portal โ€” via existing volunteer email/access Auth
Instructors see their assigned student(s), the Meet link, and can log attendance + add a note after each class. Separate from the full admin panel.
Post-class form โ€” mark attended + add progress note UI
Simple form: Date (auto-filled today), Attended? (Yes/No), Note (optional free text). Submits to esl_attendance table.
4

Communications & Launch

Week 4โ€“6
Onboarding
Write student welcome email (EN + ES) โ€” includes portal URL and PIN instructions Email
Write instructor welcome email โ€” includes admin panel link, how to set up Meet, how to log attendance Email
One-page student guide (PDF or printed) โ€” how to log in, how to join class, who to contact Email
In Spanish. Simple enough for a child or parent to follow. Can be printed and given at the orphanage.
Notifications (nice to have)
Class reminder email โ€” sent 1 hour before scheduled class Email
Triggered manually by admin or via a future Supabase Edge Function / cron job. Contains Meet link directly in email body.
Monthly progress summary email to admin โ€” attendance rate, instructor notes digest Email
Testing & Launch
End-to-end test โ€” admin creates student, assigns instructor, student logs in, joins Meet, instructor logs attendance Test
Mobile test โ€” student portal on Android phone at simulated slow connection Test
Pilot run โ€” 1 instructor + 1 student, first 2 weeks monitored closely Test
Gather feedback from both sides. Fix any friction before adding more pairs.
Deploy to Porkbun โ€” upload all changed dist/ files Test
Expand to remaining pairs after pilot confirmed stable Test