Coding & Development✨gemini🌐universal

Database

A dynamic, AI-powered coding challenge platform that generates unique problems in real-time, providing an engaging and adaptive learning experience for developers.

Quick Start

Install this Skill

npx skills add Programmer-Develops/Code-Runner
# Code Runner

A dynamic, AI-powered coding challenge platform that generates unique problems in real-time, providing an engaging and adaptive learning experience for developers.

## Problem Description

Traditional coding platforms often rely on static question banks, which students eventually memorize or find repetitive. Furthermore, beginners often struggle with "tutorial hell," where they follow instructions but fail to apply logic independently. There is a lack of platforms that provide an infinite stream of unique, difficulty-adjusted challenges that adapt to a user's skill level while maintaining a competitive, engaging environment.

## Objectives

- **Making Learning Interactive**: Build a real-time global leaderboard that motivates students to practice consistently.
- **Seamless Code Execution**: Provide a browser-based code execution environment (IDE) that removes the friction of local setup for learners.

## Proposed Solution

A Full-Stack web application that integrates AI for intelligent problem generation. The interface consists of a Home page and a dual-pane dashboard featuring a markdown-rendered problem statement on the left and a full-featured code editor on the right. When a user selects a difficulty, the system prompts AI to generate a problem, test cases, and a starter function. User code is sent to a secure backend sandbox where it is tested against AI-generated cases. Successful submissions update the user's MongoDB profile with XP points (5-20 for Easy, 21-60 for Hard, 61-110 for Extreme), which are reflected on a site-wide Leaderboard.

## Tech Stack

- **Frontend**: Next.js 16, React 19, Tailwind CSS
- **Backend**: Next.js API Routes
- **Database**: MongoDB with Mongoose
- **Authentication**: NextAuth.js with Google OAuth
- **AI**: Google Gemini AI for problem generation
- **Code Editor**: Monaco Editor (VS Code's editor)
- **Code Execution**: Server-side sandbox for Python and JavaScript
- **Styling**: Tailwind CSS with custom gradients

## Project Structure

`
coderunner/
 src/
    app/
       api/
          auth/[...nextauth]/
             route.js          # NextAuth configuration
          execute/
             route.js          # Code execution endpoint
          leaderboard/
             route.js          # Leaderboard data endpoint
          questions/
             route.js          # AI question generation
          submit/
              route.js          # Submission handling
       question/
          page.js               # Challenge interface
       globals.css               # Global styles
       layout.js                 # Root layout with providers
       page.js                   # Home page
    components/
       CodeEditor.js             # Monaco editor component
       Leaderboard.js            # Leaderboard display
       SessionProvider.js        # NextAuth session provider
    lib/
       mongodb.js                # Database connection
    models/
        Question.js               # Question schema
        Submission.js             # Submission schema
        User.js                   # User schema
 package.json                      # Dependencies and scripts
 next.config.mjs                  # Next.js configuration
 tailwind.config.mjs              # Tailwind configuration
 postcss.config.mjs               # PostCSS configuration
 jsconfig.json                    # JavaScript configuration
 eslint.config.mjs                # ESLint configuration
`

## Workflow

### 1. User Authentication
- Users sign in using Google OAuth via NextAuth.js
- Upon first sign-in, a user profile is created in MongoDB with initial XP of 0
- Session includes user ID and current XP for real-time updates

### 2. Home Page
- Displays global leaderboard (top 10 users by XP)
- Shows current user's XP and name
- Allows selection of difficulty (Easy/Hard/Extreme) and language (Python/JavaScript)
- "Start Challenge" button redirects to /question with selected parameters

### 3. Challenge Generation
- /api/questions endpoint receives difficulty and language
- Uses Google Gemini AI to generate:
  - Problem title and description
  - 3 test cases with input/output pairs
- Assigns random XP value based on difficulty:
  - Easy: 5-20 XP
  - Hard: 21-60 XP
  - Extreme: 61-110 XP
- Saves question to MongoDB and returns to frontend

### 4. Coding Interface
- Dual-pane layout: problem description (left), code editor (right)
- Monaco Editor provides syntax highlighting and IntelliSense
- Pre-populated code template based on selected language
- Real-time code editing with dark theme

### 5. Code Execution
- "Run Tests" button sends code to /api/execute
- Server-side execution in isolated environment:
  - Python: Uses python subprocess
  - JavaScript: Uses 
ode subprocess
- Executes code against each test case input
- Returns output for comparison with expected results
- Displays results in tabbed interface (Test Cases/Results)

### 6. Submission
- "Submit" button sends code and test results to /api/sub

... (truncated)
Repository
5stars
0forks
View on GitHub
Details
DiscoveredJan 19, 2026
Last UpdatedApr 25, 2026
Quality Score
35/100