← Back to Projects

Code Craft

Interactive Code Learning Platform

CodeCraft.io is an interactive code learning platform providing real-time code execution and AI-powered assistance. It features a decoupled, full-stack architecture where the backend acts as a secure proxy—dynamically compiling and running user-submitted code in a controlled server-side environment while shielding sensitive API credentials from the client. The platform supports C, Python, and JavaScript execution through a unified Remote Code Execution engine.

Architecture & How It Works

The project follows a Service-Oriented Design split into three distinct modules: front_end (React/Vite), server (Flask API), and ai (experimental). Both the frontend and backend are Dockerized for consistent environment parity. When a user submits code, the React client sends a POST request to the Flask API, which writes the code to a temporary file, executes it via subprocess.run, captures the output, cleans up, and returns the result—all without exposing any server-side internals to the client.

1. Remote Code Execution (RCE) Engine

Located in server/api.py, the core logic handles multi-language execution through a unified handle_code_request function. The workflow receives a code payload, writes it to a temporary file, executes it via the appropriate runtime, captures stdout/stderr, cleans up, and returns the result as JSON.

# Unified execution pipeline in api.py
def handle_code_request(language, code):
    # 1. Write to temp file (temp.c / temp.py / temp.js)
    write_temp_file(code, extension=lang_ext[language])
    
    # 2. Compile if needed (C requires gcc)
    if language == "c":
        subprocess.run(["gcc", "temp.c", "-o", "output"])
    
    # 3. Execute via subprocess
    result = subprocess.run(
        cmd[language],
        capture_output=True, text=True
    )
    
    # 4. Cleanup temp files & return
    cleanup()
    return {"output": result.stdout, "error": result.stderr}

2. Wolfram Alpha Proxy Architecture

The /prompt endpoint manages natural language queries by acting as a secure proxy for the Wolfram Alpha API. This pattern shields the sensitive APP_ID from ever reaching the client-side JavaScript:

  • ●Environment Isolation: The APP_ID is loaded via python-dotenv from a .env file, never hardcoded or exposed to the frontend.
  • ●Request Forwarding: The server constructs a request to Wolfram Alpha's “Full Results” API, parses the XML response, and returns a plaintext answer to the client.
  • ●Frontend Integration: The ChatBot.jsx component provides a conversational interface, sending user queries to the proxy and rendering the AI response inline.
    POST /prompt { "query": "What is the speed of light?" }

3. Containerization & Deployment Strategy

Both the front_end and server directories contain their own Dockerfile, enabling independent containerization. This allows the frontend to be served as a static Vite build behind Nginx while the Flask API runs in its own isolated container with gcc, python3, and node runtimes pre-installed—ensuring the code execution sandbox has all required compilers without polluting the host machine.

Tech Stack & Tools Used

Frontend & UI

  • React 18 & Vite: Component-based SPA with hot-module replacement for rapid development.
  • React Router DOM: Client-side routing between the Code Runner and ChatBot views.
  • @uiw/react-textarea-code-editor: Rich, syntax-highlighted code editing with Rehype/Prism integration.
  • Tailwind CSS 3: Utility-first styling for a modern, responsive developer-centric interface.

Backend & DevOps

  • Python 3 & Flask: Lightweight API server handling code execution routes and the Wolfram proxy.
  • Wolfram Alpha API: Natural language computation engine accessed via a secure server-side proxy.
  • Flask-CORS: Cross-origin resource sharing for frontend↔backend communication during development.
  • Docker: Independent containerization for both frontend and backend services with full runtime parity.

Architecture Diagram

📐System Architecture & Request Flow

[ ARCHITECTURE OVERVIEW ]

┌─────────────────────────────────────────────────────────────┐
│                     CLIENT LAYER                            │
│                                                             │
│   React 18 + Vite                                           │
│   ┌───────────────────┐    ┌───────────────────┐            │
│   │  CodeRunner.jsx   │    │   ChatBot.jsx     │            │
│   │  Code Editor UI   │    │   Wolfram Chat UI │            │
│   │  @uiw/textarea    │    │   Conversational  │            │
│   └────────┬──────────┘    └────────┬──────────┘            │
│            │ POST /python           │ POST /prompt           │
│            │ POST /c                │                        │
│            │ POST /javascript       │                        │
└────────────┼────────────────────────┼────────────────────────┘
             │                        │
             ▼                        ▼
┌─────────────────────────────────────────────────────────────┐
│                     SERVER LAYER                            │
│                     Flask (api.py)                           │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │           handle_code_request(lang, code)           │   │
│   │                                                     │   │
│   │   1. Receive code payload from client               │   │
│   │   2. Write to temp file (temp.c / temp.py / temp.js)│   │
│   │   3. Compile if needed (gcc temp.c -o output)       │   │
│   │   4. Execute via subprocess.run()                   │   │
│   │   5. Capture stdout / stderr                        │   │
│   │   6. Cleanup temp files                             │   │
│   │   7. Return JSON result                             │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │           /prompt → Wolfram Alpha Proxy             │   │
│   │                                                     │   │
│   │   1. Read APP_ID from .env (python-dotenv)          │   │
│   │   2. Forward query to Wolfram Full Results API      │   │
│   │   3. Parse XML response                             │   │
│   │   4. Return plaintext answer to client              │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                             │
│   Flask-CORS enabled for cross-origin dev requests          │
└─────────────────────────────────────────────────────────────┘

Request Flow:

  [User Types Code] → CodeRunner.jsx
       │
       ▼
  POST /{language} → api.py
       │
       ├─ Python:     python3 temp.py
       ├─ C:          gcc temp.c -o output → ./output
       └─ JavaScript: node temp.js
       │
       ▼
  subprocess.run(cmd, capture_output=True)
       │
       ▼
  { "output": stdout, "error": stderr }

  [User Asks Question] → ChatBot.jsx
       │
       ▼
  POST /prompt → Wolfram Alpha Full Results API
       │
       ▼
  { "answer": plaintext_result }

Local Execution & Testing

The project requires running two services independently: the Flask backend (API + code execution) and the Vite frontend (React SPA). The backend must be started first since the frontend depends on its API endpoints for both code execution and chatbot queries:

# Terminal 1: Start the Backend API Servercd serverpip install -r requirements.txt# Create .env with: APP_ID=your_wolfram_app_idpython api.py
# Terminal 2: Start the Frontend Dev Servercd front_endnpm installnpm run dev
# Verify Container Build (Production)docker build -t codecraft-server ./serverdocker build -t codecraft-frontend ./front_end

Testing Strategy

  • ●API Validation: Test execution endpoints using curl or Postman — e.g., curl -X POST http://localhost:3000/python -H "Content-Type: application/json" -d '{"data": ["print(\'Hello\')"]}'
  • ●Frontend Linting: Run npm run lint to enforce ESLint standards across all React components.
  • ●Container Testing: Verify Docker builds compile successfully to ensure production readiness before deployment.