Layered Learning

Inspiration

Learning a new subject often feels like drinking from a fire hose: videos, articles, and flashcards pile up, but the big picture stays blurry. You memorize terms without seeing how they connect, and when you get stuck, it is hard to ask the right question.

What it does

Layered Learning turns a subject into an interactive knowledge map. You type in any topic — say, "financial risk management" or "machine learning basics" — and the app uses a large language model to build a force-directed graph of concepts, from core ideas down to concrete sub-skills. Each node is clickable: non-leaf nodes start an AI follow-up conversation so you can dig deeper, while leaf nodes show concise knowledge cards with definitions, examples, and a "mastered / not mastered" toggle.

How we built it

The app is pure-frontend: Vite + React + Tailwind CSS, with D3 and ECharts for the force-directed graph. Concept generation and dialogue go through Alibaba Cloud's Bailian (Qwen) API. There is no backend; the user supplies their own API key, which is stored only in the browser's localStorage. The build is deployed on Vercel and the code is open-sourced on GitHub.

Challenges we ran into

Designing prompts that reliably produce a clean, well-layered graph from arbitrary subjects — not a flat list of terms. Tuning the layout so dozens of nodes stay readable without overlap. Fitting everything into a pure-frontend build while keeping the AI key private and the UX fast. And as a solo builder, scoping the feature set so the core loop — type, generate, click, learn — actually feels finished.

Accomplishments that we're proud of

A working end-to-end product that turns a free-form prompt into an explorable map, deployed publicly and open-sourced. The "non-leaf → AI conversation, leaf → knowledge card" split turned out to feel natural for self-study. Keeping the whole stack client-side means anyone can run their own copy with their own key, with no data ever leaving their browser.

What we learned

Prompt design for structured graph output is the real product, not a wrapper. Visual layout choices (node size = layer, color = mastery) carry a lot of the UX weight on their own. And shipping solo forced ruthless prioritization: a small finished loop beats a long roadmap.

What's next for Layered Learning

Personalized learning paths that adapt to what each learner marks as mastered; importing a topic outline from a textbook or syllabus instead of relying on a single prompt; a mobile-friendly layout, multi-language UI, and optional spaced repetition so the cards come back at the right time. Longer term, lightweight collaboration so study buddies can mark up the same map.

Note for reviewers: Full AI features are demonstrated in the demo video; live reviewers can use their own LLM API key.

Built With

• css
• d3.js
• echarts
• force-directed
• generative
• graph
• html5
• javascript
• knowledge
• llm
• localstorage
• react
• tailwind
• vite