LessonForge: Open-Source Lesson Management Tool by Hatim El HassakLessonForge: Open-Source Lesson Management Tool by Hatim El Hassak

LessonForge: Open-Source Lesson Management Tool

Hatim El Hassak

Vibe Coding

Tutor

Fullstack Engineer

CSS

JavaScript

Vite

Education

🎓 LessonForge

Open-source lesson management terminal for language teachers

A beautiful, offline-capable dashboard to organize lessons, track class time, manage student profiles, and store teaching resources — all in your browser.

✨ Features

📖 Lesson Management

Multi-page lessons — Organize content into separate pages (Warm-Up, Vocabulary, Grammar, etc.)

Rich-text editing — Bold, italic, underline, colored highlights, lists

Drag-and-drop reordering — Rearrange lesson pages by dragging

Import/Export — Share lesson plans as JSON files with colleagues

🧰 Toolkit

Resource cards — Quick-reference grammar rules, vocabulary, pronunciation tips

Categorized & filterable — Filter cards by type (Grammar, Vocabulary, Connectors, etc.)

Custom categories — Add your own card categories

Fully editable — Add, edit, and delete cards in edit mode

⏱️ Timer

Stopwatch mode — Count up during class

Countdown mode — Set a timer (e.g. 25 minutes) with visual warnings at 60s and expiry alert

Keyboard shortcut — Press 0 to start/stop

👩‍🎓 Student Profiles

Save student name, level, and notes

Quick-switch between students from the toolbar dropdown

Stored in localStorage — persists across sessions

🎨 Design

Sakura theme — Soft pink/rose palette in light mode, deep rose in dark mode

Dark mode toggle — One-click switch

Print stylesheet — Ctrl+P prints just the lesson content, no UI chrome

Keyboard-first — Number keys to switch pages, E to edit, ? for shortcuts

💾 Data

LocalStorage persistence — All data auto-saved

Undo/Redo — Up to 50 history snapshots

JSON import/export — Portable lesson plans

🚀 Quick Start

# Clone the repo
git clone https://github.com/hatimhtm/LessonForge.git
cd LessonForge

# Install dependencies
npm install

# Start dev server
npm run dev

Open http://localhost:5173 in your browser.

Production Build

npm run build
npm run preview

⌨️ Keyboard Shortcuts

Key Action 1–9 Switch lesson page 0 Start/stop timer E Toggle edit mode ? Show shortcuts modal ⌘Z / Ctrl+Z Undo ⌘⇧Z / Ctrl+Shift+Z Redo ⌘S / Ctrl+S Export lesson Esc Close modals

📁 Project Structure

LessonForge/
├── index.html              # App entry point
├── package.json            # Dependencies & scripts
├── vite.config.js          # Build config
└── src/
    ├── main.js             # App controller
    ├── state.js            # State manager (localStorage, undo/redo)
    ├── data.js             # Demo content & defaults
    └── styles/
        ├── variables.css   # Design tokens & themes
        ├── layout.css      # Grid layout & modals
        ├── toolbar.css     # Toolbar & buttons
        ├── content.css     # Lesson content typography
        ├── toolkit.css     # Resource cards & filters
        ├── sidebar.css     # Navigation & checklist
        ├── shortcuts.css   # Shortcuts modal
        └── print.css       # Print stylesheet

🔧 Customization

Adding Your Own Lessons

Click Edit in the toolbar

Create pages, add toolkit cards, customize the checklist

Click Export to save your lesson as a JSON file

Share the JSON with colleagues — they can click Import to load it

Changing the Theme

Edit src/styles/variables.css to customize colors, fonts, spacing, and border radius tokens.

📄 License

MIT — free for personal and commercial use.

Built with ❤️ for teachers everywhere

Like this project

Posted Feb 13, 2026

Created an open-source lesson management tool for language teachers.

Likes

Views