Kinetic

Landing Page
System Design: Version 1
System Design: Version 2

Table 7B

🧩 When Learning Breaks Down (Inspiration + Problem)

You’re trying to learn something new. The video starts strong—clear, confident, full of promise. Then fifteen minutes in, the instructor drops a term you’ve never heard before. Skips a step. Speeds up. Suddenly, you’re lost.

You pause. Rewind. Try again. Another video. Then another. Each one offers pieces, but they don’t fit. They all seem to assume you either know way less or way more than you actually do. And at some point, a lot of people just... stop trying. Not because the curiosity isn't there, but because nothing seems built for the way they actually need to learn.

We noticed this first as students–how one concept you didn't catch could snowball into an entire semester feeling out of reach. But the more we talked to people outside of school, the clearer it became that this isn't really a student problem. It's everyone. The professional trying to pivot into a new field. The nurse trying to keep up with new research between shifts. The person living somewhere where teachers and educational resources are unavailable. Learning is lifelong and encompasses anyone from any walk of life.

It’s always the same: the content stays fixed, and the learner does the bending. We think it should work the other way around.

🔄 Content That Responds to Confusion (Our Solution)

We're building a platform where learning material bends to meet you in real-time the second you're confused. Our approach centers around 3 values: education ** democratization, engagement, & personalization **.

Here's how it works: You tell us what you're trying to learn. We ask where you're starting from and what you want to understand. Then we generate a lecture tailored to that starting point.

But here's what's different: You can stop at any moment and ask a question, and the lecture reshapes itself around your confusion. Learning neural networks and backpropagation isn't making sense? The lecture doesn't just define it and move on. It rethinks the next section entirely—adjusting the explanation, examples, and pacing—to make sure that concept lands before building on it.

It's like having the best tutor who can tell when your eyes glaze over and says, "Let me explain this differently." Except this scales to any topic, anytime, without the $100/hour price tag!

What You Can Do

Set preferences upfront (length, interactivity, tone)
Generate a lecture on anything (we ask clarifying questions to meet you where you are)
Pause and ask questions that reshape what comes next in real-time
Access your history—your personal knowledge base that grows with you

🛠️ How We Built It

Our Approach

We started weeks before the hackathon brainstorming potential ideas. Once we landed on adaptive learning, we went through rounds of designing the user flow and sketched the technical architecture.

The key to building this in 36 hours was aggressive modularization. We broke the system into isolated components—lecture generation, TTS pipeline, real-time communication, content generation—so no one touched the same files. We assigned tasks based on interest and experience for faster execution and fewer merge conflicts.

System Architecture

🔐 Type Safety as Foundation

Built everything in TypeScript—frontend and backend. Using Zod for runtime schema validation, we defined exact contracts for every API route. This let us work in parallel without breaking each other's code.

🔌 Two Communication Patterns

HTTP for transactional requests: user clicks "generate lecture," server processes it, returns result.

WebSockets for the complex multi-stage pipeline: Generating a lecture involves parallel AI tasks: transcript, slides, diagrams, images. Rather than making users wait 30+ seconds at a blank screen, we stream progress in real-time. As each component completes, the backend pushes it through WebSocket so users see the lecture building itself.

🧰 Tech Stack

Frontend

Next.js
Firebase Auth

Backend

Fastify – async-first architecture for handling concurrent AI API calls with variable response times
Firebase Firestore – NoSQL database for lecture and user data
Firebase Storage – stores voiceover files

AI & Content Generation

Claude Sonnet 4.5 – generates clarifying questions, creates transcripts and slides, handles Q&A, regenerates content (chosen for large context window to hold lecture state + interaction history)
LiveKit + Cartesia – real-time text-to-speech with multiple voice tones
Google Images Search API – pulls relevant images for slides
Mermaid – generates diagrams from code

🚧 Challenges We Ran Into

1. Real-Time TTS Integration

Getting lecture voiceovers working in real-time was the hardest part. We tried:

Direct LiveKit API calls—too much latency, no streaming
Manual WebSocket packet handling—complex state management
LiveKit Agents SDK (final solution)—spin up an agent per lecture, handle async transcript streaming

We used three LiveKit packages: @livekit/agents, @livekit/rtc-node, and livekit-server-sdk.

2. Debugging a Complex System

With HTTP requests, WebSockets, multiple AI APIs, and real-time streaming running simultaneously, tracking failures was brutal. When lecture generation failed, we needed to know: Claude API hang? WebSocket drop? TTS agent crash? We built robust logging and tracing instrumentation across the entire pipeline.

3. The Moving Target

Requirements evolved constantly during testing. Features that seemed good in design felt clunky in practice, so we'd rip them out and rebuild. Balancing technical complexity with user experience meant refactoring code we'd written hours earlier.

🏆 What We're Proud Of

We orchestrated multiple moving parts in real-time: backend handling HTTP and WebSocket routes, multiple AI integrations (Claude, LiveKit, Google Cloud, Mermaid), Firebase infrastructure (Firestore, Storage, Auth), and a Next.js frontend managing streaming content and dynamic regeneration. That users can generate a lecture, pause, ask questions, and watch content reshape itself in real-time feels significant for 36 hours!

Lecture regeneration is the core technical win: When users ask questions mid-lecture, we take the question, pull previous slides as context, feed both into an LLM prompt, generate new content addressing the confusion, and stream it back in real-time. The lecture changes. Slides update. Voiceover regenerates. The flow adjusts. That level of dynamic content generation working reliably under real-time constraints is what we're most proud of.

💡 What We Learned

Themes: Human & AI Code generation, System Design with Considerations & Constraints, How to Delegate & Collaborate as a Team

Emily: "I learned what good compromise looks like with generative AI---when to write your own code versus when to use assistance, and how prompt engineering bridges that gap!"

Safin: "I learned how to design complicated systems from scratch, work with AI agents in production, and build real-time communication with WebSockets."

Emma: "Designing a system with this many moving parts taught me how TypeScript and Zod contracts let teams work in parallel without breaking things."

Tyler: "The biggest lesson was delegation. Knowing when to help versus when to step back, and making deliberate calls about what to delegate to AI versus what to debug myself."

🚀 What's Next

Reduce Friction - Speech-to-Text Questions: Let users speak their confusion instead of typing. Pause the lecture, ask verbally, watch it regenerate—making it feel like actual office hours.

Engagement - Proactive Question Prompting: Detect when users might be lost and prompt them. "This part trips people up—want me to explain it differently?" Shifts from reactive to anticipatory.

Ethicality - Human Handoff Guardrails: For highly complex topics, the system should recognize its limits and suggest talking to a real expert. Keeps us positioned as enhancement, not replacement.