Inspiration

We noticed that learning to code can be overwhelming for beginners, especially when faced with static tutorials or unclear feedback. We wanted to create a platform where anyone—regardless of experience—could learn by doing, receive real-time help, and progress at their own pace using the power of AI.


What it does

Code-Guru transforms natural language prompts into interactive coding exercises. It guides users step-by-step using ghost text (AI-generated inline guidance), supports multiple programming languages, and allows users to run code directly in the browser or simulate output via OpenAI for non-browser-based languages. It also includes hints, progress tracking, and a simple UI to make learning intuitive and fun.


How we built it

We used:

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Execution Environment: In-browser for HTML, CSS, JS; OpenAI API for Python and others
  • AI Integration: GPT-4 via OpenAI API for code generation, execution simulation, hints
  • Storage: LocalStorage to preserve API keys We built the ghost text engine using a token-based approach and created a modular prompt system to interact with the OpenAI API effectively.

Challenges we ran into

  • Creating a smooth ghost text experience that doesn’t feel intrusive
  • Handling unpredictable API response formats
  • Ensuring sandboxed and safe code execution within the browser
  • Detecting and switching between multiple programming languages correctly

Accomplishments that we're proud of

  • A fully functional demo that can turn a natural language idea into a guided coding experience
  • Successfully implementing ghost text guidance and progress tracking
  • Robust prompt engineering for consistent and structured AI-generated code
  • An elegant and responsive UI with no external frameworks

What we learned

  • The importance of balancing user autonomy with guided learning
  • How to design prompts that produce reliable and context-aware code
  • Deepened our understanding of browser sandboxing and secure execution practices
  • Realized the value of iterative UI/UX improvements based on user flow testing

What's next for Code-Guru

  • Add user authentication and save progress to the cloud
  • Expand language support (e.g., Java, C++, SQL)
  • Introduce predefined learning paths, quizzes, and certification
  • Enable real-time collaborative coding
  • Integrate with GitHub for version control and automatic testing
  • Launch as a browser extension or standalone progressive web app (PWA)

Built With

Share this project:

Updates