This document describes the current functional scope, user experience, learning logic, storage model, and structural architecture of the standalone Spanish learning web app. It is intended as the baseline product specification for maintenance and controlled future enhancement.
A process flow diagram is useful for this app because the most important behavior is procedural: load item, answer, evaluate, persist, and re-render. A classic object-heavy class diagram is less central here, but a UML-style domain/model diagram still makes sense for content entities, runtime state, and progress records.
The application is a browser-based Spanish learning app focused on practical travel and everyday situations such as restaurant visits, hotels, shopping, markets, orientation, and small talk.
The current product combines words, phrases, quiz, conversation practice, speech output, microphone-supported input, local progress saving, and backup import/export in one standalone interface.
| View | Purpose | Main features |
|---|---|---|
| Home | Entry point and orientation | Intro text, onboarding, streaks, backup import/export |
| Words | Flashcard-style vocabulary learning | Flip, audio, microphone mode, status menu, filtering |
| Phrases | Sentence and expression learning | Phrase card, audio, star, status actions, microphone mode |
| Conversation | Context-based practice | Scene selection, message flow, response options, restart |
| Quiz | Mixed recall and understanding check | Words + phrases, weighted selection, feedback, mic mode |
| List | Lookup and maintenance | Search, filter, status adjustment, de-duplicated table |
The app manages content entities for words, phrases, and focus phrases. Runtime state includes filters, current indices, view selection, microphone state, preferences, and quiz context.
Learning progress is stored in IndexedDB, while preferences, streak data, and backup metadata are stored locally in browser storage. A dedicated backup file can export and restore the progress set.
The following process flow focuses on the common learning cycle shared by the Words, Phrases, and Quiz areas.
Because the app is implemented mainly as a functional browser app, a strict class diagram is less valuable than in a deeply object-oriented codebase. A UML-style domain and state model is still useful to show the main entities and relationships.