EchoVerse

EchoVerse: Your AI-powered learning universe. Instantly create personalized roadmaps, deep research insights, animated video lessons and interactive AI tutors—learning redefined

Comment

Who the hell Reads All?!! 🔉Listen Audio Here

Project Story

Inspiration

It started with a single, frustrating question: "Where do I even begin?"

Like many, we found ourselves adrift in the vast ocean of online information. We were trying to learn new skills—delving into quantum computing, mastering a new programming language, understanding the nuances of financial markets. Each journey began the same: a flurry of open tabs, a dozen half-watched YouTube tutorials, a collection of bookmarked articles, and a growing sense of being overwhelmed. We were data-rich but knowledge-poor, drowning in information but starved for understanding.

The breaking point came late one night, staring at a 50-page research paper that held the key to a concept we needed to grasp. We didn't need more links or another video. We needed a guide. A mentor. A tool that could meet us where we were, understand our goal, and say, "I get it. Let's break this down, together."

That's when the idea for EchoVerse sparked. What if, instead of us adapting to the rigid structure of online content, the content could adapt to us? What if a platform could act as an echo to our curiosity, reflecting our questions back not as more information, but as a personalized path forward?

We started with a simple prototype: a roadmap generator. But as we integrated more advanced AI, we discovered something profound. The real magic wasn't just in structuring knowledge, but in transforming it. Suddenly, that dense 50-page paper could become an engaging animated video. A complex topic could become an interactive conversation with an AI tutor who never got tired of our questions. A single idea could branch into a universe of personalized learning materials.

EchoVerse became more than a tool; it became our answer to the digital learning paradox. It’s built with the purpose of turning the firehose of information into a wellspring of knowledge, empowering anyone, anywhere, to not just find answers, but to truly understand. It’s the learning companion we always wished we had, built for a world that never stops asking "why?".

What it does

EchoVerse is a comprehensive, AI-powered learning hub that offers a suite of interconnected tools to master any subject:

  • Personalized Learning Journeys: Engage with an AI tutor that adapts its teaching style (Formal, Playful, Serious, etc.) to your preference, breaking down complex topics into interactive modules.
  • Deep Research Agent: Go beyond a simple search. Ask any question and receive a comprehensive, well-structured research report, complete with citations, summaries, and key findings, powered by Firecrawl and Gemini.
  • Roadmap & Learning Path Generator: Instantly generate visual, step-by-step learning roadmaps for any topic using Mermaid.js and AI, providing a clear path from beginner to expert.
  • Quick Summaries & PDF Analysis: Upload documents or paste text to get concise, AI-generated summaries. The platform can also convert these summaries into audible lessons using ElevenLabs.
  • AI Animation Studio: Transform educational content into engaging video lessons and presentations using an AI-powered animation engine (Manim) run via a custom GitHub Actions workflow.
  • Convo AI: Have live, interactive video conversations with a knowledgeable AI persona (powered by Tavus) to discuss and deepen your understanding of any content you provide.
  • Admin Dashboard: A full-featured backend for platform management, allowing administrators to monitor user activity, manage users and their roles, and configure system-wide settings and feature flags.

How we built it

EchoVerse is a full-stack application built with a modern, scalable, and AI-first architecture:

  • Frontend: The user interface is built with React and TypeScript, using Vite for a fast development experience. The component library is powered by shadcn/ui and Tailwind CSS, with beautiful animations and transitions from Framer Motion. Custom components like BentoBox and GlassIcons create a unique, polished aesthetic.

  • Backend & Database: Supabase is the backbone of the application.

    • PostgreSQL Database: Stores all user profiles, learning sessions, roadmaps, research history, and admin settings. The schema is robustly managed through a series of migrations.
    • Supabase Auth: Handles all user authentication. The migration history shows a deliberate and successful pivot from Clerk to Supabase's native auth for tighter integration.
    • Supabase Edge Functions: Serve as a secure backend layer to interact with third-party APIs (Gemini, Firecrawl, ElevenLabs, Tavus), protecting sensitive API keys.
    • Supabase Storage: Securely stores user-uploaded PDFs and AI-generated audio files, with RLS policies to ensure privacy.

  • AI & Third-Party Services:

    • Google Gemini: The core LLM for generating text, summaries, learning paths, and research analysis.
    • Firecrawl: Used by the Deep Research agent for efficient and reliable web scraping.
    • ElevenLabs: Powers the text-to-speech feature, converting summaries and reports into high-quality audio.
    • Tavus: Enables the unique "Convo AI" feature for live video conversations with AI personas.
    • Manim (via GitHub Actions): An innovative serverless approach to handle heavy-duty video rendering for the Animation Studio, triggered by the frontend.
    • Appwrite: Manages metadata and storage specifically for the video animation pipeline.

