Code Trace

Inspiration

The inspiration for Code Trace came from the steep learning curve associated with Data Structures and Algorithms (DSA). While platforms like LeetCode provide solutions, static code often fails to convey the "why" behind an algorithm. We wanted to build a tool that makes these concepts intuitive by transforming them into high-quality animations.

What it does

Code Trace is an AI-powered platform that automatically generates efficient Python solutions for coding problems and renders them into step-by-step visualizations. Users provide a problem title and description, and the system uses GPT-4o to architect the solution and generate a Manim script, which is then rendered into a professional-grade video animation.

How we built it

We built Code Trace using a modern, distributed architecture:

Frontend & API: Developed with Next.js 16, TypeScript, and Tailwind CSS for a responsive user experience.

AI Logic: Leveraged OpenAI's GPT-4o to handle both the algorithmic problem solving and the synthesis of Manim animation scripts.

Backend Pipeline: Implemented a Node.js worker that polls a Supabase-managed queue to handle the heavy lifting of video rendering.

Graphics & Video: Used the Manim Community Edition library along with FFmpeg to encode the final high-definition animations.

Infrastructure: Used Supabase for PostgreSQL metadata and cloud storage, while Railway provided the high-resource environment needed for video rendering.

Challenges we ran into

Building a bridge between a web API and a heavy-duty rendering engine presented several hurdles:

Infrastructure Synchronization: Ensuring the Node.js worker correctly polled the Supabase database instead of localized Redis queues during cloud deployment.

Schema Evolution: Managing complex PostgreSQL data types, such as handling floating-point video durations within integer-constrained schemas.

Resource Management: Balancing the high CPU and memory requirements of Manim rendering within cloud containers.

Reliable Code Generation: Producing bug-free Manim code using niche or less popular community plugins. To address this, we developed a specialized AI agent capable of self-debugging code, verifying syntax, and scanning for visual anomalies during the rendering process.

Accomplishments that we're proud of

End-to-End Automation: Successfully creating a "zero-touch" pipeline where a user input results in a fully rendered video in minutes.

Pedagogical Accuracy: Generating GPT-4o prompts that produce not just code, but clear, step-by-step explanations of complex algorithmic logic.

Scalable Queueing: Designing a robust database-backed queue that allows multiple workers to pick up and process rendering jobs asynchronously.

What we learned

We gained significant experience in managing dual-runtime environments (Node.js and Python) within a single Dockerized container. We also learned the importance of robust schema validation and the nuances of deploying resource-intensive background processes on platforms like Railway.