code-za

A minimal, high-performance multi-language code runner built by students for students.

Features

• Multi-Language Support: C++, Python, Java, JavaScript, HTML, React
• ** Real-time Preview**: HTML and React components render instantly with fixed blank screen issues
• ** Lightning Fast**: Optimized for speed with zero setup time
• ** GitHub Integration**: Clone repositories directly into the editor
• ** Version History**: Save and revert code snapshots
• ** Auto-Save**: Automatic saving to browser storage every 3 seconds
• ** Keyboard Shortcuts**: Complete keyboard navigation support
• ** Responsive Design**: Works flawlessly on desktop, tablet, and mobile
• ** Light/Dark Mode**: Toggle between themes on the fly
• ** File Explorer**: Create, organize, and manage multiple files and folders
• ** Error Handling**: Real-time error display with helpful messages

Quick Start

Prerequisites: Node.js (16+)

1. Install dependencies:

npm install

2. Run development server:

npm run dev

3. Build for production:

npm run build

Features in Detail

Multi-File Support

• Create and organize multiple files in folders
• Switch between files with instant preview
• Automatic language detection from file extension
• All files in a project auto-saved locally

Code Completion for All Languages

code-za includes intelligent AI-powered code completion for ALL supported languages:

• JavaScript - Full ES6+ syntax support
• Python - Python 3 completion
• C++ - Modern C++ patterns
• Java - Java 8+ patterns
• HTML - DOM and element suggestions
• React - JSX and React hook completions

How to Use Completions

1. Automatic: Type for 3+ characters and wait 800ms for suggestions
2. Manual: Press Ctrl+G (Mac: Cmd+G) anytime to trigger completion
3. Navigation:
   • ↑↓ Arrow keys to browse suggestions
   • Enter to accept highlighted suggestion
   • Escape to close panel
   • Click any suggestion to insert it

Chat Mode + File Upload

The side code-za AI badge now supports:

1. Auto Predict mode for inline code suggestions
2. Chat Mode for asking questions about your code
3. File upload in chat mode (files are sent as text context to the backend AI endpoint)

Limits:

• Up to 8 files per chat session
• Large files are truncated before sending

Keyboard Shortcuts

Shortcut	Action
Ctrl+G / Cmd+G	Trigger code completions
↑ / ↓	Navigate suggestions (when shown)
Enter	Accept highlighted suggestion
Escape	Close suggestions panel
Ctrl+S / Cmd+S	Save snapshot to history

Cloning Repositories

You can clone any GitHub repository directly into code-za:

1. Click the Clone Repository button in the playground
2. Enter a GitHub repository URL (e.g., https://github.com/owner/repo)
3. The repository structure will be loaded into the file explorer
4. Start editing and running code immediately

Supported repository types:

• Any public GitHub repository
• Multi-language projects
• Nested folder structures

Preview Stack

• HTML: Live preview with auto-wrap for incomplete HTML
• React: Pre-loaded React 18 + ReactDOM with Babel transpilation
• Real-time: Changes update preview instantly with proper error boundaries

Configuration

Environment Variables

Create a .env file in the project root for backend settings.

# Code assistant provider: "ollama" (local LLM) or "mock" (template fallback)
CODE_ASSISTANT_PROVIDER=ollama

# Keep fallback templates enabled if the model is unavailable
CODE_ASSISTANT_FALLBACK=true

# Local Ollama configuration
OLLAMA_BASE_URL=http://127.0.0.1:11434
OLLAMA_MODEL=qwen2.5-coder:1.5b

# Optional tuning
CODE_ASSISTANT_TIMEOUT_MS=12000
CODE_ASSISTANT_MAX_SUGGESTIONS=3

# Runtime mode for Python/C++/Java execution:
# auto   -> try online Piston first, then local fallback
# online -> force online runtime only
# local  -> force local SDK/compiler/runtime only
CODEZA_RUNTIME_MODE=auto

Local LLM Setup (Ollama)

1. Install Ollama from https://ollama.com.
2. Pull a small coding model:

ollama pull qwen2.5-coder:1.5b

3. Start Ollama (if not already running):

ollama serve

4. Start this app:

npm run dev

DevOps

Keyboard Shortcuts

Shortcut	Action
Ctrl+G / Cmd+G	Trigger completions manually
↑ ↓	Navigate through suggestions
Enter	Accept highlighted suggestion
Escape	Close suggestions panel

Deployment

Docker

Build and run with Docker:

docker-compose up --build

The application will be available at http://localhost:3000

Troubleshooting

White/Blank Preview Screen

If the code preview appears blank when running HTML or React:

1. Check browser console for errors (F12)
2. Ensure your HTML has a valid <body> tag
3. For React: verify you're using valid React 18 syntax
4. Click "Run" button to refresh the preview

Language Runtime Not Found

Some languages may not be available in the web sandbox (C++, Java). For local development:

1. Install the necessary compiler/runtime
2. Run the development server locally with npm run dev
3. Use Docker for a consistent environment across systems

Local SDK Setup (Windows)

For local fallback execution, install:

1. Python 3 (python / py -3)
2. JDK (javac and java in PATH)
3. C++ compiler (g++ from MinGW-w64 or LLVM toolchain)

Quick checks:

py -3 --version
javac -version
java -version
g++ --version

Notes

Frontend

Tool	Version	Purpose
	UI Framework	Building interactive UI
	Language	Type-safe development
	Build Tool	Fast frontend bundling
	Styling	Utility-first CSS
	Component	Code editor
	Library	Syntax highlighting
	Library	Animations

Backend

Tool	Version	Purpose
	Framework	Web server
	Runtime	JavaScript runtime
	Tool	TypeScript executor
	Database	Data storage

DevOps

Tool	Purpose
	Containerization
	Orchestration

Notes

• This repository was cleaned to remove AI Studio template metadata and branding.
• If you plan to use any external API keys, add them to an .env file and do not commit secrets to the repository.

License

MIT