EduStory — Story-Driven Learning

EduStory transforms dry educational topics into immersive narratives. Using story-driven learning, we turn facts into memorable journeys with human-like audio and a tactile, premium interface.

Comment

💡 Inspiration

Traditional learning often feels like a chore—memorizing dry facts from static textbooks. We wanted to create a platform that turns "learning" into an "experience." Inspiration came from the psychological fact that humans remember stories much better than isolated data points. EduStory was born to bridge that gap.

🚀 What it does

EduStory is an immersive learning assistant that transforms any topic—from Quantum Physics to the History of Sushi—into a compelling narrative. It scuplts dry information into age-appropriate stories, narrates them with premium human-like voices (via ElevenLabs), and validates knowledge through interactive, story-aligned quizzes.

🛠️ How we built it

The project is built on the Next.js 15 App Router for a snappy, modern frontend experience. We utilized Hugging Face's LLMs for narrating/quiz logic and ElevenLabs for high-fidelity voice synthesis. Data is persisted in MongoDB Atlas, and the entire aesthetic was custom-crafted using Tailwind CSS 4 to achieve a unique, high-depth "Claymorphism" UI.

🧠 Challenges we faced

One of the biggest hurdles was making the UI feel "alive" and tactile without sacrificing performance. We also spent significant time refining the AI prompt engineering to ensure that the stories were educational, accurate, and truly narrative-driven, rather than just simple summaries.

🏆 Accomplishments that we're proud of

We are incredibly proud of our "Story-Driven Learning" engine. We managed to create a system that doesn't just "output text," but crafts an actual personality and atmosphere. The tactile "sculpted" design of the site creates a sense of focus and premium quality that is rare in educational tools.

📖 What we learned

We learned the power of "Design as an Experience." A beautiful UI isn't just for looks; it lowers the barrier to entry for complex topics. We also deepened our knowledge of streaming audio data and managing state across complex AI-driven workflows.

🔮 What's next for EduStory

We plan to add cooperative learning modes where users can "co-sculpt" stories together and integrate real-time image generation to visualize scenes from the stories as they are being narrated.

Built With

  • elevenlabs-api
  • framer-motion
  • hugging-face-api
  • lucide
  • mongodb-atlas
  • mongoose
  • next.js-15
  • nextauth.js
  • react
  • react-19
  • tailwind-css-4
Share this project:

Updates