Challenges we ran into

  • Orchestrating Multiple AI Services: Integrating a diverse set of AI APIs (Gemini, ElevenLabs, Tavus, Firecrawl) required building a resilient system that could handle different response times, error formats, and asynchronous workflows, all while providing a smooth user experience.
  • Authentication & RLS Pivot: The project initially used Clerk for authentication. The migration history clearly shows a strategic decision to move to Supabase Auth. This involved rewriting all Row Level Security (RLS) policies to use auth.uid() and auth.jwt()->>'sub' correctly, which was a significant but necessary undertaking to unify the backend.
  • Reliable Mermaid Diagram Generation: LLMs can be inconsistent with structured data formats. We had to implement robust prompt engineering and a cleanMermaidCode utility function to ensure the generated Mermaid syntax was consistently valid and renderable, preventing common parsing errors.
  • State Management for Interactive Learning: The Personalized Learning feature is highly stateful. Managing the user's progress, personality choice, chat history, and module content required a carefully designed React Context (PersonalizedLearningContext) to keep the UI in sync without excessive re-renders.
  • Bolt.new: The bolt.new is best and there in no cometation but it struggles for long context window like other tool, so we have to every time add and delete the .ignore file its little bit feel frustating.

Accomplishments that we're proud of

  • A Truly Holistic Learning Ecosystem: We didn't just build a single tool; we created an interconnected suite of features that work together to provide a comprehensive learning experience, from initial research to content creation.
  • A Polished and "Not Cookie-Cutter" UI: We took the design prompt seriously, creating a beautiful, modern, and animated interface with custom components that go beyond a standard template. The animated loading screen, custom cursor, and bento-grid layouts are testaments to this.
  • Innovative Use of GitHub Actions: Using GitHub Actions as a serverless compute engine for the Manim-based Animation Studio was a clever solution to handle long-running, resource-intensive tasks without managing dedicated servers.
  • Secure and Scalable Architecture: By using Supabase Edge Functions as an API gateway, we've ensured that all our third-party API keys are kept secure on the backend, creating a robust and scalable system.

What we learned

  • The Power of Supabase: This project was a deep dive into the Supabase ecosystem. We learned to master not just the database and auth, but also RLS policies, Edge Functions, and Storage, creating a fully integrated backend.
  • Advanced Prompt Engineering: Getting structured, reliable output (like valid JSON or Mermaid code) from an LLM is a skill in itself. We learned the importance of providing clear, strict instructions, examples, and even client-side validation to handle inconsistencies.
  • Architectural Flexibility: The migration from Clerk to Supabase Auth taught us the importance of being able to pivot and refactor core parts of the application to achieve better integration and long-term maintainability.
  • Managing Asynchronous AI Tasks: Building a responsive UI on top of multiple long-running AI tasks (research, video rendering) required careful state management, real-time updates (where possible), and clear communication with the user about what's happening in the background.

What's next for EchoVerse

  • Mentor Matching System: The database schema already includes early work on a mentor-student matching system. We plan to build this out with AI-powered matching algorithms to connect learners with experienced mentors.
  • Community & Collaboration: Introduce features for users to share their learning paths, collaborate on research projects, and form study groups.
  • Enhanced Analytics: Provide users with a detailed dashboard of their learning habits, progress, and knowledge gaps, with AI-driven suggestions for improvement.
  • Mobile Application: Develop native mobile apps for iOS and Android to make learning on the go even more seamless.

Built With

  • appwrite
  • auth
  • bolt.new
  • edge-functions
  • elevenlabs-api
  • firecrawl-api
  • framer-motion
  • github-actions
  • google-gemini-api
  • manim
  • mermaid.js
  • react
  • shadcn/ui
  • storage)
  • supabase-(postgresql
  • tailwind-css
  • tavus-api
  • typescript
  • vite
Share this project:

Updates