A teaching dashboard for language tutors. Multi-page lessons, a built-in timer, student profiles, drag-and-drop reordering, a categorised toolkit of grammar / vocab / pronunciation cards, undo/redo history, and JSON import/export — all running in a browser tab with zero backend and full offline persistence via localStorage. ~2,500 LOC of vanilla JS on Vite, no framework, no dependencies in the wheel.

---

/// WHAT IT IS

┌─────────────────────────────────────────────────────────────────┐
│ TOOLBAR │
│ ▸ Page tabs (drag to reorder in edit mode) │
│ ▸ Toolkit filters · Timer (stopwatch / countdown) │
│ ▸ Edit mode · Undo / Redo · Reset session · Print │
│ ▸ Import / Export JSON · Theme toggle │
├──────────────────┬──────────────────────────────────────────────┤
│ CONTENT │ TOOLKIT (right rail) │
│ ▸ Rich-text page │ ▸ Categorised reference cards │
│ (B / I / U / │ ▸ Filter by category │
│ highlights / │ ▸ Custom categories │
│ lists) │ ▸ Add / edit / delete in edit mode │
│ ▸ Auto-saves to │ │
│ localStorage │ STUDENT PANEL │
│ on every edit │ ▸ Per-student profile + notes │
│ │ ▸ Active-student indicator │
│ │ │
│ │ CHECKLIST │
│ │ ▸ Per-session checkbox state │
│ │ ▸ Cleared on "Reset session" │
└──────────────────┴──────────────────────────────────────────────┘

---

/// WHY IT EXISTS

Most lesson-prep tools either lock you into a SaaS subscription or expect you to live inside Google Docs / Notion. LessonForge fits the actual tutoring workflow: open a tab between Zoom calls, swipe through the lesson plan, click "next page" mid-class, hit space to start the timer, scribble in the rich-text editor while the student is talking, undo a wrong edit, export the whole plan as JSON when the lesson's done.

Built for one teacher, one device, no signups, no sync, no servers — just localStorage and a print stylesheet for when you need a paper copy.

---

/// HIGHLIGHTS

Multi-page lessons	Tabs for Warm-Up / Vocab / Grammar / Practice / Wrap-Up. Drag the tab order in edit mode. Per-page rich-text content survives reloads.
Rich-text editor	contenteditable body with bold / italic / underline / highlight / lists. No external editor lib — just document.execCommand for the basics.
Toolkit cards	Categorised reference cards (grammar rules, vocab, connectors, pronunciation tips, conjugations). Filter by category. Add custom categories.
Built-in timer	Stopwatch + countdown modes. Survives tab switches via setInterval.
Student profiles	Per-student name, level, notes. Active-student indicator at the top of the right rail.
Session checklist	Per-session todos (warm-up done, homework collected, etc.). One-click "Reset session" clears boxes + timer + temporary notes — but not your lesson plan.
Undo / Redo history	50-step ring buffer in state.js. Every meaningful change snapshots. Keyboard shortcuts Ctrl/⌘+Z and Ctrl/⌘+Shift+Z.
Import / Export	One click for JSON (full state) or Markdown (lesson plan, share-ready). Round-trip between machines, hand a printable to a co-teacher.
⌘K command palette	Single keystroke jumps to any page, student, or toolkit card. Run actions ("Export Markdown", "Toggle theme", "Insert template") without leaving the keyboard.
Starter templates	Six archetypes — conversation, grammar focus, business English, exam prep (IELTS/TOEFL), absolute beginner, young learners — append as new pages with one click.
PWA / Service worker	Installable on iPad or desktop, fully offline after first load. No CDN round-trip when you open a new lesson between Zoom calls.
Save indicator	Toolbar pill shows "Saved · 3s ago" so you always know localStorage caught the last edit.
Timer chime	Web Audio API ding-ding-ding on countdown zero + on-screen toast — never miss the end of a 5-minute round-robin.
Dark mode	Sakura-pink light theme + deep-plum dark theme. Preference persists across reloads.
Print stylesheet	Dedicated print.css strips the chrome and prints the active lesson page cleanly for in-class handouts.
Keyboard shortcuts	⌘K palette · ⌘Z / ⌘⇧Z undo / redo · ⌘S export · E edit mode · 1–9 page · 0 timer · ? shortcuts.

