Inspiration
We saw a common pain point: STEM subject explanations are often static, abstract, and hard to “feel.” Learners can watch videos, but they rarely get immediate visual intuition. We wanted to turn any topic into an interactive course where students learn by exploring, not memorising.
What it does
OpenBook is an AI-powered course generator for STEM topics. You enter a topic, and it automatically builds a structured lesson with multiple slides. Each slide includes:
- An interactive visualisation (p5.js or Three.js rendered in-browser),
- AI-generated explanation text/transcript,
- Progressive lesson flow from fundamentals to advanced ideas.
How we built it
We built a 3-layer architecture:
- Frontend: React + TanStack (course gallery, lesson pages, slide player with iframe visualisations + transcript UI).
- Backend: NestJS orchestration API (lesson/slide lifecycle, persistence, retrieval endpoints).
- Generation engine: FastAPI service that uses LLMs to generate lesson plans and per-slide visual experiences, then writes results to the shared database.
Flow: 1) User submits a topic. 2) Backend triggers vis-engine generation. 3) Vis-engine creates lesson outline + slide prompts. 4) Slides are generated one-by-one (code + content), validated, and stored. 5) Frontend displays ready slides as interactive learning units.
Challenges we ran into
- Making generated visualisations reliably runnable across diverse topics.
- Keeping slide-to-slide coherence while still generating each slide independently.
- Handling async generation states cleanly in UX (pending, generating, ready, failed).
- Designing prompts that produce pedagogically useful interactions, not just pretty animations.
- Balancing speed vs quality for hackathon demo timelines.
Accomplishments that we're proud of
- End-to-end topic-to-course pipeline is working.
- Real interactive slide rendering in-app, not just static AI text.
- Add adaptive personalisation by learner level and goals.
- Practical learner UX: topic input, lesson list, slide navigation, transcript pairing, voiceover.
- Strong foundation to support multiple STEM domains beyond one-off demos.
What we learned
- Prompt quality is product quality for AI-generated education.
- Visualisation + guided explanation is far more effective than text-only output.
- Separating orchestration from generation makes iteration much faster.
- Status-driven architecture (draft/generating/ready/failed) is essential for AI workflows.
- Educational clarity must be a first-class requirement, not an afterthought.
What's next for OpenBook
- Introduce interactive checks/quizzes per concept to verify understanding.
- Improve generation guardrails for consistency, accessibility, and visual readability.
- Expand subject coverage (physics, math, chemistry, data science) with reusable templates.
- Add analytics to measure concept mastery and improve generated lesson quality over time.
Built With
- elevenlabs
- javascript
- openai
- p5.js
- python
- react
- three.js
- typescript
Log in or sign up for Devpost to join the conversation.