The Sunday Afternoon Epiphany
We’ve all been there. You’re sitting in your room, staring at a LeetCode problem you know you’ve solved before. You remember seeing the "Success" banner two weeks ago. But today? The logic is gone. You’re making the same off-by-one error, the same null-pointer mistake, and feeling that same rising tide of frustration.
As a researcher for Team HACKONAUT, I spent a lot of time talking to fellow engineering students here in Bengaluru. The feedback was universal: Coding platforms are brilliant at testing us, but they are terrible at teaching us.
They suffer from what I call "Context Amnesia." You are a different person every time you log in, but the platform treats you like a stranger. This is the gap we set out to bridge. We didn't just want to build another compiler; we wanted to build a mentor that actually grows with you.
The Research: Why Beginners Hit the "Plateau"
Before a single line of code was written, I dove into the "why." Why do smart students give up on coding? My research pointed to three main friction points:
- Repetitive Failure: Failing at the same concept (like recursion) without the system recognizing the pattern leads to burnout.
- Information Overload: Being served "Random Hard Problems" when you haven't mastered "Medium Basics."
- The "Cold Start" Problem: Every session feels like starting a marathon from mile zero.
We realized that if we could solve the Memory Problem, we could solve the Learning Problem. We chose to integrate Hindsight—an open-source agent memory system by Vectorize—to act as the long-term hippocampus of our application.
Designing for "Invisible" Intelligence
As the UI designer, my biggest challenge was: How do you show a user that the AI is remembering them without it feeling creepy?
I didn't want a dashboard full of scary statistics. I wanted a "Neural Insights" panel that felt like a reflection of the user’s growth. We used a clean, dark-themed aesthetic with Tailwind CSS to keep the focus on the code, while using subtle glows and transitions to indicate when the AI was "recalling" or "reflecting" on past sessions.
The Practice Page: A Balance of Power
The practice page was our "North Star." I designed it to be a distraction-free environment, but with a hidden layer of intelligence. When you submit code, it isn't just "Right" or "Wrong."
I worked closely with the team to ensure that the Groq Llama-3 feedback was displayed semantically. Instead of a wall of red text, I designed a side-by-side comparison UI. It highlights exactly where your logic diverged from the optimal solution, effectively turning a "failure" into a visual lesson.
How "Memory" Powers the User Experience
While the technical implementation involves complex SDK calls, from a design and flow perspective, we structured the "Memory" into four pillars:
1. The Retention Phase
Every time a user struggles—maybe they took 20 minutes on a 5-minute task or asked for three hints—the system calls hindsight.retain(). As a designer, I had to ensure this happened silently in the background. The user shouldn't feel "watched"; they should feel "supported."
2. Personalized Recall
When you log back in after a two-day break, the dashboard doesn't show a "Problem of the Day." It shows "Your Next Challenge." The UI fetches your weaknessSummary. If my research showed that you struggled with Map() functions on Tuesday, your Wednesday session starts with a tailored exercise to reinforce that exact gap.
3. Reflection & Patterns
After every five sessions, the system triggers a "Reflection." This is my favorite part of the UI. We synthesized raw data into human-readable insights: "You’re a pro at Python syntax, but let’s work on your Space Complexity." It’s the difference between a mirror and a coach.
The Stack That Made it Possible
Building this within the high-pressure environment of a hackathon required a lean, powerful stack:
- Frontend & Styling: Next.js 15 and Tailwind CSS. I focused on making the site responsive and accessible for students on the go.
- Memory: Hindsight by Vectorize—the "secret sauce" that turned a standard app into an agentic one.
- Brainpower: Groq API with Llama-3.3-70b. The speed of Groq allowed our UI to feel instantaneous.
- Execution: Piston API for running the code in real-time.
The "Aha!" Moment
During our internal testing, I noticed something incredible. The Hindsight memory graph wasn't just a list of strings. It was building a knowledge graph of our users.
I saw nodes connecting "User" to "Recursion Errors" and then branching into "Fibonacci Logic." As a designer, seeing that data structure made me realize that personalized UI isn't about changing colors; it's about changing content based on a user’s mental model. We weren't just building a tool; we were building a relationship.
Lessons Learned
If I could go back to day one of the design phase, I would tell myself to focus even more on "Root Cause" visualization.
In our early versions, we just told users they were wrong. Through research and iterative design, we learned that the most valuable thing an AI can do is say: "You made this mistake because you're thinking about arrays as fixed-size, but in this case, they are dynamic." The quality of the memory determines the quality of the mentor.
Conclusion: The Future of Learning
CodeMentor AI is more than just a project for Team HACKONAUT; it’s a proof of concept for the future of education. We are moving away from "one size fits all" platforms and toward "one size fits you."
I’m incredibly proud of the work we did—from the deep research into student pain points to the final, polished UI.
Want to see it in action?
- Live Demo: ai-coding-mentor-eight.vercel.app
- GitHub: github.com/ashiyafarhin-blip/Codementor-AI
If you're a designer or researcher looking to get into AI, my advice is simple: Don't just focus on what the AI can do. Focus on what the AI should remember. That is where the magic happens.
*BY Aashiya Farhin , UI /UX DESIGNER ,RESEARCHER
*Designing the future of tech, one memory at a time.
**
Top comments (0)