ELeetCode

Inspiration

Anyone who has spent time preparing for technical interviews knows the struggle. You sit there trying to mentally track two pointers moving across an array or values entering a hash map to achieve an optimal $O(n)$ time complexity. Reading static Python code makes it difficult to build an accurate mental model of how the data structures evolve. We wanted to build a tool that actually plays the code back for you so you can see the logic in motion.

What it does

ELeetCode is a visualizer that brings Python code execution to life. When you paste in a solution like Two Sum and hit run, it captures the raw execution trace of your variables. It then uses Google's Gemini API to translate that raw data into a step-by-step animation sequence. You can scrub through your code line by line while the UI animates the data structure changes. This makes the jump from an $O(n^2)$ brute force approach to an $O(n)$ optimized solution visually intuitive.

How we built it

ELeetCode is a visualizer that brings Python code execution to life. When you paste in a solution like Two Sum and hit run, it captures the raw execution trace of your variables. It then uses Google's Gemini API to translate that raw data into a step-by-step animation sequence. You can scrub through your code line by line while the UI animates the data structure changes. This makes the jump from an $O(n^2)$ brute force approach to an $O(n)$ optimized solution visually intuitive.

Challenges we ran into

Local network routing and port collisions caused major headaches. We repeatedly encountered background Node processes holding onto our default Vite port (5173). Vite would silently jump to port 5174, triggering massive CORS rejections from our FastAPI backend. We spent hours configuring strict port binding and wildcard CORS settings to get the frontend and backend communicating reliably. Another major hurdle was getting the AI to cooperate. We needed the backend to return a strictly formatted JSON array so the UI animations would render correctly. This required extensive prompt tuning to prevent the LLM from outputting conversational text instead of the raw data array.

Accomplishments that we're proud of

Getting the first successful Python execution trace to animate flawlessly on the screen was a great moment. Wiring up a language model to act as a reliable translation layer between a backend trace and a frontend React animation state is a major technical win. We are also highly satisfied with the clean interface, resulting in a professional study tool.

What we learned

We gained deep practical experience with the React 19 ecosystem and managing complex animations using Framer Motion. On the backend side, we learned how to handle environment variable management with python-dotenv and the exact mechanics of Cross-Origin Resource Sharing (CORS) rules when connecting decoupled local servers.

What's next for ELeetCode

Eventually, we plan to move the application off of localhost and deploy it to the cloud using sandboxed Docker containers so anyone can safely run their Python code on the web.

Built With

• axios
• fastapi
• framer-motion
• gemini
• google-cloud
• html
• javascript
• json
• monaco-editor
• python
• react
• tailwind-css
• uvicorn
• vite
• xterm.js