Add a nice user interface to interact with the API

web/.gitignore

@@ -0,0 +1,29 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+bun.lockb
+bun.lock
+package-lock.json
+.vscode/

web/README.md

@@ -0,0 +1,22 @@
+# Anga's Online Compiler
+
+A browser-based compiler for **C, C++, Python, and Java**.  
+
+## How to use
+
+1. Go to the [website](https://compiler.anga.codes/)
+2. Select a language.
+3. Write or paste code in the editor.
+4. Add stdin input (optional).
+5. Run the program.
+6. View stdout/stderr output from the compiler runtime.
+
+## Execution Constraints
+
+Code is executed in a controlled environment with fixed resource limits that can be changed via the UI.
+- Limited CPU time (terminates after 60 seconds)
+- Limited memory usage (you can use upto 128MB)
+
+## How does this execute the code?
+
+This is just the code for the frontend of the online compiler, the actual code execution is handled by the [ContainerizationAPI](https://github.com/Anga205/ContainerizationAPI) that i had made earlier, you can go to that repo to see that code, it essentially just uses unix tools to containerize your code and run it in a sandbox environment

web/astro.config.mts

@@ -0,0 +1,14 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import tailwindcss from "@tailwindcss/vite";
+
+// https://astro.build/config
+export default defineConfig({
+    site: "https://compiler.anga.codes",
+    vite: {
+        resolve: {
+            tsconfigPaths: true
+        },
+        plugins: [tailwindcss()]
+    }
+});

web/netlify.toml

@@ -0,0 +1,14 @@
+[build]
+  command = "bun run build"
+  publish = "dist"
+
+[[redirects]]
+  from = "/404"
+  to = "/index.html"
+  status = 301
+  force = true
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

web/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "online-compiler",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@lucide/astro": "^1.7.0",
+    "@monaco-editor/loader": "^1.7.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "astro": "^6.3.0",
+    "devicon": "^2.17.0",
+    "tailwindcss": "^4.2.2",
+    "vite": "^8.0.11"
+  }
+}

web/public/.well-known/llms.txt

@@ -0,0 +1,3 @@
+# Anga's Online Compiler
+
+Canonical: https://compiler.anga.codes/llms.txt

web/public/llms.txt

@@ -0,0 +1,41 @@
+# Anga's Online Compiler
+
+> Browser-based online compiler for C, C++, Python, and Java with Monaco editor.
+
+- Site: https://compiler.anga.codes/
+- Product: Online code compiler and runtime sandbox
+- Languages: C, C++, Python, Java
+- Cost: Free
+
+## What this app does
+
+Anga's Online Compiler lets users write, compile, and run code directly in a browser.
+It supports configurable memory and time limits, standard input, and instant stdout/stderr output.
+
+## Primary URL
+
+- https://compiler.anga.codes/
+
+## Public technical details
+
+- Frontend framework: Astro
+- Editor: Monaco Editor
+- Interface sections:
+  - Language selector
+  - Code editor pane
+  - Output pane
+  - Runtime limits controls
+
+## Usage summary
+
+1. Open the homepage.
+2. Select a language.
+3. Write or paste source code.
+4. Provide stdin if needed.
+5. Run and inspect output.
+
+## Discovery files
+
+- robots.txt: https://compiler.anga.codes/robots.txt
+- sitemap.xml: https://compiler.anga.codes/sitemap.xml
+- llms mirror: https://compiler.anga.codes/.well-known/llms.txt

web/public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://compiler.anga.codes/sitemap.xml
+
+# LLM discovery
+Allow: /llms.txt
+Allow: /.well-known/llms.txt

web/public/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://compiler.anga.codes/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

web/src/components/compiler-body.astro

@@ -0,0 +1,65 @@
+---
+import LanguageSidebar from "./language-sidebar.astro";
+import EditorPane from "./editor-pane.astro";
+import OutputPane from "./output-pane.astro";
+---
+
+<section id="compiler-body" class="h-11/12 w-screen bg-(--bg-app) text-(--text-primary)">
+  <div class="compiler-layout grid h-full w-full grid-cols-[84px_1fr]">
+    <LanguageSidebar />
+
+    <div class="workspace-shell flex h-full min-w-0">
+      <div id="left-workspace" class="workspace-pane h-full" style="width: 62%">
+        <EditorPane />
+      </div>
+
+      <div
+        id="workspace-divider"
+        class="h-full w-1 cursor-col-resize bg-(--surface-3) hover:bg-(--accent-language)"
+        aria-hidden="true"
+      ></div>
+
+      <div id="right-workspace" class="workspace-pane h-full flex-1 min-w-60">
+        <OutputPane />
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  const divider = document.getElementById("workspace-divider");
+  const leftPane = document.getElementById("left-workspace");
+  const rightPane = document.getElementById("right-workspace");
+
+  if (divider && leftPane && rightPane) {
+    const parent = divider.parentElement;
+    let dragging = false;
+
+    const onMouseMove = (event: { clientX: number; }) => {
+      if (!dragging || !parent) return;
+
+      const rect = parent.getBoundingClientRect();
+      const nextLeftWidth = event.clientX - rect.left;
+      const minLeft = 280;
+      const minRight = 240;
+      const maxLeft = rect.width - minRight - divider.offsetWidth;
+      const clampedLeft = Math.min(Math.max(nextLeftWidth, minLeft), maxLeft);
+
+      leftPane.style.width = `${clampedLeft}px`;
+      rightPane.style.width = `${rect.width - clampedLeft - divider.offsetWidth}px`;
+      rightPane.style.flex = "0 0 auto";
+    };
+
+    divider.addEventListener("mousedown", () => {
+      dragging = true;
+      document.body.style.userSelect = "none";
+    });
+
+    window.addEventListener("mousemove", onMouseMove);
+
+    window.addEventListener("mouseup", () => {
+      dragging = false;
+      document.body.style.userSelect = "";
+    });
+  }
+</script>