Artificial Intelligence · Frontend

A Dad Built a Flashcard App to Replace the Chaos of After-School English Review

By jason_yang · Jul 28, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

AI-assisted coding makes it viable to build hyper-specific tools for a single family — something previously too expensive to justify. The architecture choices (local-first, free-tier cloud, browser TTS, Emoji-first images) show a repeatable pattern for personal tools that must stay cheap, resilient, and simple enough for non-technical family members.

Summary

After-school English review meant scrolling through WeChat group messages to find videos, dragging progress bars, and pausing for each word — a process that lost a child's attention fast. Existing apps like Baicizhan or Oulu Dictionary were either too cluttered or too adult-focused for a preschooler's needs. The solution was a minimal Vue 3 app that parses the teacher's daily text into clean word and sentence cards, assigns Emoji or searchable images, and auto-reads each card using the browser's speech synthesis. A three-tier image fallback — system Emoji, Openverse/Wikimedia search, local upload with Canvas compression — keeps every card visually clear without depending on paid APIs. Data lives in localStorage first for offline resilience, then syncs to Supabase PostgreSQL through Edge Functions with a family edit code and revision-based conflict avoidance. The frontend deploys to GitHub Pages, keeping hosting free and separate from the data layer. The result isn't a curriculum; it's a focused tool that turns ten minutes of daily friction into a few taps a child can manage alone.

Takeaways

— Teacher group-chat messages are class records, not review products; extracting only words and sentences into cards removes noise for the child.

— Content is organized by class date so each review session matches exactly what was taught that day.

— System Emoji covers most early-childhood vocabulary and avoids network dependency, rate limits, and storage costs.

— When Emoji falls short, Openverse and Wikimedia Commons provide free, searchable reference images directly inside the app.

— Local images are compressed client-side to 720px WebP before uploading to Supabase Storage to keep sync fast and cheap.

— Browser speechSynthesis with a slightly slowed rate (0.78) is free and sufficient for repeating a handful of daily words.

— localStorage keeps review usable during network outages; cloud sync through Supabase Edge Functions handles multi-device sharing.

— A revision field on cloud records prevents one device from silently overwriting another's changes.

— Cloudflare Pages + D1 was abandoned after persistent access instability; Supabase + GitHub Pages proved more reliable for this use case.

— GitHub Pages requires Vite's base to match the repository name when deployed under a sub-path.

Conclusions

Personal-tool development inverts commercial logic: the hardest step is shrinking the requirement until it fits one family's actual routine, not adding features.

AI's role here is as a one-time content organizer during setup, not a runtime dependency — the playback path stays deterministic and debuggable.

The three-tier image strategy (Emoji → open search → local upload) is a practical model for any personal tool that needs visuals without ongoing costs.

Migrating from Cloudflare to Supabase mid-project highlights that free-tier reliability, not feature set, often dictates the final stack for solo builders.

Keeping a family edit code instead of full auth avoids the complexity of user management while still preventing public writes.

Concepts & terms

Supabase Edge Functions

Serverless functions that run on Supabase's infrastructure, used here as a secure read/write API layer between the Vue frontend and PostgreSQL, avoiding direct database exposure.

RLS (Row-Level Security)

A PostgreSQL feature that restricts which rows a database user can access. Enabled on Supabase tables so the frontend cannot directly query or modify data without going through the Edge Function.

Optimistic Locking via Revision

A concurrency control pattern where each record carries a version number. On save, the client sends its expected version; if the server's version is higher, the save is rejected with a 409 to prevent overwrites.

From the discussion

The discussion splits between those who see the app as excessive academic pressure on a preschooler and those who question its pedagogical fit. One objection invokes kindergarten policies that restrict formal instruction to protect imagination. Another suggests English cartoons might be more engaging than flashcards for a four-year-old. A lighter note asks for the app to be repurposed for college exam prep.

— Kindergarten regulations in China prohibit teaching certain content to avoid stifling children's imagination, making the app potentially inappropriate for its target age.

— Flashcards may lack the fun and engagement a preschooler needs, with English cartoons proposed as a more effective alternative.

— The app is perceived as part of an overly competitive early-education culture, described as 'rat race' intensity.

— An adult preparing for CET-4/6 sees the tool as useful for their own study, suggesting the core concept has broader appeal beyond early childhood.

Featured comments

xpyoyo

Don't kindergartens ban teaching certain things? It affects kids' imagination later.

杭州胖敬亭

Is this app a bit lacking in fun for kindergarten kids? Would watching English cartoons work better?

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