[MLP] Elevelyn — A Tailored English Learning Platform for Teachers & Students
Tech Stack
Overview
This project is an MLP (Minimum Lovable Product) developed to digitize English word writing practice in 3rd to 6th-grade elementary school classrooms in Korea. When a teacher creates a class group (e.g., 3rd Grade, Class 1) and a dictation worksheet, a random URL is generated. Without any app installation or sign-up, students can access the link on their school-issued devices to practice writing and spelling English words by hand with a stylus or touch input. The application leverages Tesseract.js (an open-source OCR engine managed by Google and based on LSTM neural networks) to recognize and grade the handwriting directly in the browser. Teachers can then monitor student submissions and check correctness in real time through their dashboard.
- Random URLs: Instant participation on any device without installing apps
- In-browser Tesseract.js Worker: Zero-cost OCR grading executed directly on the client side
- Handwriting Tolerance: Fine-tuned grading accuracy utilizing a Levenshtein distance similarity threshold of 0.9
- Google OAuth & Real-time Dashboard: Secure teacher authentication combined with 3-second polling for live student submission tracking
Problem
In school districts like Seoul, although digital devices such as laptops and tablets have been widely distributed in classrooms, teachers struggled to find practical ways to integrate them into English classes. Activities like handwriting practice and quizzes still relied heavily on offline paper and pencils. Consequently, teachers spent a significant amount of time manually reviewing and grading every single student's work. I identified a strong need to solve this pain point: a lightweight web platform that eliminates grading overhead for teachers while offering students a fun, interactive way to learn English online.
Key Features
Worksheet Creation & URL Issuance
Instantly generate a random URL by choosing a group and entering words. Eliminates the need for printing worksheets—done in just a few clicks.
Handwriting OCR Grading System
Runs a Tesseract.js Worker directly in the browser. Uses devicePixelRatio for a high-resolution Canvas to maximize OCR accuracy, and supports a Levenshtein similarity of 0.9 to accommodate natural variations in children's handwriting.
Supabase Schema & RLS Design
Structured database tables around notes, note_words, and note_sessions. Configured Row Level Security (RLS) policies to allow anonymous student submissions without login hurdles.
Everyone can participate at the same time
Identifies student sessions via localStorage UUIDs. Requires no Google account or app installations—anyone can join the practice session instantly with a single URL.
Tablet/Mobile Friendly Dashboard & User Group Management
Equipped with a 3-second polling completion counter, group-based activity lists, overall participation metrics, and an intuitive tabbed navigation optimized for mobile and tablet screens.
Outcome
Achieved $0 in server maintenance fees by utilizing client-side OCR, Vercel, and Supabase's free tier. The architecture is lightweight and ready for immediate deployment in elementary classrooms or private tutoring. We plan to expand the content with vocabulary quizzes, speaking practice, and more based on teacher feedback.
- Client-side OCR processing: Scalable to unlimited users with $0 server overhead
- Zero infrastructure cost: Built entirely on Vercel and Supabase Free Tier
- No barriers to entry: Deployable instantly in classrooms without app installation or signups
- Future pipeline: Plans to expand features to include pronunciation practice, vocabulary quizzes, and speech-to-text assessments
Development Timeline
Static Canvas Worksheet Demo
Built a ResizeObserver-based 5-line handwriting guide layout, Pointer Events drawing engine, and initial Tesseract.js OCR integration. Operating solely on URL parameters without database or authentication, we quickly validated the teacher canvas UX via Vercel Preview.
Supabase Schema & Google OAuth
Designed a 3-table database schema (notes / note_words / note_sessions). Secured routes with Google OAuth and proxy.ts. Established the core flow from dictation list creation to URL generation and dashboard monitoring.
Student Flow & MLP Complete
Completed the student user flow: URL access to worksheet, anonymous submission tracking using localStorage UUIDs, and a completion screen. Established a fully functional, end-to-end database loop with Supabase.
Post-MLP (Groups, Dashboard, Profile)
Extended the schema to support class groups (groups table + notes.group_id). Developed group-specific worksheet lists, a key-metrics dashboard displaying total participation and completion rates, along with profile management and tab-based GNB navigation.
E2E Testing & Admin Backoffice In Progress
Validating core MLP E2E scenarios and preparing to develop an /admin backoffice for managing accounts and viewing usage statistics.