├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── utils
    │   └── general.js
    ├── App.js
    ├── index.js
    ├── components
    │   ├── LanguagesDropdown.js
    │   ├── CustomInput.js
    │   ├── ThemeDropdown.js
    │   ├── CodeEditorWindow.js
    │   ├── OutputDetails.js
    │   ├── OutputWindow.js
    │   ├── Navbar.js
    │   └── Landing.js
    ├── App.css
    ├── hooks
    │   └── useKeyPress.js
    ├── index.css
    ├── constants
    │   ├── statuses.js
    │   ├── customStyles.js
    │   └── languageOptions.js
    └── lib
    │   └── defineTheme.js
├── postcss.config.js
├── tailwind.config.js
├── .gitignore
├── LICENSE
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ishitaraina1807/CodinGo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/utils/general.js:
--------------------------------------------------------------------------------
1 | export const classnames = (...args) => {
2 |   return args.join(" ");
3 | };
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [],
7 | };
8 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import Landing from "./components/Landing";
3 | 
4 | function App() {
5 |   return <Landing />;
6 | }
7 | 
8 | export default App;
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById("root")
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /dist
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # Environment Variables
27 | .env
28 | .env.build
29 | .vercel
30 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/LanguagesDropdown.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Select from "react-select";
 3 | import { customStyles } from "../constants/customStyles";
 4 | import { languageOptions } from "../constants/languageOptions";
 5 | 
 6 | const LanguagesDropdown = ({ onSelectChange }) => {
 7 |   return (
 8 |     <Select
 9 |       placeholder={`Filter By Category`}
10 |       options={languageOptions}
11 |       styles={customStyles}
12 |       defaultValue={languageOptions[0]}
13 |       onChange={(selectedOption) => onSelectChange(selectedOption)}
14 |     />
15 |   );
16 | };
17 | 
18 | export default LanguagesDropdown;
19 | 


--------------------------------------------------------------------------------
/src/components/CustomInput.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { classnames } from "../utils/general";
 3 | 
 4 | const CustomInput = ({ customInput, setCustomInput }) => {
 5 |   return (
 6 |     <>
 7 |       {" "}
 8 |       <textarea
 9 |         rows="5"
10 |         value={customInput}
11 |         onChange={(e) => setCustomInput(e.target.value)}
12 |         placeholder={`Custom input...`}
13 |         className={classnames(
14 |           "focus:outline-none w-full border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white mt-2"
15 |         )}
16 |       ></textarea>
17 |     </>
18 |   );
19 | };
20 | 
21 | export default CustomInput;
22 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/ThemeDropdown.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Select from "react-select";
 3 | import monacoThemes from "monaco-themes/themes/themelist";
 4 | import { customStyles } from "../constants/customStyles";
 5 | 
 6 | const ThemeDropdown = ({ handleThemeChange, theme }) => {
 7 |   return (
 8 |     <Select
 9 |       placeholder={`Select Theme`}
10 |       // options={languageOptions}
11 |       options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({
12 |         label: themeName,
13 |         value: themeId,
14 |         key: themeId,
15 |       }))}
16 |       value={theme}
17 |       styles={customStyles}
18 |       onChange={handleThemeChange}
19 |     />
20 |   );
21 | };
22 | 
23 | export default ThemeDropdown;
24 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="A react based code editor that lets you compile and execute 10+ programming languages."
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>CodinGo - Compile and execute</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/components/CodeEditorWindow.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import Editor from "@monaco-editor/react";
 4 | 
 5 | const CodeEditorWindow = ({ onChange, language, code, theme }) => {
 6 |   const [value, setValue] = useState(code || "");
 7 | 
 8 |   const handleEditorChange = (value) => {
 9 |     setValue(value);
10 |     onChange("code", value);
11 |   };
12 | 
13 |   return (
14 |     <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
15 |       <Editor
16 |         height="70vh"
17 |         width={`100%`}
18 |         language={language || "javascript"}
19 |         value={value}
20 |         theme={theme}
21 |         defaultValue="//welcome to code editor"
22 |         onChange={handleEditorChange}
23 |       />
24 |     </div>
25 |   );
26 | };
27 | export default CodeEditorWindow;
28 | 


