A visual interactive textbook for JavaScript -> TypeScript -> Vue -> React for learners aged 16+ and complete beginners.
Status: Planning phase. No application code yet. This repository contains the product strategy and project documentation.
FrameBook is not "just another text tutorial." It is a visual textbook where every concept is first shown through animation, diagrams, and metaphor, then explained, and immediately practiced in a live browser sandbox.
The textbook is designed for creative visual learners: people who understand information through images rather than walls of text. The visual layer is the primary learning channel, and the product must meet a world-class modern design standard comparable to the best product websites. Images, animation, and presentation quality are not decoration here; they are the core of the learning experience.
The textbook leads the learner through four tracks arranged as a logical staircase:
JavaScript -> TypeScript -> Vue 3 -> React 18
foundation types on top framework framework
- World-class design: a modern, sharp aesthetic where visuals carry meaning.
- Built for visual learners: content is designed for people who think in images, not paragraphs.
- Visual-first learning: animations with Lottie, GSAP, and SVG explain how code works.
- Live sandboxes: Sandpack or StackBlitz on the lesson page: write code and immediately see the result.
- Bilingual content: all content exists in Russian and English with a language switcher.
- Gamification: progress, XP, badges, and a skill map.
- Vue and React in one project: enabled by Astro's islands architecture.
- Accessibility: reduced-motion support, alt text, keyboard navigation, and strong contrast.
Astro for content and islands · MDX · Vue 3 + React 18 · Sandpack · Tailwind CSS · GSAP / Lottie · Pagefind for search · i18n for RU/EN · localStorage for progress.
Details: docs/01-ARCHITECTURE.md.
| # | Document | Focus |
|---|---|---|
| - | README.md | Entry point |
| 00 | docs/00-VISION.md | Mission, audience, learning goals, principles |
| 01 | docs/01-ARCHITECTURE.md | Technology stack and application architecture |
| 02 | docs/02-PROJECT-STRUCTURE.md | Folder structure and conventions |
| 03 | docs/03-CURRICULUM.md | Full curriculum: JS, TS, Vue, React lessons |
| 04 | docs/04-PEDAGOGY.md | Teaching method, lesson anatomy, animation strategy |
| 05 | docs/05-INTERACTIVITY.md | Sandboxes, exercises, quizzes, auto-checking |
| 06 | docs/06-DESIGN-SYSTEM.md | Visual style, color, typography, mascot |
| 07 | docs/07-GAMIFICATION.md | Progress, XP, badges, skill map |
| 08 | docs/08-CONTENT-AUTHORING.md | How to write lessons, MDX components, i18n |
| 09 | docs/09-COMPONENT-LIBRARY.md | Component catalog for implementation |
| 10 | docs/10-ROADMAP.md | Implementation phases, MVP, milestones |
| 11 | docs/11-CLAUDE-DESIGN-BRIEF.md | English design brief for Claude Design |
- 00-VISION: why this exists and who it serves.
- 03-CURRICULUM: what exactly is taught.
- 10-ROADMAP: the build order.
The first shippable milestone, the MVP, is the complete JavaScript track in both languages with sandboxes, animations, and quizzes. See Phase 2 in the roadmap.