EchoLearn

EchoLearn turns studying into teaching. You explain concepts to an AI that asks smart questions, helping you master topics faster with a cozy, beginner-friendly, pixel-themed learning experience.

Comment 3

Inspiration

EchoLearn was inspired by the idea that the best way to learn is to teach. While studying technical subjects, I noticed that explaining concepts out loud made them “click” far more effectively. My team and I wanted to turn that experience into a real toolsomething cozy, friendly, and interactive. That became EchoLearn: a pixel-themed platform where learners reinforce their knowledge by teaching an AI that acts like a curious student.

What it does

EchoLearn transforms studying into an active learning experience. Users read a short lesson, then “teach” the concept to the AI. The AI pushes back with clarifying questions, requests examples, and highlights gaps in understanding. This creates a feedback loop that strengthens comprehension and boosts confidence. The platform tracks lesson progress and presents content in a cozy, pink, Stardew-valley-inspired aesthetic.

How we built it

EchoLearn is built with Next.js, React server/client components, and custom layouts for each lesson. The AI panel supports different modes, including a teacher mode and a “baby” mode for simplified explanations. I designed pixel-art assets to match the theme and stored user progress with localStorage. The entire UI was built from scratch, focusing on clarity and warmth.

Challenges we ran into

The main challenges included managing dynamic Next.js routes, avoiding static export errors, building consistent AI behaviour across modes, and designing lessons that were beginner-friendly without sacrificing accuracy. Creating a cohesive visual style with pixel art was also surprisingly time-consuming.

Accomplishments that we're proud of

We are proud of creating a platform where learning feels comforting, approachable, and interactive not overwhelming. Building reusable layouts, polishing the UI, generating thematic pixel art, and creating structured DSA lessons all came together beautifully. The AI panel behaviour is also a major win.

What we learned

Working on EchoLearn taught me deeper Next.js patterns, UI design principles, pixel art integration, and prompt engineering. I also strengthened my own understanding of data structures, algorithms, and core CS through the process of writing lessons and simulating student-teacher interactions.

What's next for EchoLearn

Next steps include expanding into more topics (graphs, recursion, OOP), adding user accounts with proper backend storage, building quizzes and challenges, and introducing a “teach-me-back” feature where the AI summarizes what it learned from the user. I also want to create community-made lessons and a gamified progression system.

EchoLearn is just getting started.

Built With

  • custom-pixel-art-assets-development-&-build-tools:-node.js
  • esbuild/babel-(through-next.js)
  • jsx-frameworks-&-libraries:-next.js-15
  • languages:-javascript
  • localstorage-for-lightweight-client-side-state
  • npm
  • react
  • tailwindcss-ai-&-apis:-openai-api-(for-conversational-?teach-to-learn?-ai-modes)-frontend-tools:-css-modules
  • typescript
  • vs-code-deployment:-netlify-(static-export-+-serverless-handling)-design-tools:-aseprite-style-pixel-art-generation
Share this project:

Updates

posted an update —

This was my first hackathon, and I had no idea I could move this fast. I've built backends before, but never under this kind of pressure, never with a team depending on me, and never with a clock ticking down and real stakes. When I took on the backend for EchoLearn, I thought, "Okay, I know APIs; I've done this," but a hackathon is completely different. The hardest part wasn't the technical challenges; it was the speed. I had to set up Supabase, design the database schema, build three working API endpoints, integrate OpenAI, implement an XP system, handle user sessions, write documentation, AND make sure my teammate could actually use everything I built all in one night. What really tested me was when things broke at the worst possible times. The APIs returned 404s, then 500 errors, the OpenAI integration failed, and we were running out of time. In a normal project, I'd take a break, think it through, and maybe ask for help the next day, but there was no next day. I had to fix it now. I'm most proud of how I handled that pressure. What I learned goes beyond technical skills. Yes, I got better at API design, learned about clean architecture patterns, figured out how to integrate AI services, and understood database relationships on a deeper level. But more than that, I learned I can build under pressure. I learned I can make decisions fast and commit to them. I learned I can debug exhausted. I learned I can collaborate when things are breaking and time is running out. This hackathon showed me a speed I didn't know I had. Not just coding speed, decision-making speed, problem-solving speed, and learning speed. That version of me, who just handles it when things break, I met her for the first time this weekend. And honestly, I kind of love her.

Log in or sign up for Devpost to join the conversation.