--------------------------------------------------------------------------------
/src/hooks/useKeyPress.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const useKeyPress = function (targetKey) {
 4 |   const [keyPressed, setKeyPressed] = useState(false);
 5 | 
 6 |   function downHandler({ key }) {
 7 |     if (key === targetKey) {
 8 |       setKeyPressed(true);
 9 |     }
10 |   }
11 | 
12 |   const upHandler = ({ key }) => {
13 |     if (key === targetKey) {
14 |       setKeyPressed(false);
15 |     }
16 |   };
17 | 
18 |   React.useEffect(() => {
19 |     document.addEventListener("keydown", downHandler);
20 |     document.addEventListener("keyup", upHandler);
21 | 
22 |     return () => {
23 |       document.removeEventListener("keydown", downHandler);
24 |       document.removeEventListener("keyup", upHandler);
25 |     };
26 |   });
27 | 
28 |   return keyPressed;
29 | };
30 | 
31 | export default useKeyPress;
32 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
 2 | 
 3 | 
 4 | @tailwind base;
 5 | @tailwind components;
 6 | @tailwind utilities;
 7 | 
 8 | 
 9 | * {
10 |   box-sizing: border-box;
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | body {
15 |   font-family: 'IBM Plex Sans', sans-serif;
16 |   font-weight: 300;
17 |   font-size: 14px;
18 | }
19 | 
20 | .listItem:hover {
21 |   background: #e2e8f0;
22 |   cursor: pointer;
23 | }
24 | 
25 | .github-corner svg {
26 |   position:absolute;
27 |   right:0;
28 |   top:0;
29 |   mix-blend-mode:darken;
30 |   color:#ffffff;
31 |   fill:#000000;
32 | }
33 | .github-corner:hover .octo-arm {
34 |   animation:octocat-wave .56s;
35 | }
36 | @keyframes octocat-wave {
37 |   0%, 100% {
38 |     transform:rotate(0);
39 |   }
40 |   20%, 60% { 
41 |     transform:rotate(-20deg);
42 |   
43 |   } 40%, 80% {
44 |     transform:rotate(10deg);
45 |   }
46 | }


--------------------------------------------------------------------------------
/src/components/OutputDetails.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | const OutputDetails = ({ outputDetails }) => {
 4 |   return (
 5 |     <div className="metrics-container mt-4 flex flex-col space-y-3">
 6 |       <p className="text-sm font-medium">
 7 |         Status:{" "}
 8 |         <span className="font-semibold px-2 py-1 rounded-md bg-indigo-500 text-white">
 9 |           {outputDetails?.status?.description}
10 |         </span>
11 |       </p>
12 |       <p className="text-sm font-medium">
13 |         Memory:{" "}
14 |         <span className="font-semibold px-2 py-1 rounded-md bg-indigo-500 text-white">
15 |           {outputDetails?.memory}
16 |         </span>
17 |       </p>
18 |       <p className="text-sm font-medium">
19 |         Time:{" "}
20 |         <span className="font-semibold px-2 py-1 rounded-md bg-indigo-500 text-white">
21 |           {outputDetails?.time}
22 |         </span>
23 |       </p>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default OutputDetails;
29 | 


--------------------------------------------------------------------------------
/src/constants/statuses.js:
--------------------------------------------------------------------------------
 1 | export const statuses = [
 2 |   {
 3 |     id: 1,
 4 |     description: "In Queue",
 5 |   },
 6 |   {
 7 |     id: 2,
 8 |     description: "Processing",
 9 |   },
10 |   {
11 |     id: 3,
12 |     description: "Accepted",
13 |   },
14 |   {
15 |     id: 4,
16 |     description: "Wrong Answer",
17 |   },
18 |   {
19 |     id: 5,
20 |     description: "Time Limit Exceeded (TLE) ",
21 |   },
22 |   {
23 |     id: 6,
24 |     description: "Compilation Error",
25 |   },
26 |   {
27 |     id: 7,
28 |     description: "Runtime Error (SIGSEGV)",
29 |   },
30 |   {
31 |     id: 8,
32 |     description: "Runtime Error (SIGXFSZ)",
33 |   },
34 |   {
35 |     id: 9,
36 |     description: "Runtime Error (SIGFPE)",
37 |   },
38 |   {
39 |     id: 10,
40 |     description: "Runtime Error (SIGABRT)",
41 |   },
42 |   {
43 |     id: 11,
44 |     description: "Runtime Error (NZEC)",
45 |   },
46 |   {
47 |     id: 12,
48 |     description: "Runtime Error (Other)",
49 |   },
50 |   {
51 |     id: 13,
52 |     description: "Internal Error",
53 |   },
54 |   {
55 |     id: 14,
56 |     description: "Exec Format Error",
57 |   },
58 | ];
59 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Codingo - Compile and Execute
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "@monaco-editor/react": "^4.4.4",
 5 |     "@testing-library/jest-dom": "^5.16.1",
 6 |     "@testing-library/react": "^12.1.2",
 7 |     "@testing-library/user-event": "^13.5.0",
 8 |     "@types/jest": "^27.5.0",
 9 |     "@types/node": "^17.0.31",
10 |     "@types/react": "^18.0.9",
11 |     "@types/react-dom": "^18.0.3",
12 |     "axios": "^0.27.2",
13 |     "monaco-themes": "^0.4.1",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "5.0.0",
17 |     "react-select": "^5.3.1",
18 |     "react-toastify": "^9.0.1",
19 |     "typescript": "^4.6.4",
20 |     "web-vitals": "^2.1.3"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "autoprefixer": "^10.4.7",
48 |     "postcss": "^8.4.13",
49 |     "tailwindcss": "^3.0.24"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/constants/customStyles.js:
--------------------------------------------------------------------------------
 1 | export const customStyles = {
 2 |   control: (styles) => ({
 3 |     ...styles,
 4 |     width: "100%",
 5 |     maxWidth: "14rem",
 6 |     minWidth: "12rem",
 7 |     borderRadius: "5px",
 8 |     color: "#000",
 9 |     fontSize: "0.8rem",
10 |     lineHeight: "1.75rem",
11 |     backgroundColor: "#FFFFFF",
12 |     cursor: "pointer",
13 |     border: "2px solid #000000",
14 |     boxShadow: "5px 5px 0px 0px rgba(0,0,0);",
15 |     ":hover": {
16 |       border: "2px solid #000000",
17 |       boxShadow: "none",
18 |     },
19 |   }),
20 |   option: (styles) => {
21 |     return {
22 |       ...styles,
23 |       color: "#000",
24 |       fontSize: "0.8rem",
25 |       lineHeight: "1.75rem",
26 |       width: "100%",
27 |       background: "#fff",
28 |       ":hover": {
29 |         backgroundColor: "rgb(243 244 246)",
30 |         color: "#000",
31 |         cursor: "pointer",
32 |       },
33 |     };
34 |   },
35 |   menu: (styles) => {
36 |     return {
37 |       ...styles,
38 |       backgroundColor: "#fff",
39 |       maxWidth: "14rem",
40 |       border: "2px solid #000000",
41 |       borderRadius: "5px",
42 |       boxShadow: "5px 5px 0px 0px rgba(0,0,0);",
43 |     };
44 |   },
45 | 
46 |   placeholder: (defaultStyles) => {
47 |     return {
48 |       ...defaultStyles,
49 |       color: "#000",
50 |       fontSize: "0.8rem",
51 |       lineHeight: "1.75rem",
52 |     };
53 |   },
54 | };
55 | 


--------------------------------------------------------------------------------
/src/components/OutputWindow.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const OutputWindow = ({ outputDetails }) => {
 4 |   const getOutput = () => {
 5 |     let statusId = outputDetails?.status?.id;
 6 | 
 7 |     if (statusId === 6) {
 8 |       // compilation error
 9 |       return (
10 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
11 |           {atob(outputDetails?.compile_output)}
12 |         </pre>
13 |       );
14 |     } else if (statusId === 3) {
15 |       return (
16 |         <pre className="px-2 py-1 font-normal text-xs text-green-500">
17 |           {atob(outputDetails.stdout) !== null
18 |             ? `${atob(outputDetails.stdout)}`
19 |             : null}
20 |         </pre>
21 |       );
22 |     } else if (statusId === 5) {
23 |       return (
24 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
25 |           {`Time Limit Exceeded`}
26 |         </pre>
27 |       );
28 |     } else {
29 |       return (
30 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
31 |           {atob(outputDetails?.stderr)}
32 |         </pre>
33 |       );
34 |     }
35 |   };
36 |   return (
37 |     <>
38 |       <h1 className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2">
39 |         Output
40 |       </h1>
41 |       <div className="w-full h-56 bg-[#1e293b] rounded-md text-white font-normal text-sm overflow-y-auto">
42 |         {outputDetails ? <>{getOutput()}</> : null}
43 |       </div>
44 |     </>
45 |   );
46 | };
47 | 
48 | export default OutputWindow;
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CondinGo
 2 | 
 3 | CondinGo is a versatile online code editor that supports over 40 programming languages. With its seamless integration of ReactJS, Tailwind CSS, Monaco Code Editor, Judge0 API, and RapidAPI, condinGo empowers developers to write, compile, and execute code in a user-friendly environment.
 4 | 
 5 | ## Features
 6 | 
 7 | - **Multi-language Support:** Code in your preferred language from a selection of over 40 programming languages.
 8 | - **Real-time Compilation:** Instantly compile and execute your code without leaving the editor.
 9 | - **Monaco Code Editor:** Benefit from the powerful and feature-rich Monaco Code Editor for an enhanced coding experience.
10 | - **Responsive Design:** Enjoy a responsive and user-friendly interface built with ReactJS and Tailwind CSS.
11 | 
12 | ## Getting Started
13 | 
14 | To get started with CondinGo, follow these simple steps:
15 | 
16 | 1. **Clone the Repository:**
17 |    ```bash
18 |    git clone https://github.com/ishitaraina1807/CondinGo.git
19 |    cd CondinGo
20 |    ```
21 | 
22 | 2. **Install Dependencies:**
23 |    ```bash
24 |    npm install
25 |    ```
26 | 
27 | 3. **Run the Application:**
28 |    ```bash
29 |    npm start
30 |    ```
31 | 
32 | 4. **Open in Browser:**
33 |    Visit `http://localhost:3000` in your web browser.
34 | 
35 | ## Technologies Used
36 | 
37 | - [ReactJS](https://reactjs.org/)
38 | - [Tailwind CSS](https://tailwindcss.com/)
39 | - [Monaco Code Editor](https://microsoft.github.io/monaco-editor/)
40 | - [Judge0 API](https://www.judge0.com/)
41 | - [RapidAPI](https://rapidapi.com/)
42 | 
43 | ## Contributing
44 | 
45 | We welcome contributions! If you find any issues or have suggestions for improvement, please open an issue or create a pull request.
46 | 
47 | ## License
48 | 
49 | This project is licensed under the [MIT License](LICENSE.md).
50 | 


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | 
 3 | export default function NavBar() {
 4 |     const [isOpen, setIsOpen] = useState(false);
 5 | 
 6 |     const toggleMenu = () => {
 7 |         setIsOpen(!isOpen);
 8 |     };
 9 | 
10 |     return (
11 |         <div className='bg-[#5252D4] w-full h-15 flex lg:justify-around items-center text-white font-montserrat text-base font-normal leading-normal relative'>
12 |             <div className='w-36 h-16 shadow-[5px_5px_0px_0px_rgba(0,0,0)] lg:mx-40 flex-shrink-0 rounded-b-lg bg-gray-200 flex justify-center items-center'>
13 |                 <h1 className="text-[#5252D4] font-montserrat text-2xl font-bold leading-[1.309] tracking-[0.48]">CodinGo</h1>
14 |             </div>
15 |             <div className={`lg:flex text-white lg:flex-row top-12 lg:top-0 lg:items-center lg:justify-around lg:space-x-4 absolute left-0 right-0 bg-[#5252D4] lg:bg- z-50 ${isOpen ? 'flex flex-col' : 'hidden'} lg:relative lg:flex-row lg:visible w-full lg:z-0`}>
16 |                 <p className='lg:py-0 font-semibold py-2 lg:px-0 md:text-xl px-4 text-center lg:text-left'>Compile and Execute codes in 40+ languages</p>
17 |             </div>
18 |             <div className='lg:hidden absolute top-3 right-3' onClick={toggleMenu}>
19 |                 <svg
20 |                     className='w-6 h-6 cursor-pointer'
21 |                     fill='none'
22 |                     strokeLinecap='round'
23 |                     strokeLinejoin='round'
24 |                     strokeWidth='2'
25 |                     viewBox='0 0 24 24'
26 |                     stroke='currentColor'
27 |                 >
28 |                     {isOpen ? (
29 |                         <path d='M6 18L18 6M6 6l12 12' />
30 |                     ) : (
31 |                         <path d='M4 6h16M4 12h16m-7 6h7' />
32 |                     )}
33 |                 </svg>
34 |             </div>
35 |         </div>
36 |     );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/lib/defineTheme.js:
--------------------------------------------------------------------------------
 1 | import { loader } from "@monaco-editor/react";
 2 | 
 3 | const monacoThemes = {
 4 |   active4d: "Active4D",
 5 |   "all-hallows-eve": "All Hallows Eve",
 6 |   amy: "Amy",
 7 |   "birds-of-paradise": "Birds of Paradise",
 8 |   blackboard: "Blackboard",
 9 |   "brilliance-black": "Brilliance Black",
10 |   "brilliance-dull": "Brilliance Dull",
11 |   "chrome-devtools": "Chrome DevTools",
12 |   "clouds-midnight": "Clouds Midnight",
13 |   clouds: "Clouds",
14 |   cobalt: "Cobalt",
15 |   dawn: "Dawn",
16 |   dreamweaver: "Dreamweaver",
17 |   eiffel: "Eiffel",
18 |   "espresso-libre": "Espresso Libre",
19 |   github: "GitHub",
20 |   idle: "IDLE",
21 |   katzenmilch: "Katzenmilch",
22 |   "kuroir-theme": "Kuroir Theme",
23 |   lazy: "LAZY",
24 |   "magicwb--amiga-": "MagicWB (Amiga)",
25 |   "merbivore-soft": "Merbivore Soft",
26 |   merbivore: "Merbivore",
27 |   "monokai-bright": "Monokai Bright",
28 |   monokai: "Monokai",
29 |   "night-owl": "Night Owl",
30 |   "oceanic-next": "Oceanic Next",
31 |   "pastels-on-dark": "Pastels on Dark",
32 |   "slush-and-poppies": "Slush and Poppies",
33 |   "solarized-dark": "Solarized-dark",
34 |   "solarized-light": "Solarized-light",
35 |   spacecadet: "SpaceCadet",
36 |   sunburst: "Sunburst",
37 |   "textmate--mac-classic-": "Textmate (Mac Classic)",
38 |   "tomorrow-night-blue": "Tomorrow-Night-Blue",
39 |   "tomorrow-night-bright": "Tomorrow-Night-Bright",
40 |   "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
41 |   "tomorrow-night": "Tomorrow-Night",
42 |   tomorrow: "Tomorrow",
43 |   twilight: "Twilight",
44 |   "upstream-sunburst": "Upstream Sunburst",
45 |   "vibrant-ink": "Vibrant Ink",
46 |   "xcode-default": "Xcode_default",
47 |   zenburnesque: "Zenburnesque",
48 |   iplastic: "iPlastic",
49 |   idlefingers: "idleFingers",
50 |   krtheme: "krTheme",
51 |   monoindustrial: "monoindustrial",
52 | };
53 | 
54 | const defineTheme = (theme) => {
55 |   return new Promise((res) => {
56 |     Promise.all([
57 |       loader.init(),
58 |       import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
59 |     ]).then(([monaco, themeData]) => {
60 |       monaco.editor.defineTheme(theme, themeData);
61 |       res();
62 |     });
63 |   });
64 | };
65 | 
66 | export { defineTheme };
67 | 


--------------------------------------------------------------------------------
/src/constants/languageOptions.js:
--------------------------------------------------------------------------------
  1 | export const languageOptions = [
  2 |   {
  3 |     id: 63,
  4 |     name: "JavaScript (Node.js 12.14.0)",
  5 |     label: "JavaScript (Node.js 12.14.0)",
  6 |     value: "javascript",
  7 |   },
  8 |   {
  9 |     id: 45,
 10 |     name: "Assembly (NASM 2.14.02)",
 11 |     label: "Assembly (NASM 2.14.02)",
 12 |     value: "assembly",
 13 |   },
 14 |   {
 15 |     id: 46,
 16 |     name: "Bash (5.0.0)",
 17 |     label: "Bash (5.0.0)",
 18 |     value: "bash",
 19 |   },
 20 |   {
 21 |     id: 47,
 22 |     name: "Basic (FBC 1.07.1)",
 23 |     label: "Basic (FBC 1.07.1)",
 24 |     value: "basic",
 25 |   },
 26 |   {
 27 |     id: 75,
 28 |     name: "C (Clang 7.0.1)",
 29 |     label: "C (Clang 7.0.1)",
 30 |     value: "c",
 31 |   },
 32 |   {
 33 |     id: 76,
 34 |     name: "C++ (Clang 7.0.1)",
 35 |     label: "C++ (Clang 7.0.1)",
 36 |     value: "cpp",
 37 |   },
 38 |   {
 39 |     id: 48,
 40 |     name: "C (GCC 7.4.0)",
 41 |     label: "C (GCC 7.4.0)",
 42 |     value: "c",
 43 |   },
 44 |   {
 45 |     id: 52,
 46 |     name: "C++ (GCC 7.4.0)",
 47 |     label: "C++ (GCC 7.4.0)",
 48 |     value: "cpp",
 49 |   },
 50 |   {
 51 |     id: 49,
 52 |     name: "C (GCC 8.3.0)",
 53 |     label: "C (GCC 8.3.0)",
 54 |     value: "c",
 55 |   },
 56 |   {
 57 |     id: 53,
 58 |     name: "C++ (GCC 8.3.0)",
 59 |     label: "C++ (GCC 8.3.0)",
 60 |     value: "cpp",
 61 |   },
 62 |   {
 63 |     id: 50,
 64 |     name: "C (GCC 9.2.0)",
 65 |     label: "C (GCC 9.2.0)",
 66 |     value: "c",
 67 |   },
 68 |   {
 69 |     id: 54,
 70 |     name: "C++ (GCC 9.2.0)",
 71 |     label: "C++ (GCC 9.2.0)",
 72 |     value: "cpp",
 73 |   },
 74 |   {
 75 |     id: 86,
 76 |     name: "Clojure (1.10.1)",
 77 |     label: "Clojure (1.10.1)",
 78 |     value: "clojure",
 79 |   },
 80 |   {
 81 |     id: 51,
 82 |     name: "C# (Mono 6.6.0.161)",
 83 |     label: "C# (Mono 6.6.0.161)",
 84 |     value: "csharp",
 85 |   },
 86 |   {
 87 |     id: 77,
 88 |     name: "COBOL (GnuCOBOL 2.2)",
 89 |     label: "COBOL (GnuCOBOL 2.2)",
 90 |     value: "cobol",
 91 |   },
 92 |   {
 93 |     id: 55,
 94 |     name: "Common Lisp (SBCL 2.0.0)",
 95 |     label: "Common Lisp (SBCL 2.0.0)",
 96 |     value: "lisp",
 97 |   },
 98 |   {
 99 |     id: 56,
100 |     name: "D (DMD 2.089.1)",
101 |     label: "D (DMD 2.089.1)",
102 |     value: "d",
103 |   },
104 |   {
105 |     id: 57,
106 |     name: "Elixir (1.9.4)",
107 |     label: "Elixir (1.9.4)",
108 |     value: "elixir",
109 |   },
110 |   {
111 |     id: 58,
112 |     name: "Erlang (OTP 22.2)",
113 |     label: "Erlang (OTP 22.2)",
114 |     value: "erlang",
115 |   },
116 |   {
117 |     id: 44,
118 |     label: "Executable",
119 |     name: "Executable",
120 |     value: "exe",
121 |   },
122 |   {
123 |     id: 87,
124 |     name: "F# (.NET Core SDK 3.1.202)",
125 |     label: "F# (.NET Core SDK 3.1.202)",
126 |     value: "fsharp",
127 |   },
128 |   {
129 |     id: 59,
130 |     name: "Fortran (GFortran 9.2.0)",
131 |     label: "Fortran (GFortran 9.2.0)",
132 |     value: "fortran",
133 |   },
134 |   {
135 |     id: 60,
136 |     name: "Go (1.13.5)",
137 |     label: "Go (1.13.5)",
138 |     value: "go",
139 |   },
140 |   {
141 |     id: 88,
142 |     name: "Groovy (3.0.3)",
143 |     label: "Groovy (3.0.3)",
144 |     value: "groovy",
145 |   },
146 |   {
147 |     id: 61,
148 |     name: "Haskell (GHC 8.8.1)",
149 |     label: "Haskell (GHC 8.8.1)",
150 |     value: "haskell",
151 |   },
152 |   {
153 |     id: 62,
154 |     name: "Java (OpenJDK 13.0.1)",
155 |     label: "Java (OpenJDK 13.0.1)",
156 |     value: "java",
157 |   },
158 | 
159 |   {
160 |     id: 78,
161 |     name: "Kotlin (1.3.70)",
162 |     label: "Kotlin (1.3.70)",
163 |     value: "kotlin",
164 |   },
165 |   {
166 |     id: 64,
167 |     name: "Lua (5.3.5)",
168 |     label: "Lua (5.3.5)",
169 |     value: "lua",
170 |   },
171 | 
172 |   {
173 |     id: 79,
174 |     name: "Objective-C (Clang 7.0.1)",
175 |     label: "Objective-C (Clang 7.0.1)",
176 |     value: "objectivec",
177 |   },
178 |   {
179 |     id: 65,
180 |     name: "OCaml (4.09.0)",
181 |     label: "OCaml (4.09.0)",
182 |     value: "ocaml",
183 |   },
184 |   {
185 |     id: 66,
186 |     name: "Octave (5.1.0)",
187 |     label: "Octave (5.1.0)",
188 |     value: "octave",
189 |   },
190 |   {
191 |     id: 67,
192 |     name: "Pascal (FPC 3.0.4)",
193 |     label: "Pascal (FPC 3.0.4)",
194 |     value: "pascal",
195 |   },
196 |   {
197 |     id: 85,
198 |     name: "Perl (5.28.1)",
199 |     label: "Perl (5.28.1)",
200 |     value: "perl",
201 |   },
202 |   {
203 |     id: 68,
204 |     name: "PHP (7.4.1)",
205 |     label: "PHP (7.4.1)",
206 |     value: "php",
207 |   },
208 |   {
209 |     id: 43,
210 |     label: "Plain Text",
211 |     name: "Plain Text",
212 |     value: "text",
213 |   },
214 |   {
215 |     id: 69,
216 |     name: "Prolog (GNU Prolog 1.4.5)",
217 |     label: "Prolog (GNU Prolog 1.4.5)",
218 |     value: "prolog",
219 |   },
220 |   {
221 |     id: 70,
222 |     name: "Python (2.7.17)",
223 |     label: "Python (2.7.17)",
224 |     value: "python",
225 |   },
226 |   {
227 |     id: 71,
228 |     name: "Python (3.8.1)",
229 |     label: "Python (3.8.1)",
230 |     value: "python",
231 |   },
232 |   {
233 |     id: 80,
234 |     name: "R (4.0.0)",
235 |     label: "R (4.0.0)",
236 |     value: "r",
237 |   },
238 |   {
239 |     id: 72,
240 |     name: "Ruby (2.7.0)",
241 |     label: "Ruby (2.7.0)",
242 |     value: "ruby",
243 |   },
244 |   {
245 |     id: 73,
246 |     name: "Rust (1.40.0)",
247 |     label: "Rust (1.40.0)",
248 |     value: "rust",
249 |   },
250 |   {
251 |     id: 81,
252 |     name: "Scala (2.13.2)",
253 |     label: "Scala (2.13.2)",
254 |     value: "scala",
255 |   },
256 |   {
257 |     id: 82,
258 |     name: "SQL (SQLite 3.27.2)",
259 |     label: "SQL (SQLite 3.27.2)",
260 |     value: "sql",
261 |   },
262 |   {
263 |     id: 83,
264 |     name: "Swift (5.2.3)",
265 |     label: "Swift (5.2.3)",
266 |     value: "swift",
267 |   },
268 |   {
269 |     id: 74,
270 |     name: "TypeScript (3.7.4)",
271 |     label: "TypeScript (3.7.4)",
272 |     value: "typescript",
273 |   },
274 |   {
275 |     id: 84,
276 |     name: "Visual Basic.Net (vbnc 0.0.0.5943)",
277 |     label: "Visual Basic.Net (vbnc 0.0.0.5943)",
278 |     value: "vbnet",
279 |   },
280 | ];
281 | 


--------------------------------------------------------------------------------
/src/components/Landing.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import CodeEditorWindow from "./CodeEditorWindow";
  3 | import axios from "axios";
  4 | import { classnames } from "../utils/general";
  5 | import { languageOptions } from "../constants/languageOptions";
  6 | import { ToastContainer, toast } from "react-toastify";
  7 | import "react-toastify/dist/ReactToastify.css";
  8 | import { defineTheme } from "../lib/defineTheme";
  9 | import useKeyPress from "../hooks/useKeyPress";
 10 | import OutputWindow from "./OutputWindow";
 11 | import CustomInput from "./CustomInput";
 12 | import OutputDetails from "./OutputDetails";
 13 | import ThemeDropdown from "./ThemeDropdown";
 14 | import LanguagesDropdown from "./LanguagesDropdown";
 15 | import NavBar from "./Navbar";
 16 | 
 17 | const javascriptDefault = `console.log('Hello, World!')`
 18 | 
 19 | const Landing = () => {
 20 |   const [code, setCode] = useState(javascriptDefault);
 21 |   const [customInput, setCustomInput] = useState("");
 22 |   const [outputDetails, setOutputDetails] = useState(null);
 23 |   const [processing, setProcessing] = useState(null);
 24 |   const [theme, setTheme] = useState("cobalt");
 25 |   const [language, setLanguage] = useState(languageOptions[0]);
 26 | 
 27 |   const enterPress = useKeyPress("Enter");
 28 |   const ctrlPress = useKeyPress("Control");
 29 | 
 30 |   const onSelectChange = (sl) => {
 31 |     console.log("selected Option...", sl);
 32 |     setLanguage(sl);
 33 |   };
 34 | 
 35 |   useEffect(() => {
 36 |     if (enterPress && ctrlPress) {
 37 |       console.log("enterPress", enterPress);
 38 |       console.log("ctrlPress", ctrlPress);
 39 |       handleCompile();
 40 |     }
 41 |   }, [ctrlPress, enterPress]);
 42 |   const onChange = (action, data) => {
 43 |     switch (action) {
 44 |       case "code": {
 45 |         setCode(data);
 46 |         break;
 47 |       }
 48 |       default: {
 49 |         console.warn("case not handled!", action, data);
 50 |       }
 51 |     }
 52 |   };
 53 |   const handleCompile = () => {
 54 |     setProcessing(true);
 55 |     const formData = {
 56 |       language_id: language.id,
 57 |       // encode source code in base64
 58 |       source_code: btoa(code),
 59 |       stdin: btoa(customInput),
 60 |     };
 61 |     const options = {
 62 |       method: "POST",
 63 |       url: process.env.REACT_APP_RAPID_API_URL,
 64 |       params: { base64_encoded: "true", fields: "*" },
 65 |       headers: {
 66 |         "content-type": "application/json",
 67 |         "Content-Type": "application/json",
 68 |         "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
 69 |         "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
 70 |       },
 71 |       data: formData,
 72 |     };
 73 | 
 74 |     axios
 75 |       .request(options)
 76 |       .then(function (response) {
 77 |         console.log("res.data", response.data);
 78 |         const token = response.data.token;
 79 |         checkStatus(token);
 80 |       })
 81 |       .catch((err) => {
 82 |         let error = err.response ? err.response.data : err;
 83 |         // get error status
 84 |         let status = err.response.status;
 85 |         console.log("status", status);
 86 |         if (status === 429) {
 87 |           console.log("too many requests", status);
 88 | 
 89 |           showErrorToast(
 90 |             `Quota of 100 requests exceeded for the Day!`,
 91 |             10000
 92 |           );
 93 |         }
 94 |         setProcessing(false);
 95 |         console.log("catch block...", error);
 96 |       });
 97 |   };
 98 | 
 99 |   const checkStatus = async (token) => {
100 |     const options = {
101 |       method: "GET",
102 |       url: process.env.REACT_APP_RAPID_API_URL + "/" + token,
103 |       params: { base64_encoded: "true", fields: "*" },
104 |       headers: {
105 |         "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
106 |         "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
107 |       },
108 |     };
109 |     try {
110 |       let response = await axios.request(options);
111 |       let statusId = response.data.status?.id;
112 | 
113 |       // Processed - we have a result
114 |       if (statusId === 1 || statusId === 2) {
115 |         // still processing
116 |         setTimeout(() => {
117 |           checkStatus(token);
118 |         }, 2000);
119 |         return;
120 |       } else {
121 |         setProcessing(false);
122 |         setOutputDetails(response.data);
123 |         showSuccessToast(`Compiled Successfully!`);
124 |         console.log("response.data", response.data);
125 |         return;
126 |       }
127 |     } catch (err) {
128 |       console.log("err", err);
129 |       setProcessing(false);
130 |       showErrorToast();
131 |     }
132 |   };
133 | 
134 | 
135 |   function handleThemeChange(th) {
136 |     const theme = th;
137 |     console.log("theme...", theme);
138 | 
139 |     if (["light", "vs-dark"].includes(theme.value)) {
140 |       setTheme(theme);
141 |     } else {
142 |       defineTheme(theme.value).then((_) => setTheme(theme));
143 |     }
144 |   }
145 |   useEffect(() => {
146 |     defineTheme("oceanic-next").then((_) =>
147 |       setTheme({ value: "oceanic-next", label: "Oceanic Next" })
148 |     );
149 |   }, []);
150 | 
151 |   const showSuccessToast = (msg) => {
152 |     toast.success(msg || `Compiled Successfully!`, {
153 |       position: "top-right",
154 |       autoClose: 1000,
155 |       hideProgressBar: false,
156 |       closeOnClick: true,
157 |       pauseOnHover: true,
158 |       draggable: true,
159 |       progress: undefined,
160 |     });
161 |   };
162 |   const showErrorToast = (msg, timer) => {
163 |     toast.error(msg || `Something went wrong! Please try again.`, {
164 |       position: "top-right",
165 |       autoClose: timer ? timer : 1000,
166 |       hideProgressBar: false,
167 |       closeOnClick: true,
168 |       pauseOnHover: true,
169 |       draggable: true,
170 |       progress: undefined,
171 |     });
172 |   };
173 | 
174 |   return (
175 |     <>
176 |       <ToastContainer
177 |         position="top-right"
178 |         autoClose={2000}
179 |         hideProgressBar={false}
180 |         newestOnTop={false}
181 |         closeOnClick
182 |         rtl={false}
183 |         pauseOnFocusLoss
184 |         draggable
185 |         pauseOnHover
186 |       />
187 |       <NavBar handleThemeChange={handleThemeChange} />
188 |       <div className="flex flex-row gap-8 mt-4">
189 |         <div className="px-4 py-2 flex items-center gap-4">
190 |           <h1 className="text-xl font-bold text-gray-800">Change Language:</h1>
191 |           <LanguagesDropdown onSelectChange={onSelectChange} />
192 |         </div>
193 |         <div className="px-4 py-2 flex items-center gap-4">
194 |         <h1 className="text-xl font-bold text-gray-800">Change Theme:</h1>
195 |           <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
196 |         </div>
197 |       </div>
198 |       <div className="flex flex-row space-x-4 items-start px-4 py-4">
199 |       <div className="flex flex-col w-full h-full justify-start items-end">
200 |           <CodeEditorWindow
201 |             code={code}
202 |             onChange={onChange}
203 |             language={language?.value}
204 |             theme={theme.value}
205 |           />
206 |         </div>
207 | 
208 |         <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
209 |           <OutputWindow outputDetails={outputDetails} />
210 |           <div className="flex flex-col items-start">
211 |             <CustomInput
212 |               customInput={customInput}
213 |               setCustomInput={setCustomInput}
214 |             />
215 |             <div className="flex items-center gap-12">
216 |             <button
217 |               onClick={handleCompile}
218 |               disabled={!code}
219 |               className={classnames(
220 |                 "mt-4 border-2 border-black rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
221 |                 !code ? "opacity-50" : ""
222 |               )}
223 |             >
224 |               {processing ? "Processing..." : "Compile and Execute"}
225 |             </button>
226 |             {outputDetails && <OutputDetails outputDetails={outputDetails} />}
227 |             </div>
228 |           </div> 
229 |         </div>
230 |       </div>
231 |       <footer>
232 |         <div className="flex justify-center items-center">
233 |           <p className="text-gray-800 font-normal text-sm">
234 |             Made with love by <a className="text-indigo-600 font-semibold" href="https://github.com/ishitaraina1807" target="blank">Ishita Raina</a>
235 |           </p>
236 |         </div>
237 |       </footer>
238 |     </>
239 |   );
240 | };
241 | export default Landing;
242 | 


--------------------------------------------------------------------------------