---

/// PROJECT LAYOUT

LessonForge/
├── index.html single-page shell — toolbar + content + sidebar
├── package.json vite only — zero runtime deps
├── vite.config.js
├── src/
│ ├── main.js app controller — render · events · drag · timer
│ ├── state.js StateManager — localStorage · undo/redo · snapshots
│ ├── data.js default lessons + cards + categories + checklist
│ └── styles/
│ ├── variables.css tokens — colors, fonts, spacing, radii, shadows
│ ├── layout.css page grid + toolbar layout
│ ├── toolbar.css action buttons, dropdowns, timer chip
│ ├── content.css rich-text editor + page tabs
│ ├── toolkit.css right-rail cards + filter chips
│ ├── sidebar.css student panel + session checklist
│ ├── shortcuts.css keyboard-shortcut hint chip
│ └── print.css print-only stylesheet (strips chrome)
└── assets-readme/ brutalist banner SVGs (light + dark)

---

/// LOCAL DEV

git clone https://github.com/hatimhtm/LessonForge.git
cd LessonForge
npm install
npm run dev # vite dev server → http://localhost:5173
npm run build # production bundle → dist/
npm run preview # serve dist/ → http://localhost:4173

Static output — drop dist/ on any host (Vercel, Netlify, GitHub Pages, S3, your own teacher portal).

---

/// CUSTOMISATION

• Theme: edit src/styles/variables.css. CSS custom properties drive every color, radius, shadow, font stack.
• Default lessons: edit src/data.js. defaultPages / defaultTools / defaultCategories / defaultChecklist populate the first run; subsequent sessions load from localStorage.
• Add a category: in edit mode, click the "+" next to the category chips. State persists automatically.
• Replace the icons: the FontAwesome CDN load can be swapped for Lucide / Phosphor / Heroicons by editing two lines in index.html and the icon classes throughout.

---

/// 2.0 — OVERHAUL

The 2.0 release pushed past polish into the actual product surface:

• Custom <dialog> modal system replaces every native prompt / confirm / alert. Focus-trapped, Esc-closes, screen-reader friendly — and finally consistent with the theme.
• PWA + service worker. manifest.webmanifest + an offline-first cache layer means LessonForge installs to the home screen and survives no-wifi classrooms.
• ⌘K command palette spans pages, students, toolkit cards, and one-shot actions (Insert template, Export Markdown, Toggle theme).
• Starter-lesson templates — six teaching archetypes append as new pages.
• Save-status indicator in the toolbar (Saved · 3s ago) — never wonder if the last edit hit localStorage.
• Markdown export alongside JSON for share-ready handouts.
• Web Audio chime + on-screen toast when a countdown hits zero.
• Persisted dark theme (deep-plum) alongside the original sakura light theme.
• Brutalist house-style README, light/dark hero banners, OG + Twitter cards, theme-color, inline SVG favicon, CI that builds + sanity-checks dist/ on every push.

---

/// STATUS

🟢 Live — hatimhtm.github.io/LessonForge

Auto-deploys to GitHub Pages on every push to main via .github/workflows/deploy-pages.yml (Vite static build, base: "/LessonForge/").

---

/// LICENSE

MIT. Fork it, ship your own teacher dashboard, change the colour palette, re-skin it for any subject (it's hardcoded for languages but the bones are general). Just keep the copyright line.

---

/// OPEN FOR NEW WORK /// CONTRACT & FREELANCE /// REMOTE WORLDWIDE ///