diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..fe5494b
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,56 @@
+# Stage 1: Build the React frontend
+FROM node:18-alpine AS frontend-builder
+WORKDIR /app/frontend
+
+# Define a build-time argument for the API URL with a default value
+ARG VITE_API_URL=""
+# Set it as an environment variable for the build command
+ENV VITE_API_URL=$VITE_API_URL
+
+# Copy package files and install dependencies
+COPY Frontend/package.json Frontend/package-lock.json* Frontend/yarn.lock* ./
+RUN yarn install --frozen-lockfile
+
+# Copy the rest of the frontend source code
+COPY Frontend/ ./
+
+# Build the static files. Vite will use the VITE_API_URL env var.
+RUN yarn build
+
+# Stage 2: Build the Go backend
+FROM golang:1.19-alpine AS backend-builder
+WORKDIR /app/backend
+
+# Install git for dependency fetching
+RUN apk update && apk add --no-cache git
+
+# Copy go module files and download dependencies
+COPY new-backend/go.mod new-backend/go.sum ./
+RUN go mod download
+
+# Copy the backend source code
+COPY new-backend/ ./
+
+# Build the Go binary
+RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -ldflags="-s -w" -o /monaco-backend .
+
+# Stage 3: Create the final image with Nginx
+FROM nginx:1.25-alpine
+
+# Install Docker client for the backend
+RUN apk update && apk add --no-cache docker-cli
+
+# Copy the Go backend binary
+COPY --from=backend-builder /monaco-backend /usr/local/bin/monaco-backend
+
+# Copy the built frontend files to the Nginx html directory
+COPY --from=frontend-builder /app/frontend/dist /usr/share/nginx/html
+
+# Copy the Nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose the public port for Nginx
+EXPOSE 80
+
+# Start both the backend and Nginx
+CMD sh -c 'monaco-backend & nginx -g "daemon off;"'
\ No newline at end of file
diff --git a/Frontend/index.html b/Frontend/index.html
index 238f04b..174b698 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -3,6 +3,7 @@
+
VSCode
diff --git a/Frontend/public/favicon.ico b/Frontend/public/favicon.ico
new file mode 100644
index 0000000..b02b952
Binary files /dev/null and b/Frontend/public/favicon.ico differ
diff --git a/Frontend/public/vite.svg b/Frontend/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/Frontend/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 8f8699c..8002bc3 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,10 +1,18 @@
-import VSCodeUI from "./components/VSCodeUI.jsx"
+import CodeChallenge from "./components/CodeChallenge.jsx"
import "./index.css"
function App() {
return (
-
+
+
)
}
diff --git a/Frontend/src/components/CodeChallenge.jsx b/Frontend/src/components/CodeChallenge.jsx
new file mode 100644
index 0000000..d56bed5
--- /dev/null
+++ b/Frontend/src/components/CodeChallenge.jsx
@@ -0,0 +1,750 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Editor from "@monaco-editor/react";
+import { Play, Send } from 'lucide-react';
+
+const CodeChallenge = () => {
+ const [activeQuestion, setActiveQuestion] = useState("Q.1");
+ const [language, setLanguage] = useState("JavaScript");
+ const [code, setCode] = useState("");
+ const [isRunning, setIsRunning] = useState(false);
+ const [terminalOutput, setTerminalOutput] = useState([]);
+ const [autoSelected, setAutoSelected] = useState(true);
+ const [activeSocket, setActiveSocket] = useState(null);
+ const [submissionId, setSubmissionId] = useState(null);
+ const socketRef = useRef(null);
+
+ // Map frontend language names to backend language identifiers
+ const getLanguageIdentifier = (uiLanguage) => {
+ const languageMap = {
+ 'javascript': 'javascript',
+ 'python': 'python',
+ 'java': 'java',
+ 'c++': 'cpp',
+ 'c': 'c'
+ };
+ // Important: make sure we convert to lowercase to match the backend's expected format
+ return languageMap[uiLanguage.toLowerCase()] || uiLanguage.toLowerCase();
+ };
+
+ // Reset execution state to allow rerunning
+ const resetExecutionState = () => {
+ setIsRunning(false);
+
+ // Properly close the socket if it exists and is open
+ if (socketRef.current) {
+ if (socketRef.current.readyState === WebSocket.OPEN) {
+ socketRef.current.close();
+ }
+ socketRef.current = null;
+ }
+
+ // Ensure activeSocket is also nullified
+ setActiveSocket(null);
+
+ console.log('Execution state reset, buttons should be enabled');
+ };
+
+ // Example problem data
+ const problems = {
+ "Q.1": {
+ id: "two-sum",
+ title: "Two Sum",
+ description: "Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.",
+ constraints: "You may assume that each input would have exactly one solution, and you may not use the same element twice.",
+ examples: [
+ {
+ input: "nums = [2,7,11,15], target = 9",
+ output: "[0,1]",
+ explanation: "Because nums[0] + nums[1] == 9, we return [0, 1]."
+ },
+ {
+ input: "nums = [3,2,4], target = 6",
+ output: "[1,2]"
+ },
+ {
+ input: "nums = [3,3], target = 6",
+ output: "[0,1]"
+ }
+ ],
+ starterCode: `/**
+ * @param {number[]} nums
+ * @param {number} target
+ * @return {number[]}
+ */
+var twoSum = function(nums, target) {
+ // Write your solution here
+
+};`
+ },
+ "Q.2": {
+ id: "palindrome-number",
+ title: "Palindrome Number",
+ description: "Given an integer x, return true if x is a palindrome, and false otherwise.",
+ examples: [
+ {
+ input: "x = 121",
+ output: "true"
+ },
+ {
+ input: "x = -121",
+ output: "false",
+ explanation: "From left to right, it reads -121. From right to left, it reads 121-. Therefore it is not a palindrome."
+ }
+ ],
+ starterCode: `/**
+ * @param {number} x
+ * @return {boolean}
+ */
+var isPalindrome = function(x) {
+ // Write your solution here
+
+};`
+ },
+ "Q.3": {
+ id: "valid-parentheses",
+ title: "Valid Parentheses",
+ description: "Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.",
+ constraints: "An input string is valid if: Open brackets must be closed by the same type of brackets. Open brackets must be closed in the correct order.",
+ examples: [
+ {
+ input: 's = "()"',
+ output: "true"
+ },
+ {
+ input: 's = "()[]{}"',
+ output: "true"
+ },
+ {
+ input: 's = "(]"',
+ output: "false"
+ }
+ ],
+ starterCode: `/**
+ * @param {string} s
+ * @return {boolean}
+ */
+var isValid = function(s) {
+ // Write your solution here
+
+};`
+ }
+ };
+
+ // Get appropriate starter code based on language
+ const getStarterCode = (problem, lang) => {
+ // Language-specific starter code templates
+ const templates = {
+ 'JavaScript': problem.starterCode,
+ 'C': `#include
+#include
+#include
+
+// ${problem.title} solution
+
+int main() {
+ // Write your solution here
+
+ return 0;
+}`,
+ 'Python': `# ${problem.title}
+def solution():
+ # Write your solution here
+ # Use input() for user input in Python
+ # Example: name = input("Enter your name: ")
+ pass
+
+if __name__ == "__main__":
+ solution()`,
+ 'Java': `public class Solution {
+ // ${problem.title}
+ public static void main(String[] args) {
+ // Write your solution here
+
+ }
+}`,
+ 'C++': `#include
+#include
+using namespace std;
+
+// ${problem.title} solution
+int main() {
+ // Write your solution here
+
+ return 0;
+}`
+ };
+
+ return templates[lang] || problem.starterCode;
+ };
+
+ // Set initial code based on active problem
+ useEffect(() => {
+ if (problems[activeQuestion]) {
+ setCode(getStarterCode(problems[activeQuestion], language));
+ }
+ }, [activeQuestion, language]);
+
+ // Cleanup WebSocket connection on unmount
+ useEffect(() => {
+ return () => {
+ if (socketRef.current) {
+ socketRef.current.close();
+ }
+ };
+ }, []);
+
+ // Set a safety timeout to ensure buttons are re-enabled if execution hangs
+ useEffect(() => {
+ let safetyTimer = null;
+
+ if (isRunning) {
+ // If execution is running for more than 30 seconds, reset state
+ safetyTimer = setTimeout(() => {
+ console.log('Safety timeout reached, re-enabling buttons');
+ resetExecutionState();
+ }, 30000);
+ }
+
+ return () => {
+ if (safetyTimer) clearTimeout(safetyTimer);
+ };
+ }, [isRunning]);
+
+ // Connect to WebSocket
+ const connectToWebSocket = (id) => {
+ console.log('Connecting to WebSocket with ID:', id);
+
+ // Force close any existing connections
+ if (socketRef.current) {
+ console.log('Closing existing socket, state:', socketRef.current.readyState);
+ socketRef.current.onclose = null; // Remove existing handler to avoid conflicts
+ socketRef.current.onerror = null;
+ socketRef.current.onmessage = null;
+
+ if (socketRef.current.readyState !== WebSocket.CLOSED) {
+ socketRef.current.close();
+ }
+ socketRef.current = null;
+ }
+
+ if (activeSocket) {
+ console.log('Clearing active socket reference');
+ setActiveSocket(null);
+ }
+
+ console.log('Creating new WebSocket connection');
+ const wsUrl = `ws://localhost:8080/api/ws/terminal/${id}`;
+ const socket = new WebSocket(wsUrl);
+
+ socket.onopen = () => {
+ console.log('WebSocket connection established');
+ setActiveSocket(socket);
+ };
+
+ socket.onmessage = (event) => {
+ try {
+ const message = JSON.parse(event.data);
+ console.log('WebSocket message received:', message, 'Current isRunning state:', isRunning);
+
+ switch (message.type) {
+ case 'output':
+ // Handle output message based on the format seen in the screenshot
+ setTerminalOutput(prev => [
+ ...prev,
+ {
+ type: message.content.isError ? 'error' : 'output',
+ content: message.content.text
+ }
+ ]);
+ break;
+
+ case 'input_prompt':
+ // Handle input prompt message (e.g., "Enter your name:")
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'output', content: message.content }
+ ]);
+ break;
+
+ case 'status':
+ let statusText = '';
+ let statusValue = '';
+
+ if (typeof message.content === 'object') {
+ statusText = `Status: ${message.content.status}`;
+ statusValue = message.content.status;
+ } else {
+ statusText = `Status: ${message.content}`;
+ statusValue = message.content;
+ }
+
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'system', content: statusText }
+ ]);
+
+ // If status contains "completed" or "failed", stop running
+ if (statusValue.includes('completed') || statusValue.includes('failed')) {
+ console.log('Execution completed or failed, stopping');
+ setTimeout(() => {
+ setIsRunning(false);
+ }, 500); // Small delay to ensure UI updates properly
+ }
+ break;
+
+ case 'error':
+ let errorContent = '';
+ if (typeof message.content === 'object' && message.content.message) {
+ errorContent = message.content.message;
+ } else {
+ errorContent = String(message.content);
+ }
+
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'error', content: errorContent }
+ ]);
+
+ console.log('Error received, enabling buttons');
+ setTimeout(() => {
+ setIsRunning(false);
+ }, 500); // Small delay to ensure UI updates properly
+ break;
+
+ case 'system':
+ const systemContent = String(message.content);
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'system', content: systemContent }
+ ]);
+
+ // Check for connection closing message which indicates execution is complete
+ if (systemContent.includes('Connection will close') ||
+ systemContent.includes('completed successfully') ||
+ systemContent.includes('Execution completed')) {
+ console.log('System message indicates completion, enabling buttons');
+ setTimeout(() => {
+ setIsRunning(false);
+ }, 500);
+ }
+ break;
+
+ default:
+ // Handle any other message types or direct string content
+ console.log('Unknown message type:', message);
+ if (typeof message === 'object') {
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'output', content: JSON.stringify(message) }
+ ]);
+ }
+ }
+ } catch (error) {
+ console.error('Error parsing WebSocket message:', error);
+ }
+ };
+
+ socket.onerror = (error) => {
+ console.error('WebSocket error:', error);
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'error', content: 'WebSocket connection error' }
+ ]);
+
+ console.log('WebSocket error, enabling buttons');
+ setTimeout(() => {
+ setIsRunning(false);
+ }, 500); // Small delay to ensure UI updates properly
+ };
+
+ socket.onclose = () => {
+ console.log('WebSocket connection closed');
+ setActiveSocket(null);
+
+ // Ensure buttons are re-enabled when the connection closes
+ setTimeout(() => {
+ resetExecutionState();
+ }, 100);
+ };
+
+ // Set the socket reference early to ensure we can clean it up if needed
+ socketRef.current = socket;
+ return socket;
+ };
+
+ // Handle code execution
+ const runCode = async () => {
+ console.log('Run button clicked, current state:', {
+ isRunning,
+ socketState: activeSocket ? activeSocket.readyState : 'no socket',
+ socketRefState: socketRef.current ? socketRef.current.readyState : 'no socket ref'
+ });
+
+ // First make sure previous connections are fully closed
+ resetExecutionState();
+
+ // Increase the delay to ensure clean state before starting new execution
+ setTimeout(async () => {
+ // Double-check socket state before proceeding
+ if (activeSocket || socketRef.current) {
+ console.warn('Socket still exists after reset, forcing cleanup');
+ if (activeSocket && activeSocket.readyState !== WebSocket.CLOSED) {
+ activeSocket.close();
+ }
+ if (socketRef.current && socketRef.current.readyState !== WebSocket.CLOSED) {
+ socketRef.current.close();
+ }
+ socketRef.current = null;
+ setActiveSocket(null);
+
+ // Extra delay to ensure socket is fully closed
+ await new Promise(resolve => setTimeout(resolve, 100));
+ }
+
+ setIsRunning(true);
+ setTerminalOutput([
+ { type: 'system', content: `Running ${problems[activeQuestion].id}...` }
+ ]);
+
+ try {
+ // Submit code to the backend
+ const response = await fetch('http://localhost:8080/api/submit', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ code: code,
+ language: getLanguageIdentifier(language),
+ input: '',
+ }),
+ });
+
+ if (!response.ok) {
+ throw new Error(`Error: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ setSubmissionId(data.id);
+
+ // Connect to WebSocket for real-time updates
+ connectToWebSocket(data.id);
+
+ } catch (error) {
+ console.error('Error submitting code:', error);
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'error', content: `Error: ${error.message}` }
+ ]);
+
+ resetExecutionState();
+ }
+ }, 200); // Increased delay to ensure clean state
+ };
+
+ // Handle code submission
+ const submitCode = async () => {
+ setIsRunning(true);
+ setTerminalOutput([
+ { type: 'system', content: `Submitting solution for ${problems[activeQuestion].id}...` }
+ ]);
+
+ try {
+ // Submit code to the backend
+ const response = await fetch('http://localhost:8080/api/submit', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ code: code,
+ language: getLanguageIdentifier(language),
+ input: '',
+ problemId: problems[activeQuestion].id
+ }),
+ });
+
+ if (!response.ok) {
+ throw new Error(`Error: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+ setSubmissionId(data.id);
+
+ // Connect to WebSocket for real-time updates
+ connectToWebSocket(data.id);
+
+ } catch (error) {
+ console.error('Error submitting solution:', error);
+ setTerminalOutput(prev => [
+ ...prev,
+ { type: 'error', content: `Error: ${error.message}` }
+ ]);
+ setIsRunning(false);
+ }
+ };
+
+ // Render the current problem
+ const renderProblem = () => {
+ const problem = problems[activeQuestion];
+ if (!problem) return null;
+
+ return (
+
+
{problem.title}
+
+
+
{problem.description}
+ {problem.constraints &&
{problem.constraints}
}
+
+
+ {/* Test cases section removed */}
+
+ );
+ };
+
+ // Add this useEffect to monitor socket state
+ useEffect(() => {
+ // If we have an active socket but aren't running, we should clean up
+ if (activeSocket && !isRunning) {
+ console.log('Cleaning up inactive socket');
+ if (activeSocket.readyState === WebSocket.OPEN) {
+ activeSocket.close();
+ }
+ setActiveSocket(null);
+ }
+ }, [activeSocket, isRunning]);
+
+ return (
+