[v0.0.2 🎉] change ui improve code 🐱‍🏍🚀

Author: devlopersabbir

Dockerfile

@@ -19,7 +19,7 @@ RUN npm install
 COPY . .
 
 # Set environment variables
-ENV PORT=6000
+ENV PORT=9091
 
 # Create a temporary directory that will be used for mounting (if it doesn't exist on host)
 # This command ensures the directory exists within the image,
@@ -28,7 +28,7 @@ ENV PORT=6000
 RUN mkdir -p /app/temp
 
 # Expose the port your Node.js application listens on
-EXPOSE 6000
+EXPOSE 9091
 
 # Command to run your application when the container starts
 CMD ["npm", "start"]

app.js

@@ -113,7 +113,7 @@ app.use((req, res) => {
     res.type("txt").send("404 not found");
   }
 });
-const PORT = process.env.PORT || 6000;
+const PORT = process.env.PORT || 9091;
 app.listen(PORT, () => {
   console.log(`Code executor backend listening on port ${PORT}`);
 });

changelog.md

@@ -0,0 +1,18 @@
+## v0.0.1 Releases 🎉
+
+- **Multi-Language Support:** Out-of-the-box support for Python, Node.js, and Java code execution.
+- **Secure Docker Isolation:** Each code execution runs within its own ephemeral Docker container, ensuring process isolation and security.
+- **Resource Limiting:** Configurable memory and CPU limits are applied to each execution to prevent abuse and manage system resources efficiently.
+- **API-Driven:** A simple, intuitive RESTful API endpoint (`POST /run`) for easy integration with your applications.
+- **Automated Cleanup:** Temporary execution directories and files are automatically managed and removed after execution.
+- **Containerized Deployment:** Easily deployable using Docker and Docker Compose, simplifying setup and dependency management.
+
+## v0.0.2 Releases 🎉
+
+- **TypeScript** Language support with `denoland`
+- Extracted actual error from the whole error
+- Readable and user-friendly output details error
+- Reduce execution time
+- Root routes and invalid path view `html` page setup
+- Improve websites code complex issue
+- Use server action to hide **API endpoint**

docker-compose.yaml

@@ -32,7 +32,7 @@ services:
       - PORT=${PORT}
       - HOST_PROJECT_ROOT=${PWD}
     ports:
-      - "6000:6000"
+      - "9091:9091"
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
       - ./temp:/app/temp

websites/.env.example

@@ -1 +1,2 @@
-SERVER_BASE_URL="http://localhost:6000"
+SERVER_BASE_URL=""
+SERVER_BASE_URL_LOCAL="http://localhost:9091"

websites/.env.local

@@ -0,0 +1 @@
+SERVER_BASE_URL_LOCAL="http://localhost:9091"

websites/src/@types/index.ts

@@ -2,9 +2,19 @@ import { LANGUAGE_MAP } from "@/constants";
 
 export type Language = keyof typeof LANGUAGE_MAP;
 export type Status = "success" | "error" | "running";
+
+export type Input = {
+  language: Language;
+  code: string;
+};
+
+export type Output = {
+  output: string;
+  responseTime: number; // in milliseconds
+};
+
 export type ExecutionResult = {
   status: Status;
-  output: string;
-  executionTime: number;
+  results: Output;
   language: Language;
 };

websites/src/app/_actions/execute.ts

@@ -1,23 +1,13 @@
 "use server";
 
-import { Language } from "@/@types";
+import { Input, Output } from "@/@types";
 import { baseUri } from "@/constants/base";
 import axios from "axios";
 import { performance } from "perf_hooks";
 
-type Input = {
-  language: Language;
-  code: string;
-};
-
-type Output = {
-  output: string;
-  responseTime: number; // in milliseconds
-};
-
 export async function executeCodeAction(input: Input): Promise<Output> {
   const start = performance.now();
-
+  console.log("baseurl: ", baseUri);
   try {
     const response = await axios.post(`${baseUri}/run`, input);
     const end = performance.now();
@@ -35,14 +25,6 @@ export async function executeCodeAction(input: Input): Promise<Output> {
     const errorMessage =
       error?.response?.data?.details || "Unknown error occurred";
 
-    // Optional: log more useful error info for debugging
-    console.error("executeCodeAction Error:", {
-      message: errorMessage,
-      status: error?.response?.status,
-      data: error?.response?.data,
-    });
-
-    // Throw a serializable error object
     throw new Error(
       JSON.stringify({
         output: errorMessage,

websites/src/app/_components/code-input.tsx

@@ -0,0 +1,114 @@
+"use client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Clock, Code2, Play } from "lucide-react";
+import LanguageSelection from "./editor-view/language-selection";
+import { Button } from "@/components/ui/button";
+import { ExecutionResult, Language, Output } from "@/@types";
+import { useState, useTransition } from "react";
+import { executeCodeAction } from "../_actions/execute";
+import { CodeEditor } from "./editor-view/code-editor";
+import ResultSection from "./output-view/result-sections";
+
+export default function CodeInput() {
+  const [selectedLanguage, setSelectedLanguage] =
+    useState<Language>("typescript");
+  const [code, setCode] = useState("");
+  const [executionResult, setExecutionResult] =
+    useState<ExecutionResult | null>(null);
+  const [isExecuting, startExecution] = useTransition();
+
+  const executeCode = async () => {
+    if (!code.trim()) return;
+    startExecution(async () => {
+      setExecutionResult({
+        status: "running",
+        results: {
+          output: "",
+          responseTime: 0,
+        },
+        language: selectedLanguage,
+      });
+      try {
+        const data = await executeCodeAction({
+          language: selectedLanguage,
+          code,
+        });
+        setExecutionResult({
+          status: "success",
+          results: {
+            output: data.output,
+            responseTime: data.responseTime,
+          },
+          language: selectedLanguage,
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (err: any) {
+        const error = JSON.parse(err.message) as Output;
+        setExecutionResult({
+          status: "error",
+          results: {
+            output: error.output,
+            responseTime: error.responseTime,
+          },
+          language: selectedLanguage,
+        });
+      }
+    });
+  };
+  return (
+    <>
+      <Card className="h-fit bg-white/5 backdrop-blur-sm border border-white/10 text-white">
+        <CardHeader className="flex justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-white">
+              <Code2 className="w-6 h-6 text-purple-400" />
+              Code Editor
+            </CardTitle>
+            <CardDescription className="text-gray-300">
+              Write or upload your code with full syntax highlighting
+            </CardDescription>
+          </div>
+          {/* Language Selection */}
+          <LanguageSelection
+            selectedLanguage={selectedLanguage}
+            setSelectedLanguage={setSelectedLanguage}
+          />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <CodeEditor
+            value={code}
+            onChange={setCode}
+            language={selectedLanguage}
+            height="310px"
+          />
+
+          <Button
+            onClick={executeCode}
+            disabled={isExecuting || !code.trim()}
+            className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg"
+            size="lg"
+          >
+            {isExecuting ? (
+              <>
+                <Clock className="w-5 h-5 mr-2 animate-spin" />
+                Executing...
+              </>
+            ) : (
+              <>
+                <Play className="w-5 h-5 mr-2" />
+                Execute Code
+              </>
+            )}
+          </Button>
+        </CardContent>
+      </Card>
+      <ResultSection optional={executionResult} isExecuting={isExecuting} />
+    </>
+  );
+}