[MLP] Emproving — 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, in consultation with an elementary school teacher. 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 URL + QR Code: Instant participation on any device without installing apps
- 4 Worksheet Modes — English handwriting, Korean meaning → English word handwriting, 4-choice quiz, and Korean meaning → English word quiz
- 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
- Role-gated /admin backoffice — account management, note deletion, and role change via Server Actions
- 6-digit invite code + URL dual sharing — students access worksheets instantly by entering a code
- /join page student name collection — stored as a cookie, teacher dashboard identifies submitters by name
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 / QR Code Issuance
Choose a group, enter words, select a worksheet type (handwriting / Korean meaning → English word handwriting / quiz / Korean meaning → English word quiz), and instantly generate a random URL + QR code. Display the QR on screen — students join via camera scan, no printing needed.
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. Collects student names on the /join page and stores them as cookies. Anyone can join instantly via a 6-digit invite code or URL. No Google account or app installation required.
Tablet/Mobile Friendly Dashboard & User Group Management
Equipped with a 3-second polling completion counter, group-based activity lists, overall participation metrics, and a submitted-work dashboard where teachers can review each student's handwriting and grading results. Intuitive tabbed GNB navigation optimized for mobile and tablet screens. Student names are shown with submissions so teachers can see at a glance who has completed their work.
Admin Backoffice
Role-gated /admin route. Account list with stats cards. Server Actions for role change, note deletion, and cascading account deletion. Admin client with Supabase service role privileges bypasses standard RLS.
Outcome
Achieved $0 in server maintenance fees by utilizing client-side OCR, Vercel, and Supabase's free tier. Completed 4 worksheet modes — handwriting, Korean meaning → English word handwriting, quiz, and Korean meaning → English word quiz — across Phase 1~7. The architecture is lightweight and ready for immediate deployment in elementary classrooms or private tutoring.
- 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
- 4 worksheet modes (handwriting, Korean meaning → English word handwriting, quiz, and Korean meaning → English word quiz) — Phase 1~7 complete
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.
Admin Backoffice & Full Feature Complete
Completed admin CRUD: teacher detail view, note deletion, role change, and account deletion with cascade. Separated privileges using SECURITY DEFINER functions and a service_role-based admin client. All 26 Tasks across Phase 1~4 complete.
Quiz Worksheet Type
Added worksheet_type column to notes schema. Implemented 4-choice quiz (English word → Korean meaning). QuizCard with progress bar, 60-second timer, and confirmation flow.
QR Code Invite & Profile Redesign
Added QR code display and SVG download to the invite dashboard. Redesigned profile page with circular avatar and inline nickname editing.
Korean Meaning → English Word Worksheet Variants
Added Korean meaning → English word handwriting (reverse_handwriting) and Korean meaning → English word 4-choice quiz (reverse_quiz). Centralized type config in WORKSHEET_TYPE_CONFIG. Introduced 2-step worksheet type selector UI.