• 

  Home Page

• 

  Quick Python Code

• 

  Terminal with Code Editor

• 

  Asking PyGuru to get Hint

• 

  Submitting a Result

Inspiration

Learning to code often fails at the setup line. Absolute beginners get stuck navigating environment setups, waiting on slow server queues, or trying to decipher scary terminal stack traces. We built PyLoop to fix this broken developer experience. Inspired by the addictive micro-learning mechanics of Duolingo and the instant feedback of competitive programming, PyLoop turns learning Python into a zero-friction, gamified adventure.

What it does

PyLoop is an interactive, browser-native platform designed to teach Python from basic syntax to algorithms: Duolingo-Style Skill Map: 8+ progressive units covering Variables, Loops, Functions, Dictionaries, List Comprehensions, and Algorithms. Instant WASM Execution: Evaluates code directly in the browser with zero server delay. Socratic AI Mentor: Powered by Google's Gemini API, the AI analyzes failed test cases and provides helpful guidance without spoiling the solution. Beginner-Friendly Debugging: Parses Python tracebacks to draw visual error markers directly inside the code editor. Gamification Engine: Features XP points, a strict 24-hour daily streak counter, global leaderboards, daily challenges, and celebratory confetti animations.

How we built it

Frontend: Next.js (React), Tailwind CSS, Monaco Editor, and canvas-confetti. Client-Side WASM Engine: Integrated Pyodide (Python compiled to WebAssembly) running inside a background WebWorker thread (pyodideWorker.ts) to execute code safely without blocking the UI. Backend & Database: Node.js (Express), PostgreSQL (via Drizzle ORM), Cloud SQL, and Firebase Authentication for state management and user synchronization. AI Integration: An Express proxy route using Google AI Studio's Gemini API, instructing the model to return structured JSON hints (hint_type, message, line_hint).

Challenges we ran into

Main-Thread Freezing: Initial builds ran Pyodide on the browser's main thread, causing Monaco Editor to freeze during infinite loops. We solved this by offloading the entire WASM runtime to an asynchronous WebWorker, communicating via postMessage. Scary Error Logs: Raw Python stack traces confuse beginners. We wrote a custom parser (tracebackParser.ts) to extract exact line numbers and error types, converting them into Monaco editor markers. Daily Streak Logic: To stop users from artificially inflating streaks by solving multiple problems in one sitting, we implemented a 24-hour temporal boundary check.

Accomplishments that we're proud of

$0 Server Execution Cost: Pushing 100% of code execution to client-side WebAssembly means the platform can scale to millions of users without server compute costs. Seamless AI Mentorship: Transforming raw LLM feedback into structured, Socratic hints that guide users without writing the code for them.

What we learned

WebAssembly on the edge can fully replace heavy containerized backend sandboxes for entry-level code execution. Forcing LLMs to respond in strict JSON schemas is key to integrating generative AI directly into dynamic UI components.

What's next for PyLoop

Advanced curriculum modules covering Object-Oriented Programming (OOP) and Data Structures. Real-time 1v1 multiplayer coding duels using WebSockets. A native mobile app experience using React Native and embedded WASM runtimes.

Built With

• cloud-sql
• css3
• drizzle-orm
• express.js
• firebase
• git
• github
• google-ai-studio
• google-cloud
• google-gemini-api
• html5
• javascript
• monaco-editor
• next.js
• node.js
• postgresql
• pyodide
• python
• react
• rest-api
• tailwindcss
• typescript
• web-workers
• webassembly