nghiathan13/app_vocabulary

1. What this repo is

- This is a desktop app for learning English vocabulary, not a pure web app.

- The architecture is a Tauri shell: a React + TypeScript frontend runs in a native desktop window, while a Rust backend handles desktop/runtime capabilities and local persistence.

2. Frontend application shell

- The frontend entry points are index.html, src/main.tsx, and src/App.tsx.

- App.tsx is the top-level composition point where the main screens and shared UI are assembled.

- Styling is mostly component-scoped CSS alongside a global App.css.

3. Primary UI subsystems

- The app is organized into major feature areas under src/components/:

- Home for landing/overview

- Practice for study mode

- Review for review mode

- Insights for analytics and vocabulary management

- Navbar for cross-screen navigation

- Toast for app-wide feedback messages

- This suggests a screen-based desktop workflow rather than a deeply nested SPA route hierarchy.

4. Practice and review flow

- Practice and Review are separate feature modules, which implies distinct user flows for active learning and later reinforcement.

- These screens likely consume the shared vocabulary dataset and present it in different interaction modes.

- The presence of src/services/audio.ts indicates pronunciation or sound playback is part of the learning loop.

5. Insights and vocabulary management

- src/components/Insights/ is the most complex subsystem.

- It includes:

- Chart for visual summaries

- Table for listing and editing vocabulary data

- import-related UI (Table_Import)

- persistence/save UI (Table_SaveModal)

- table actions, grid layout, and search helpers

- This area functions as the management console for the word dataset and its derived analytics.

6. Data flow for words

- src/services/words.ts is the likely frontend service boundary for all vocabulary data operations.

- The frontend does not appear to access storage directly; instead it likely goes through this service layer to read/write words and to keep UI components isolated from persistence details.

- src/types.ts defines the shared data model used across pages, services, and tables.

7. Local desktop backend

- The src-tauri/ directory is the native side of the app.

- src-tauri/src/main.rs and src-tauri/src/lib.rs are the Rust runtime entry points for Tauri commands, setup, and application lifecycle.

- This backend is where desktop-specific integration and any privileged operations live.

8. Persistence layer

- src-tauri/migrations/001_create_words.sql shows the app uses a local database schema with at least one words table.

- That strongly suggests vocabulary data is stored locally on the user’s machine, fitting a desktop-first offline architecture.

- The migration folder implies the schema is managed over time rather than created ad hoc.

9. Command/boundary model

- The architecture likely follows the standard Tauri boundary: React UI → TypeScript service layer → Tauri commands → Rust backend → local DB/system APIs.

- src/services/words.ts and src/services/audio.ts are the frontend-facing façade for those calls.

- src-tauri/capabilities/default.json indicates the backend capabilities are explicitly constrained, which is important for a secure desktop app.

10. Shared utilities and cross-cutting concerns

- src/utils.ts holds reusable helpers used across multiple features.

- src/components/Toast/ToastProvider.tsx provides a global notification mechanism, probably used by import/save/practice actions to surface success or error feedback.

- This keeps user feedback decoupled from the feature modules.

11. Build and packaging

- Frontend build tooling is Vite with TypeScript (vite.config.ts, tsconfig*.json).

- The backend is Rust/Cargo (src-tauri/Cargo.toml, Cargo.lock), with build.rs likely handling native build-time setup.

- src-tauri/tauri.conf.json and the icon assets show this is packaged as a native desktop application.

12. Architecture summary for a diagram

- A good diagram would show three main layers:

- UI layer: Home / Practice / Review / Insights / Navbar / Toast

- Service layer: audio + words + shared types/utils

- Native layer: Tauri Rust app + local database migrations

- The central business object is the vocabulary word dataset, which feeds practice, review, charts, and table management.

- The main external boundary is local desktop persistence and audio playback, not a remote server.