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
Details
Related Skills
More coding & development skills you might like
Reticle
Coding & DevelopmentAI agents can generate code, but still struggle to understand what they build. Reticle brings Jev-style machine-native runtime perception to web & desktop applications.
🤖claude🌐universal
1.2k
190
View
agentscope-java
Coding & DevelopmentExpert Java developer skill for AgentScope Java framework - a reactive, message-driven multi-agent system built on Project Reactor. Use when working with reactive programming, LLM integration, agent orchestration, multi-agent systems, or when the user mentions AgentScope, ReActAgent, Mono/Flux, Project Reactor, or Java agent development. Specializes in non-blocking code, tool integration, hooks, pipelines, and production-ready agent applications.
🌐universal
6.0k
1.5k
View
ospec
Coding & DevelopmentDocument-driven OSpec workflow for initialization, change/goal routing, validation, archiving, and durable project knowledge.
✨gemini🤖claude💬gpt🌐universal
524
34
View
misakanet-failure-memory
Coding & Development📚 A zero-dependency, git-backed micro-lesson library for AI Agents to asynchronously share and search verified debugging experience. Python stdlib only. | https://misakanet.org
🤖claude⌨️cursor🌐universal
424
158
View