English Vocabulary Dashboard

A personal, single-page web app for learning English vocabulary (B2 → C1 level). Built as one self-contained index.html — no build tools, no dependencies.

Concept

Words from weekly tutor lessons are stored as interactive cards designed around how vocabulary actually sticks: context + visuals + collocations, not isolated words.

Features

• Flip cards — front: word, emoji visual, part of speech, meaning, lesson date; back: collocations + example sentences (the word is auto-bolded in examples)
• Types — cards can be words, phrases, or idioms (filterable, tagged)
• Audio — browser text-to-speech pronunciation (🔊)
• Quiz mode — shows emoji + meaning, you recall the word; missed cards repeat within the round
• Progress tracking — each card is New / Learning / Learned, with a progress bar and status filters
• ＋ Add on the site — form for new words/phrases/idioms (text, type, emoji, meaning, collocations, examples, lesson date); custom cards can be deleted
• ⇩ Export / ⇧ Import — full backup of words + progress as JSON
• Filters — search, lesson date, type, learning status
• Offline-first — everything is also cached in browser localStorage

Architecture

• index.html — the app (HTML + CSS + vanilla JS, no dependencies)
• words.js — vocabulary data, generated by Claude from new-words.txt
• new-words.txt — inbox where the user drops raw words from lessons
• User-added words (via the ＋ Add form) and progress live in localStorage (vocab-custom-v1, vocab-progress-v1)
• Images: emoji-first (always works offline); optional local image files can be layered on top per card (image field). Web image CDNs were unreliable from this machine, so local/emoji is the default

The word-adding workflow (main flow)

1. After a lesson, dump the new words into new-words.txt — one per line, optional lesson date: to put off | 2026-08-23
2. Tell Claude: "generate cards for new words"
3. Claude generates full cards (meaning, IPA, collocations, examples, emoji, type) into words.js and clears the processed lines
4. Re-deploy: drag the folder onto Netlify Drop again (~10 sec)

Word content is baked into the static site — no database or API key needed for the words themselves.

Cloud sync (Supabase) — optional, only for progress

The sync layer is already coded into index.html (the SYNC block at the top of the script). Since word content is baked into words.js, Supabase is only needed if you want learning progress (New / Learning / Learned) synced across devices. Once the URL + anon key are filled in:

• All words + progress are stored as one JSON row in a vocab_store table
• On load: pulls from cloud; on any change: pushes (debounced, "last write wins")
• Sync status indicator in the header (synced / syncing / offline)
• Works from any device on any network

Supabase setup (one-time, ~10 min)

1. Create free account + project at supabase.com
2. SQL Editor → run:

create table vocab_store (
  id text primary key,
  data jsonb,
  updated_at timestamptz
);
alter table vocab_store enable row level security;
create policy "anon access" on vocab_store
  for all using (true) with check (true);

3. Settings → API → copy Project URL and anon public key into the SYNC block in index.html

Supabase notes

• Free tier (no card): 500 MB DB — this app uses kilobytes
• Free projects pause after 7 days of inactivity: data is preserved, one click to restore; opening the dashboard counts as activity and resets the clock
• The anon key in client-side code is by design; anyone with the URL + key could read/edit the vocab list (low stakes — keep the URL private)
• Export occasionally as an independent backup

Hosting — GitHub Pages (live)

• Live site: https://koalaa13.github.io/
• Repo: koalaa13/koalaa13.github.io (public — required for free Pages), deployed from master branch root
• The english_lessons folder IS the git repo — updating the site is:

cd ~/english_lessons
git add -A && git commit -m "new words" && git push

• Old site content (csgoteammates, 2021) was replaced; its history remains in git if ever needed
• Note: commits carry the git-configured email address publicly

VM self-hosting — evaluated and rejected

Checked 1.vm-ai.koalaa13-vm.hc.idzn.ru (SSH port 4422): Ubuntu 20.04, Node 18, Docker, MongoDB — but no internet access and no public IP (internal 10.200.66.81, reachable only via SSH gateway). It could only serve devices on the corporate network/VPN, which breaks the "phone during commute" use case. Supabase chosen instead.

Current status / next steps

• Dashboard with cards, quiz, filters, progress
• Data pipeline: new-words.txt → Claude generates → words.js (skill: /vocab-cards)
• Hosted on GitHub Pages: https://koalaa13.github.io/
• First real word batch (26 cards, 2026-08-23)
• Decision: progress is per-device (localStorage) — user chose phone-as-main-device; Supabase sync code remains but disabled
• Optionally: real photos per word — TRIED 2026-08-23 (Openverse, CC images) and rejected: too many irrelevant results for abstract words; emoji-only is the final visual system