Videre | Devpost

Home Page
Topic Teaching Example Video
Code Explanation Example Video
Generating Video
Video History

The Inspiration

Math is tough, CS is (arguably) tougher; we don’t know about you, but when we first learned about arrays or trees, we were completely lost. The concept of indices, saying some value is stored in the i-th index, or pivoting around the j-th before being sorted, sounds completely arbitrary. You get the point – it doesn’t make sense at first, yet when you actually sit down, touch pen to paper, and create a visualization of the problem procedure, things suddenly make sense. That’s at least what we experienced, so we wondered, what if we could commoditize this process? As students have gravitated towards ChatGPT for explanations over traditional textbooks, how do we regain this element of visual learning? That’s the problem we aim to solve.

What We Do

What if I had any STEM-related topic and could have an in-depth video generated on it within seconds? What if I had a personal 3Blue1Brown tutor at my fingertips? Well that is no longer your imagination, it is reality with Videre. With animations from the Python library, Manim, created by a Youtuber 3Blue1Brown, and speech from the service, ElevenLabs, a sponsor of HackPrinceton, synced voiceovers for videos are created and displayed with a simple user prompt. Visit the website, input what you want to learn about, and Videre is able to explain math, walk through algorithms, and even debug code. Visual learning is made simple.

How It Works

Videre is built on eight core technologies: React for frontend, FastAPI for backend, Claude for video generation (transcript and Manim code), ElevenLabs for voice-over, Context7 for agent contextualization, Manim for animation generation, MongoDB for video history, and AWS S3 Buckets for video storage. The process is as such: the user enters the website (React + Tailwind), inputs their prompt, which is then fed into FastAPI and handles the backend. Most importantly, FastAPI then feeds this input into Claude Sonnet 4.5, which uses a custom prompt to generate a video transcript and uses Context7 to write Manim code for building the animations. Claude then also calls upon ElevenLabs to generate the voice overlay of the transcript for the video. Lastly, the both the video and voice are merged together, fed through AWS and then retrieved on the frontend to display to the user. Say you want to view your video history, you can do so through MongoDB.

The Challenges

Synchronizing video with text-to-speech was the predominant hurdle. It required concise research of available libraries (integrating Manim and ElevenLabs), LLM training for such library contextualization (Context7), and developing a workflow to streamline the process from user input to transcript to animation to displaying the video on the frontend. The second task of difficulty was the prompt engineering. We are a team of rookies– none of us have touched prompt engineering, let alone calling LLMs through APIs. With hours of tweaking and tuning our prompt, we found a strong balance of video quality and explanation. That, however, only proved valuable towards the latter hours of the hackathon.

Accomplishments

There are three main components we are proud of: what we learned, what we endured, and what we built. This experience taught us invaluable lessons with regards to software engineering, its associated tools, and practices, as well as general teamwork and collaboration. Moreover, the hackathon was simply challenging: it wasn’t easy coding all night. It wasn’t easy spending hours debugging a feature, only to realize a teammate had solved it hours before. And guess what, we persevered, we endured, and we got it done. That’s something to be proud of, regardless how bug-free the Videre is. Lastly, and most importantly, is what we built. It’s the prime directive of the hackathon, to show what you’ve truly got. We combined our expertise, our thinking, and our ambition to give it our all and develop what we believe to be the most impactful product. We really enjoyed developing it, and hope you enjoy it as much as we do.

What We Learned

We could list such observations indefinitely, yet a few stand out. From a non-technical perspective, it’d have to be the strong element of teamwork, communication, responsibility, self-inititative to learn, and above all, grit. Some hours went by with minimal, or sometimes backwards progress. Yet, in the moments that we achieved a breakthrough, it served as motivation to continue integrating every feature. In such a competitive environment, it forced us to prioritize communication and task delegation to suit our needs: one of us focused on frontend, another on backend, another on prompt engineering, etc. In terms of technical knowledge, this challenge introduced some of us to fullstack engineering, databases, prompt engineering, and third-party features. With an emphasis on the latter, this experience demonstrated how developed the software engineering tools are: whether it be Justfile for command running, or uv for dependency management, it served as an introduction to the various features that make the profession an iterative process.

What's Next

You’re not the only one that needs to be learning. Videre needs to learn too. With an increased context window for learning, either from training on other teaching videos, examples for various concepts, or open educational datasets, Videre will be an actively and constantly improving product, reaching mastery along with users. Along the lines of continuity, Videre has potential to go beyond singular independent prompts. Visualize Videre producing series of videos that teaches entire courses, such as starting from trivial array traversals to hard Leetcode problems. Teaching continuity would guide students from genuine ground to monumental mastery. Additionally, allowing the user to choose between a variety of video lengths (TikTok ~30 seconds vs. Youtube ~10min) would give users more autonomy over their own learning process. With that, Videre would be even more helpful by giving users the ability to chat back and forth with it, allowing Videre to understand users better, and allowing users to customize their learning experience further.