DEV Community

Juan GonzĂĄlez Ponce
Juan GonzĂĄlez Ponce

Posted on

đŸŒ± Building Roots: Voice-First School System with ElevenLabs

WLH Challenge: Building with Bolt Submission

This is a submission for the World’s Largest Hackathon Writing Challenge: Building with Bolt.

When we joined the World’s Largest Hackathon, we had one ambitious idea: reimagine how families and students experience education using voice, AI, and storytelling. The result was Roots — an open-source educational platform designed to support underserved communities with multilingual voice agents, real-time illustrations, and wellness tools for parents and children alike.

What We Built

  • Roots combines a modern school platform with AI-powered voice services. Some of our core features include:
  • Storytelling sessions with real-time illustrations, powered by ElevenLabs and DALL·E 3, where children see their story scenes drawn as they speak.
  • Voice-first tutoring in subjects like math, chess, and language learning.
  • Parent wellness coaching, offering stress management and support through 24/7 conversational agents.
  • Multilingual support, including Spanish, Chinese, Ukrainian, and Romanian — all localized with a hybrid translation system built on Lingo.dev.

We designed this for families who often don’t have access to elite tutoring, immersive tech, or robust educational systems. Roots brings that access directly to them — voice-first, mobile-ready, and completely free.

âž»

Building with Bolt: The Technical Journey

We used Bolt.new to kickstart our frontend and backend with an ideal stack: React 19 + Tailwind CSS + Fastify with full TypeScript support. Bolt gave us a polished, preconfigured playground — the kind that lets you move fast and stay focused on creativity.

Within hours, we had the initial pages styled, routes defined, and real-time connections established using Server-Sent Events (SSE). Features like voice-driven storytelling and live image rendering felt like building scenes in a children’s book, but in code. Honestly, it’s the closest we’ve come to “writing a story” through software.

Bolt made prototyping joyful.

❀ Favorite Feature

The integration with ElevenLabs’ voice agents through tool-calling was incredibly smooth.

{
  "name": "generate_story_illustration",
  "description": "Creates a beautiful illustration for the current story scene",
  "parameters": {
    "story_content": "The current story content",
    "characters": "Main characters in the scene",
    "setting": "Where the scene takes place",
    "mood": "The emotional tone",
    "current_scene": "Specific scene to illustrate"
  }
}
Enter fullscreen mode Exit fullscreen mode

The agent would then call our Fastify backend, which triggered a DALL·E image, and we streamed that back to the user in real-time. Magic ✹

âž»

AI Changed How We Build

We didn’t just use AI in the app — we also used AI to build the app. From generating type-safe prompt handlers to crafting localized translation flows, AI tools helped us go faster, spot edge cases, and even debug image latency issues.

AI paired with Bolt’s scaffolding created a real sense of creative momentum.

âž»

One Bump in the Road


One issue we hit with Bolt: it auto-pushed our code — including .env files — to GitHub. đŸ˜± This broke some basic security expectations and nearly cost us our ElevenLabs and OpenAI keys.

We ended up switching environments for production and audit safety. It’s a small hiccup, and we’re optimistic Bolt will address it quickly, but it’s worth flagging for anyone building with sensitive keys.

âž»

đŸ‘„ Team

Built by a small team of two Madrid-based parents and technologists under the Roots project. This submission is published by @jgponce — special thanks to my team mate Fran and everyone who helped imagine a better future for public education.

âž»

🧼 Developer Contribution Dashboard: A Meta Feature in the Making

One of the more meta and satisfying features we built during the hackathon wasn’t part of the public platform at all — it was an internal Developer Contribution Dashboard. Inspired by our own need to reflect and document, we created a tool that analyzes git history and surfaces insights like commit frequency, code quality, technical impact areas, and innovation highlights.

Project Contribution Overview

It tracks lines of production-ready code across all active days, highlighting areas of major work and contribution per each developer. The features maps our sprint timeline and most modified files to give a full-picture summary of our development effort. We think this could grow into a full product of its own — a personal portfolio generator or team impact tracker for hackathons and beyond.

Impact Summary
Innovation Highlights

âž»

🎉 What’s Next?

Roots is just getting started. We’ll keep improving it beyond the hackathon — especially for schools that don’t have the funding or time to explore AI. Our next goals include character consistency across story illustrations, subtle animations, and collaborative storytelling sessions for classrooms.

If you’re building for impact, join us — let’s create tools that matter.

Top comments (0)