StudyTok

Inspiration

We are living in an attention economy crisis. Students today struggle to focus on traditional long-form content—textbooks, 40-page PDFs, and hour-long lectures—because their brains are wired for the dopamine loops of modern social media.

We realized that fighting this behavior is a losing battle. Instead of banning the scroll, we decided to hack the scroll. We asked ourselves: What if we could take the depth of a biology textbook and format it into the addictive, bite-sized medium of short-form video?

That’s how StudyTok was born.

What it does

StudyTok is an AI-powered educational platform that instantly transforms static documents into an infinite, TikTok-style video feed.

1. Upload & Analyze: A student uploads any source material (PDF, notes, or images).
2. Instant Content Creation: The AI breaks the material down into distinct "micro-lessons," writing scripts that follow a viral structure (Hook → Concept → Takeaway).
3. Visual & Audio Synthesis: It generates relevant AI visuals and human-quality voiceovers in parallel.
4. The Feed: The content is presented in a vertical, infinite-scroll interface.
5. Interactive Tutoring: If a user gets stuck, they can tap "Ask AI" to open a chat that knows the exact context of the video they are watching.

How we built it

We built StudyTok with a modern, high-performance stack designed to mimic the fluid feel of native social apps.

• Frontend: We used React and TypeScript with Vite for a snappy experience. The UI is styled with Tailwind CSS, utilizing glassmorphism and neon aesthetics to feel at home for Gen Z users.
• Backend: A robust Node.js and Express server handles the orchestration.
• The AI Pipeline:
  • Scripting: We use Large Language Models (LLMs) to parse dense academic text and rewrite it into conversational, engaging scripts.
  • Visuals: The system generates prompts for AI image generation to visualize complex concepts on the fly.
  • Audio: We integrated an ultra-low latency Text-to-Speech engine to provide realistic narration that syncs perfectly with the subtitles.
• Database: We used SQLite for efficient local data management during the hackathon.

Challenges we ran into

• Prompt Engineering for Education: Getting an AI to be "funny" or "engaging" is easy, but getting it to be engaging while maintaining strict academic accuracy was a challenge. We had to iterate heavily on our system prompts to ensure the "micro-lessons" didn't lose important nuance.
• Audio-Visual Sync: Synchronizing the scrolling subtitles with the generated audio required precise calculation of word-level timestamps to ensure the experience felt seamless and professional.
• Latency: Generating multimedia content takes time. We had to implement optimistic UI states and a background processing queue to keep the user engaged while the "magic" happened.

Accomplishments that we're proud of

We are most proud of the User Experience. Many EdTech tools feel clunky or academic. StudyTok genuinely feels like a social media app. The "infinite scroll" mechanic works perfectly, and the interaction loop (tapping "Got it" or "Confused") provides a frictionless way to study without feeling like work.

What we learned

We learned that the medium is just as important as the message. You can have the best study notes in the world, but if they are boring to read, no one will learn from them. By changing the delivery mechanism to video, we drastically increased the potential for retention.

What's next for StudyTok

• Gamification: Adding streaks, daily goals, and leaderboards to incentivize consistency.
• Community Feed: Allowing students to publish their generated StudyToks so others can learn from their notes.
• Multi-Modal Inputs: Expanding support to YouTube links (summarizing long lectures into shorts) and audio recordings.

Built With

• css3
• express.js
• google-gemini
• html5
• node.js
• react
• sqlite
• tailwindcss
• typescript
• unreal-speech
• vite