$ show zyronon/TypeWords
TypeWords is a browser-based English vocabulary and article memorization application built with Nuxt 3 / Vue 3. It operates on a local-first architecture, storing user progress in IndexedDB, with an optional (now obsolete) Supabase cloud sync. The application is a monolith SPA but is well-modularized into a custom UI kit (app/base/), core business logic (app/core/), and page components (app/pages/). The core learning mechanic is typing-based practice, supporting multiple modes (follow-write, dictation, self-test, spelling) for both individual words and full articles. It integrates the FSRS (Free Spaced Repetition System) algorithm for intelligent review scheduling. Static dictionary data (CET-4, GRE, NCE articles) is loaded from bundled JSON files. The practice flow is managed by a sophisticated, serializable state machine (practice-flow-types/runtime), demonstrating strong architectural patterns. The codebase exhibits high craftsmanship in several isolated components, such as the global dialog stack, event bus, and versioned cache. These are genuinely reusable patterns. However, the project suffers from significant technical drift: it relies on experimental Vue Macros ($ref/$computed), has zero automated tests, contains dead code (obsolete Supabase sync), and bundles third-party libraries statically. The TypeScript configuration is lax (strict: false), increasing refactoring risk. TypeWords is a feature-rich, community-driven project (10k+ stars) that effectively solves a specific learning problem. Its architecture is a valuable study for developers building local-first, content-rich Vue applications. However, its lack of tests and reliance on experimental features make it a risky candidate for direct production reuse without significant hardening. It is best suited for educational analysis or as a foundation for a new project willing to address the technical debt.
The LLM identified 5 files worth highlighting for reuse:
Implements a global modal dialog stack with z-index management, focus trapping, and escape handling. The stack.ts manages the lifecycle of multiple dialogs, ensuring only the topmost is interactive. This is a classic, reusable UI pattern executed with clean Vue 3 composition.
Defines a generic, serializable state machine for a typing practice session (PracticeFlowConfig, PracticeFlowRuntime). It separates configuration (phases, cursors) from runtime state, allowing the entire session to be saved and restored. This is a non-obvious, high-craftsmanship pattern applicable to any step-by-step interactive flow.
Provides a robust versioned persistence layer ({ val, version, updated_at }) on top of IndexedDB/localStorage. It handles schema migrations gracefully by checking the version and applying upgrade functions. This is a critical pattern for local-first applications that solves a common data engineering problem.
An abstract Translator base class defining a clean interface (translate method, TranslateResult type). The Baidu implementation demonstrates the strategy pattern. This allows the translation backend to be swapped without affecting the rest of the application.
Provides a global event bus using the 'mitt' library for cross-component communication, primarily for keyboard shortcuts and internal app events. The useEvents and useEventsByWatch composables offer a clean, injectable API for subscribing to and emitting events, decoupling components effectively.