Skip to content

Commit d198a55

Browse files
getGit789getGit789
committed
Deploying to gh-pages from @ 47a05d7 🚀
1 parent 7963c6f commit d198a55

File tree

11 files changed

+2384
-0
lines changed

11 files changed

+2384
-0
lines changed

‎Dockerfile‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:18-alpine
2+
3+
WORKDIR /app
4+
5+
# Copy package.json and package-lock.json
6+
COPY package*.json ./
7+
8+
# Install dependencies
9+
RUN npm install
10+
11+
# Copy the rest of the application
12+
COPY . .
13+
14+
# Expose the port the app runs on
15+
EXPOSE 3000
16+
17+
# Set environment variables
18+
ENV NODE_ENV=production
19+
ENV API_URL=http://backend:8000
20+
21+
# Start the application
22+
CMD ["node", "server.js"]

‎README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Python Interpreter Frontend
2+
3+
Next.js frontend for the online Python interpreter.
4+
5+
## Setup
6+
7+
1. Install dependencies:
8+
```
9+
npm install
10+
```
11+
12+
2. Run the development server:
13+
```
14+
npm run dev
15+
```
16+
17+
The website will be available at http://localhost:3000
18+
19+
## Note on Tailwind CSS
20+
21+
This project uses Tailwind CSS via CDN for styling. If you want to use the full Tailwind CSS with PostCSS:
22+
23+
1. Install Node.js and npm
24+
2. Run `npm install` to install dependencies
25+
3. Replace the CDN link in `_app.js` with the local Tailwind CSS setup
26+
4. Update `globals.css` to include Tailwind directives:
27+
```css
28+
@tailwind base;
29+
@tailwind components;
30+
@tailwind utilities;
31+
```

‎components/CodeEditor.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { useState } from "react";
2+
import Editor from "@monaco-editor/react";
3+
import axios from "axios";
4+
5+
const CodeEditor = () => {
6+
const [code, setCode] = useState("print('Hello, World!')");
7+
const [output, setOutput] = useState("");
8+
const [loading, setLoading] = useState(false);
9+
const [error, setError] = useState("");
10+
11+
const runCode = async () => {
12+
setLoading(true);
13+
setOutput("");
14+
setError("");
15+
16+
try {
17+
const response = await axios.post("http://localhost:8002/execute", {
18+
code,
19+
});
20+
21+
if (response.data.error) {
22+
setError(response.data.error);
23+
} else {
24+
setOutput(response.data.output);
25+
}
26+
} catch (err) {
27+
setError(err.response?.data?.detail || "Error executing code");
28+
} finally {
29+
setLoading(false);
30+
}
31+
};
32+
33+
return (
34+
<div className="p-4">
35+
<div className="mb-4">
36+
<Editor
37+
height="300px"
38+
defaultLanguage="python"
39+
defaultValue={code}
40+
onChange={(value) => setCode(value)}
41+
theme="vs-dark"
42+
options={{
43+
minimap: { enabled: false },
44+
scrollBeyondLastLine: false,
45+
fontSize: 14,
46+
}}
47+
/>
48+
</div>
49+
50+
<div className="flex justify-between mb-4">
51+
<button
52+
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700
53+
focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
54+
onClick={runCode}
55+
disabled={loading}
56+
>
57+
{loading ? "Running..." : "Run Code"}
58+
</button>
59+
60+
<button
61+
className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700
62+
focus:outline-none focus:ring-2 focus:ring-gray-500"
63+
onClick={() => setCode("print('Hello, World!')")}
64+
>
65+
Reset
66+
</button>
67+
</div>
68+
69+
<div className="mt-4">
70+
<h2 className="text-lg font-semibold mb-2">Output</h2>
71+
<div className="bg-gray-900 text-gray-100 p-4 rounded h-48 overflow-auto">
72+
{loading ? (
73+
<p className="text-yellow-400">Running code...</p>
74+
) : error ? (
75+
<pre className="text-red-400 whitespace-pre-wrap">{error}</pre>
76+
) : output ? (
77+
<pre className="whitespace-pre-wrap">{output}</pre>
78+
) : (
79+
<p className="text-gray-500">Run your code to see output</p>
80+
)}
81+
</div>
82+
</div>
83+
</div>
84+
);
85+
};
86+
87+
export default CodeEditor;

‎index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Python Interpreter Online</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<!-- Monaco Editor CSS -->
9+
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css">
10+
</head>
11+
<body>
12+
<header>
13+
<h1>Python Interpreter Online</h1>
14+
</header>
15+
16+
<main>
17+
<div class="container">
18+
<div id="editor-container"></div>
19+
<div class="button-container">
20+
<button id="run-button">Run Code</button>
21+
<button id="clear-button">Clear Output</button>
22+
<button id="copy-button" title="Copy code to clipboard">Copy Code</button>
23+
<button id="share-button" title="Generate shareable link">Share Code</button>
24+
<select id="example-select">
25+
<option value="">Select Example</option>
26+
<option value="hello">Hello World</option>
27+
<option value="error">Error Handling</option>
28+
<option value="loop">Performance Test</option>
29+
<option value="input">Input Handling</option>
30+
</select>
31+
</div>
32+
<div id="share-container" class="hidden">
33+
<div class="share-content">
34+
<input type="text" id="share-url" readonly>
35+
<button id="copy-share-url">Copy URL</button>
36+
<button id="close-share">Close</button>
37+
</div>
38+
</div>
39+
<div id="output-container">
40+
<h3>Output</h3>
41+
<div id="execution-status" class="execution-status hidden">
42+
<div class="spinner"></div>
43+
<span id="status-message">Running code...</span>
44+
</div>
45+
<pre id="output"></pre>
46+
</div>
47+
</div>
48+
</main>
49+
50+
<footer>
51+
<div class="footer-content">
52+
<p>Python Interpreter Online - A free, open-source project</p>
53+
<div class="support-options">
54+
<a href="https://github.com/sponsors/GetGit789" target="_blank" class="support-link github-sponsor">
55+
<span class="support-icon">❤️</span> Sponsor
56+
</a>
57+
<a href="https://ko-fi.com/getgit789" target="_blank" class="support-link kofi">
58+
<span class="support-icon">☕</span> Buy me a coffee
59+
</a>
60+
</div>
61+
</div>
62+
</footer>
63+
64+
<!-- Load Axios from CDN -->
65+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
66+
67+
<!-- Load Monaco Editor from CDN -->
68+
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
69+
<script>
70+
require.config({
71+
paths: {
72+
'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs'
73+
}
74+
});
75+
window.MonacoEnvironment = {
76+
getWorkerUrl: function(workerId, label) {
77+
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
78+
self.MonacoEnvironment = {
79+
baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/'
80+
};
81+
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/base/worker/workerMain.js');
82+
`)}`;
83+
}
84+
};
85+
</script>
86+
<script src="script.js"></script>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)