Hey!! How are you?? I recently participated in the Google Deepmind X Kaggle hackathon, and thought why not share my experience in here, I really enjoyed building StructViz AI, and although we had to submit a write-up in just 250 words, I thought it was quite less to express my encounters with the bugs, features I had built, so hop on with me!!
The Discovery: A Late-Night Scroll That Changed Everything
It was a dull evening, when I stumbled across the Gemini 3 Pro Vibe Coding Hackathon announcement. As a final-year CSE student, I'd been preparing for technical interviews and struggling with the same problem countless times: understanding data structures from static textbook diagrams.
The hackathon promised something intriguing—Google AI Studio's vibe coding where you describe what you want and Gemini generates working code. The deadline was tight: December 5-12. Just one week.
The "Aha" Moment: Why DSA Visualization?
The Problem I Knew Too Well
Like 70% of CS students, I'd spent hours staring at diagrams of binary trees, trying to mentally simulate rotations in AVL trees, or visualizing how A* pathfinding actually works. Existing tools like VisuAlgo helped, but they lacked something crucial: interactive AI guidance.
The Gemini 3 Pro Opportunity
Reading about Gemini 3's capabilities, some features jumped out:
Multimodal Input: Upload a hand-drawn tree diagram? Voice commands?
Advanced Reasoning: Explain why an algorithm chose a specific path
Native AI Studio Integration: Build apps through natural language
The vision crystallized: What if you could draw a data structure on paper, upload it, and watch AI animate it step-by-step while explaining every decision?
Planning: From Wild Idea to Structured Plan
I created a priority matrix, brainstorming with Perplexity, Gemini, my brain (surprisingly):
Must-Have:
- Binary Tree, Stack, Queue, Linked List
- Basic animations with playback controls
- Gemini AI Tutor integration
Nice-to-Have:
- AVL Tree, Trie, Hash Table
- Sorting algorithm visualizations
- Advanced graph algorithms
Stretch Goals:
- Pathfinding (A*, Dijkstra)
- Dynamic Programming tables
- Geometric algorithms (Convex Hull)
The Build: Days of Code, Coffee, and Chaos
Day 1: First Steps with AI Studio
My first prompt was to make a skeleton structure, maintaining good folder structure, code quality, and type safety—basically, I talked to Gemini like a senior engineer briefing an intern. The kind of detail where you specify everything because you've been burned before by assumptions.
Watching Gemini generate a working component in seconds was surreal. But then came the first challenge: animations looked like PowerPoint transitions from 2003. Choppy, lifeless, and frankly embarrassing for something claiming to be "interactive."
Evening Progress:
- Binary Tree with basic insert/delete
- SVG-based rendering
- Animations were janky (fixed by switching to Framer Motion)
I established a pattern: prompt → test → refactor → repeat. I made in detailed prompts, with each and every detail as a Senior Engineer would say to an Intern, specifying each details, checking and reading it and then feeding it to AI Studio.
Wins:
- Stack visualizer (with "browser history" demo)
- Queue visualizer (with visual conveyor belt)
- Linked List with pointer animations
The Crisis: The GSAP Timeline Bug
Around 11 PM, the Linked List "Play" button decided to stop working. Not crash—just... nothing. Click. Silence. The timeline existed but refused to play. Four hours of debugging later, I discovered the timeline wasn't being initialized properly on component mount. The fix was embarrassingly simple once I found it. This taught me a valuable lesson: when AI-generated code breaks, the bug is usually in the handoff between what AI generated and what I modified.
Day 2: Expansion and the React Router Disaster
Ambition kicked in. I added AVL Tree, Segment Tree, and Trie visualizers.
Then I made a critical mistake: adding routing.
The Error:
Minified React error #31
Objects are not valid as a React child
This cryptic message greeted me for four straight hours. The screen went blank. Not a single component rendered. The browser console mocked me with stack traces pointing to... minified React internals. Helpful.
Hours Lost: 4
The Pivot: I ripped out React Router entirely. Every route, every Link component, every fancy navigation transition—gone. Replaced it with a simple useState managing which visualizer to show. The app worked again in 15 minutes.
Lesson: Don't over-engineer under time pressure. That fancy routing system? Not worth it when the deadline is in 5 days and you have 10 more visualizers to build. Sometimes the scrappy solution is the right solution.
Day 6: The Advanced Features Push
Err, don't ask me where did Day 3, 4, 5 go(I had other work, no, I was not procrastinating !!)
Building A* and Dijkstra side-by-side was the most fun I had all week. Watching them race across the grid—Dijkstra expanding uniformly like a shockwave, A* beelining toward the target with laser focus—was genuinely exciting. I added maze generation algorithms (recursive division, Prim's), wall drawing with click-and-drag, and draggable start/end nodes.
The table-filling animation was the most satisfying to watch. Each cell lighting up as it's computed, dependency arrows showing which previous cells contributed, the final path traced back in gold. I built Longest Common Subsequence, 0/1 Knapsack, and Edit Distance. Watching the Knapsack table fill row-by-row made me finally understand why we needed 2D DP tables. Textbooks never clicked like this.
Geometric algorithms were visually stunning but computationally tricky. Graham Scan wrapping around scattered points like a rubber band, Jarvis March "gift wrapping" with deliberate precision. The challenge? Calculating polar angles without floating-point errors ruining the visualization. Math is hard when you're also debugging animations at 9 PM.
The Crisis: Responsive Design
Everything overflowed on mobile. The pathfinding grid was a 50x25 cell monstrosity that laughed at viewport constraints. Convex Hull points were untappable pinpricks. I spent two hours adding responsive breakpoints, recalculating cell sizes dynamically, and making touch targets 44x44px minimum. The grid now adapts: 15x20 on mobile, 25x50 on desktop. Finally usable on all devices
Day 7: The Final Sprint
Deadline: 11:59 PM UTC (5:29 AM IST Dec 13)
Morning: ug fixes across all 14 visualizers. The hash table collision demo wasn't visual enough—added step-by-step narration. The sorting algorithm race mode wasn't... racing—fixed GSAP timing. The matrix rotation looked janky—switched to layout animations.
Afternoon: AI Tutor integration everywhere. Every visualizer needed the ChatPanel with context-specific prompts. "Why did this AVL tree rotate left?" "Show me the shortest path." "Explain this DP recurrence relation." Testing Gemini's function calling—when the AI says "let me highlight the root node," it actually does.
Evening: Writing the 250-word submission. Every. Word. Counted. Cutting features I loved because they didn't fit. Rewriting five times to hit that balance of technical depth and accessibility.
Night: Recording the demo video. Take 1: forgot to press "Record". Take 2: accidentally closed the tab. Take 3: nailed it, but realized I should show the AI features more. Take 4: perfect. Exported, uploaded, submitted at 4:47 AM IST. I had 42 minutes to spare. Collapsed into bed immediately.
Challenges: What Almost Broke Me
1. The Three.js Nightmare
The Problem: LinearEncoding is not exported
The ambitious plan including 3D tree visualizations using React Three Fiber. Rotate the tree in 3D space, zoom in on nodes, fly-through animations. It was going to be gorgeous.
Then: version conflicts. Three.js r152 changed the color management API. React Three Fiber expected the old API. AI Studio's CDN served incompatible versions. Four hours of debugging importmaps, version pins, and Stack Overflow threads led to one conclusion: not worth it.
The Pivot: Dropped 3D visualizations entirely, focused on polished 2D with excellent animations. Turns out, smooth 2D with Framer Motion's layout animations looks just as good—and actually works across all devices without WebGL compatibility issues.
2. Performance on Mobile
14 visualizers meant 14 responsive designs. The pathfinding grid with 1,250 cells? Laggy on phones. The convex hull with 100 draggable points? Unresponsive touch events. The sorting visualizer with 100 bars? Slideshow framerates.
Solution: Dynamic complexity scaling. Mobile gets smaller grids (15x20 vs 25x50), fewer points (max 30 vs unlimited), simplified animations (reduce spring physics calculations). Use requestAnimationFrame properly. Debounce touch events. Virtual scrolling for large data sets. It's not glamorous, but it works smoothly.
3. Scope Creep
Every day I wanted to add "just one more feature", "What if users could race four sorting algorithms simultaneously?", "The trie needs voice-activated word insertion.", "Segment trees should support lazy propagation visualization."
The Reality Check: I had 7 days. Not 7 weeks. Some features got cut: Turing Machine visualizer, N-Queens solver, fractal generators, multiplayer mode where two users race to solve problems. They're now in the "v2.0" backlog, which is developer-speak for "maybe someday."
Results: What I Built in 60 Hours
By the Numbers
14 Complete Visualizers: Binary Tree, AVL Tree, Trie, Hash Table, Stack, Queue, Min/Max Heap, Linked List, Graph Algorithms, Sorting Algorithms, Pathfinding, Dynamic Programming, Segment Tree, Convex Hull
Lines of Code: 100K (I guess?! Check out the repo and guess in the comments!!)
Feature Highlights
Animations:
- Spring physics for natural motion
- Timeline controls (play/pause/step)
- Speed adjustment (0.5x to 5x)
Responsive:
- Works on phones, tablets, desktops
- Touch-optimized controls
- Adaptive layouts
Impact: Why This Matters
Personal Growth
Building StructViz AI taught me:
- AI as a Development Partner: Vibe coding accelerated development 10x
- Simplicity Wins: Dropped complex features when they became blockers
- Architecture Matters: Feature-Sliced Design saved me during rapid expansion
- Deadlines Drive Innovation: 7 days forced creative problem-solving
For the CS Community
If this helps even one student finally "get" how AVL rotations work or why A* is faster than Dijkstra, the sleepless nights were worth it.
Lessons for Future Hackathon Participants
Do's
- Start Simple: MVP first, features later
- Test Early: Mobile testing on Day 1, not Day 7
- Embrace AI: Let Gemini handle boilerplate, you focus on logic
- Document as You Build: Screenshots, notes, commit messages
- Know When to Pivot: Routing broke? Use state. Three.js conflicts? Go 2D.
Don'ts
- Don't Over-Engineer: Feature-Sliced > Complex routing
- Don't Fight the Framework: Work with AI Studio's strengths
- Don't Skip Breaks: Burnout kills productivity
- Don't Wait to Submit: Submit early, iterate if time permits
What's Next: Version 2.0
The hackathon might be over, but StructViz AI is just beginning:
Planned Features:
- Turing Machine visualizer
- Real user testing with CS students
- Mobile app version
- Live Hosting
Want to contribute? https://github.com/RitamPal26/StructViz
Demo/Follow me for more
Kaggle Submission: https://www.kaggle.com/competitions/gemini-3/writeups/structviz-ai
Follow My Journey: https://x.com/JuniorDev26
Top comments (0)