├── public
    ├── _redirects
    └── images
    │   ├── c.png
    │   ├── go.png
    │   ├── cpp.png
    │   ├── java.png
    │   ├── logo.png
    │   ├── python.png
    │   ├── HomePage.png
    │   ├── javascript.png
    │   └── InterviewMode.png
├── .prettierrc
├── postcss.config.cjs
├── tailwind.config.cjs
├── src
    ├── data
    │   ├── languages.js
    │   └── boilerplate.js
    ├── styles
    │   ├── toastStyle.js
    │   ├── editorStyles.js
    │   └── selectStyle.js
    ├── components
    │   ├── Loading.jsx
    │   ├── InputTextArea.jsx
    │   ├── EditorComponent.jsx
    │   ├── ResetButton.jsx
    │   ├── SelectComponent.jsx
    │   ├── DownloadButton.jsx
    │   ├── OutputTextArea.jsx
    │   └── RunButton.jsx
    ├── main.jsx
    ├── hooks
    │   └── useLocalStorage.js
    ├── App.jsx
    ├── utils
    │   └── runCode.js
    ├── index.css
    └── pages
    │   └── Home.jsx
├── .gitignore
├── vercel.json
├── vite.config.js
├── .eslintrc.json
├── index.html
├── package.json
└── README.md


/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200


--------------------------------------------------------------------------------
/public/images/c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/c.png


--------------------------------------------------------------------------------
/public/images/go.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/go.png


--------------------------------------------------------------------------------
/public/images/cpp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/cpp.png


--------------------------------------------------------------------------------
/public/images/java.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/java.png


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/python.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/python.png


--------------------------------------------------------------------------------
/public/images/HomePage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/HomePage.png


--------------------------------------------------------------------------------
/public/images/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/javascript.png


--------------------------------------------------------------------------------
/public/images/InterviewMode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdityaPote/RCE70/HEAD/public/images/InterviewMode.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "trailingComma": "es5",
3 |     "tabWidth": 4,
4 |     "semi": false,
5 |     "singleQuote": true
6 | }
7 | 


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


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |     content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4 |     theme: {
5 |         extend: {},
6 |     },
7 |     plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/src/data/languages.js:
--------------------------------------------------------------------------------
 1 | const languages = [
 2 |     { value: 'javascript', label: 'JavaScript' },
 3 |     { value: 'python', label: 'Python' },
 4 |     { value: 'cpp', label: 'C++' },
 5 |     { value: 'c', label: 'C' },
 6 |     { value: 'java', label: 'Java' },
 7 | ]
 8 | 
 9 | export default languages
10 | 


--------------------------------------------------------------------------------
/src/styles/toastStyle.js:
--------------------------------------------------------------------------------
 1 | const toastStyles = {
 2 |     duration: 1500,
 3 |     style: {
 4 |         background: '#1c2333',
 5 |         padding: '0.75rem',
 6 |         color: '#fff',
 7 |         margin: '-0.25rem',
 8 |         height: '40px',
 9 |         borderRadius: '0.75rem',
10 |     },
11 | }
12 | 
13 | export default toastStyles
14 | 


--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import ClipLoader from 'react-spinners/ClipLoader'
 2 | 
 3 | const Loading = () => {
 4 |     return (
 5 |         <div className="flex justify-center items-center h-full w-full bg-[#1c2333] rounded-xl">
 6 |             <ClipLoader color="white" />
 7 |         </div>
 8 |     )
 9 | }
10 | 
11 | export default Loading
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .env


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom/client'
 2 | import App from './App'
 3 | import { BrowserRouter } from 'react-router-dom'
 4 | import './index.css'
 5 | import { Analytics } from '@vercel/analytics/react'
 6 | 
 7 | ReactDOM.createRoot(document.getElementById('root')).render(
 8 |     <>
 9 |         <BrowserRouter>
10 |             <App />
11 |         </BrowserRouter>
12 |         <Analytics />
13 |     </>
14 | )
15 | 


--------------------------------------------------------------------------------
/src/components/InputTextArea.jsx:
--------------------------------------------------------------------------------
 1 | const InputTextArea = ({ input, setInput }) => {
 2 |     return (
 3 |         <textarea
 4 |             className="block p-3 rounded-xl w-full h-full resize-none bg-[#1c2333]"
 5 |             placeholder="Input"
 6 |             spellCheck="false"
 7 |             value={input}
 8 |             onChange={(e) => setInput(e.target.value)}
 9 |         />
10 |     )
11 | }
12 | 
13 | export default InputTextArea
14 | 


--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | 
 3 | export function useLocalStorage(key, initialValue) {
 4 |     const [value, setValue] = useState(() => {
 5 |         const item = window.localStorage.getItem(key)
 6 |         return item ? JSON.parse(item) : initialValue
 7 |     })
 8 | 
 9 |     useEffect(() => {
10 |         localStorage.setItem(key, JSON.stringify(value))
11 |     }, [value])
12 | 
13 |     return [value, setValue]
14 | }
15 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "rewrites": [
 3 |         {
 4 |             "source": "/api/:path*",
 5 |             "destination": "https://n12rn0z2b4.execute-api.us-east-1.amazonaws.com/dev/api/:path*"
 6 |         },
 7 |         {
 8 |             "source": "/api/:path*/",
 9 |             "destination": "https://n12rn0z2b4.execute-api.us-east-1.amazonaws.com/dev/api/:path*/"
10 |         },
11 |         {
12 |             "source": "/(.*)",
13 |             "destination": "/index.html"
14 |         }
15 |     ]
16 | }


--------------------------------------------------------------------------------
/src/styles/editorStyles.js:
--------------------------------------------------------------------------------
 1 | export const customTheme = {
 2 |     base: 'vs-dark',
 3 |     inherit: true,
 4 |     rules: [],
 5 |     colors: {
 6 |         'editor.background': '#1c2333',
 7 |         'editor.lineHighlightBackground': '#00000000',
 8 |         'editor.lineHighlightBorder': '#00000000',
 9 |     },
10 | }
11 | 
12 | export const optionsEditor = {
13 |     fontFamily: 'Source Code Pro',
14 |     fontSize: 15,
15 |     scrollBeyondLastLine: false,
16 |     minimap: {
17 |         enabled: false,
18 |     },
19 | }
20 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | 
 4 | export default defineConfig(() => {
 5 |     return {
 6 |         plugins: [react()],
 7 |         server: {
 8 |             proxy: {
 9 |                 '/api': {
10 |                     target: 'https://n12rn0z2b4.execute-api.us-east-1.amazonaws.com/dev/',
11 |                     changeOrigin: true,
12 |                     secure: false,
13 |                 },
14 |             },
15 |         },
16 |     }
17 | })
18 | 


--------------------------------------------------------------------------------
/src/data/boilerplate.js:
--------------------------------------------------------------------------------
 1 | const boilerplate = {
 2 |     python: 'print("Hello Python World")',
 3 |     javascript: 'console.log("Hello JavaScript World")',
 4 |     cpp: '#include <iostream>\nusing namespace std;\n\nint main() {\n\n\tcout << "Hello C++ World";\n\n\treturn 0;\n}',
 5 |     c: '#include <stdio.h>\n\nint main() {\n\n\tprintf("Hello C World");\n\n\treturn 0;\n}',
 6 |     java: 'class Main {\n\n\tpublic static void main(String[] args) {\n\n\t\tSystem.out.println("Hello Java World");\n\n\t}\n}',
 7 | }
 8 | 
 9 | export default boilerplate
10 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
 3 |     "plugins": [],
 4 |     "parserOptions": {
 5 |         "ecmaVersion": 2022,
 6 |         "sourceType": "module",
 7 |         "ecmaFeatures": {
 8 |             "jsx": true
 9 |         }
10 |     },
11 |     "env": {
12 |         "browser": true,
13 |         "node": true,
14 |         "es6": true
15 |     },
16 |     "rules": {
17 |         //react in scope
18 |         "react/jsx-uses-react": "off",
19 |         "react/react-in-jsx-scope": "off"
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { Routes, Route } from 'react-router-dom'
 2 | import Home from './pages/Home'
 3 | import { Toaster } from 'react-hot-toast'
 4 | 
 5 | const App = () => {
 6 |     return (
 7 |         <>
 8 |             <Routes>
 9 |                 <Route path="/" element={<Home />} />
10 |                 <Route
11 |                     path="*"
12 |                     element={
13 |                         <h1 className="text-black flex h-screen items-center justify-center text-3xl font-semibold">
14 |                             404 Not Found
15 |                         </h1>
16 |                     }
17 |                 />
18 |             </Routes>
19 |             <Toaster />
20 |         </>
21 |     )
22 | }
23 | 
24 | export default App
25 | 


--------------------------------------------------------------------------------
/src/components/EditorComponent.jsx:
--------------------------------------------------------------------------------
 1 | import Editor from '@monaco-editor/react'
 2 | import { customTheme, optionsEditor } from '../styles/editorStyles'
 3 | 
 4 | const EditorComponent = ({ code, setCode, selectedLanguage }) => {
 5 |     return (
 6 |         <Editor
 7 |             height={'100%'}
 8 |             width={'100%'}
 9 |             language={selectedLanguage.value}
10 |             value={code}
11 |             onChange={(value) => setCode(value)}
12 |             beforeMount={(monaco) => {
13 |                 monaco.editor.defineTheme('customTheme', customTheme)
14 |                 monaco.editor.setTheme('customTheme')
15 |             }}
16 |             theme="customTheme"
17 |             options={optionsEditor}
18 |         />
19 |     )
20 | }
21 | 
22 | export default EditorComponent
23 | 


--------------------------------------------------------------------------------
/src/utils/runCode.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const runCode = async (code, selectedLanguage, input) => {
 4 |     try {
 5 |         let headersList = {
 6 |             Accept: '*/*',
 7 |             'Content-Type': 'application/json',
 8 |         }
 9 |         let bodyContent = JSON.stringify({
10 |             language: selectedLanguage.value,
11 |             code,
12 |             input,
13 |         })
14 |         let reqOptions = {
15 |             url: `/api/v1/code/exe-${selectedLanguage.value}`,
16 |             method: 'POST',
17 |             headers: headersList,
18 |             data: bodyContent,
19 |         }
20 |         let response = await axios.request(reqOptions)
21 |         return response
22 |     } catch (error) {
23 |         throw new Error(error.response.data.data)
24 |     }
25 | }
26 | 
27 | export default runCode
28 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |     .langauge-selector {
 7 |         @apply bg-slate-200 rounded py-1 px-2 cursor-pointer;
 8 |     }
 9 | }
10 | 
11 | body {
12 |     font-family: 'Source Code Pro', monospace;
13 |     color: white;
14 | }
15 | 
16 | textarea {
17 |     border: none;
18 |     overflow: auto;
19 |     outline: none;
20 |     cursor: auto;
21 | 
22 |     -webkit-box-shadow: none;
23 |     -moz-box-shadow: none;
24 |     box-shadow: none;
25 | }
26 | 
27 | ::-webkit-scrollbar {
28 |     background-color: #1c2333;
29 |     border-radius: 0.75rem;
30 | }
31 | 
32 | ::-webkit-scrollbar-thumb {
33 |     background-color: rgba(176, 176, 176, 0.28);
34 |     border-radius: 0.75rem;
35 |     border: 3px solid transparent;
36 |     background-clip: padding-box;
37 | }
38 | 
39 | ::-webkit-scrollbar-thumb:hover {
40 |     background-color: rgba(176, 176, 176, 0.4);
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/ResetButton.jsx:
--------------------------------------------------------------------------------
 1 | import toast from 'react-hot-toast'
 2 | import boilerplate from '../data/boilerplate'
 3 | import { TbArrowBackUp } from 'react-icons/tb'
 4 | import toastStyles from '../styles/toastStyle'
 5 | 
 6 | const ResetButton = ({
 7 |     setCode,
 8 |     setInput,
 9 |     setResult,
10 |     setError,
11 |     selectedLanguage,
12 | }) => {
13 |     const onClickReset = () => {
14 |         toast.dismiss()
15 |         setCode(boilerplate[selectedLanguage.value])
16 |         setInput('')
17 |         setResult('')
18 |         setError(false)
19 |         toast.success('Reset Successful', toastStyles)
20 |     }
21 | 
22 |     return (
23 |         <button
24 |             className="bg-[#1c2333] rounded-xl py-2 px-4 flex items-center justify-center gap-2"
25 |             onClick={onClickReset}
26 |         >
27 |             <TbArrowBackUp size={20} />
28 |             Reset
29 |         </button>
30 |     )
31 | }
32 | export default ResetButton
33 | 


--------------------------------------------------------------------------------
/src/components/SelectComponent.jsx:
--------------------------------------------------------------------------------
 1 | import Select from 'react-select'
 2 | import selectStyle from '../styles/selectStyle'
 3 | import languages from '../data/languages'
 4 | 
 5 | const SelectComponent = ({ selectedLanguage, setSelectedLanguage }) => {
 6 |     return (
 7 |         <Select
 8 |             value={selectedLanguage}
 9 |             options={languages}
10 |             formatOptionLabel={(language) => (
11 |                 <div className="flex gap-2 items-center ">
12 |                     <img
13 |                         src={`images/${language.value}.png`}
14 |                         className="w-4 h-4"
15 |                     />
16 |                     <span>{language.label}</span>
17 |                 </div>
18 |             )}
19 |             onChange={(selectedOption) => {
20 |                 setSelectedLanguage(selectedOption)
21 |             }}
22 |             styles={selectStyle}
23 |         />
24 |     )
25 | }
26 | 
27 | export default SelectComponent
28 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <link rel="icon" href="/images/logo.png" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <link rel="preconnect" href="https://fonts.googl  eapis.com" />
 8 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 9 |         <link
10 |             href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
11 |             rel="stylesheet"
12 |         />
13 |         <link
14 |             href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
15 |             rel="stylesheet"
16 |         />
17 |         <title>RCE70</title>
18 |     </head>
19 | 
20 |     <body>
21 |         <div id="root"></div>
22 |         <script type="module" src="/src/main.jsx"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/components/DownloadButton.jsx:
--------------------------------------------------------------------------------
 1 | import fileDownload from 'js-file-download'
 2 | import random from 'random'
 3 | import { TbDownload } from 'react-icons/tb'
 4 | 
 5 | const DownloadButton = ({ code, selectedLanguage }) => {
 6 |     const OnClickDownload = () => {
 7 |         const fileExtensions = {
 8 |             javascript: 'js',
 9 |             python: 'py',
10 |             java: 'java',
11 |             c: 'c',
12 |             cpp: 'cpp',
13 |         }
14 | 
15 |         const fileName = `${random.int(0, 1000000)}.${
16 |             fileExtensions[selectedLanguage.value]
17 |         }`
18 | 
19 |         fileDownload(code, fileName)
20 |     }
21 | 
22 |     return (
23 |         <button
24 |             onClick={OnClickDownload}
25 |             className="bg-[#1c2333] flex-grow-0 px-4 py-2 text-white rounded-xl text-sm mt-4 w-fit flex items-center justify-center gap-1 font-semibold"
26 |         >
27 |             Download
28 |             <TbDownload />
29 |         </button>
30 |     )
31 | }
32 | 
33 | export default DownloadButton
34 | 


--------------------------------------------------------------------------------
/src/components/OutputTextArea.jsx:
--------------------------------------------------------------------------------
 1 | const OuptutTextArea = ({ result, error, executionTime }) => {
 2 |     return (
 3 |         <div className="flex flex-col h-full">
 4 |             <div className="p-3 rounded-xl w-full bg-[#1c2333] rounded-b-none border-b-2 border-b-[#0f1327] flex justify-between">
 5 |                 <div className="font-semibold">Output</div>
 6 |                 {error ? (
 7 |                     <span className="text-red-500 font-semibold">
 8 |                         Code execution failed
 9 |                     </span>
10 |                 ) : (
11 |                     <span className="text-green-500 font-semibold">
12 |                         No errors detected {`(${executionTime}ms)`}
13 |                     </span>
14 |                 )}
15 |             </div>
16 |             <textarea
17 |                 className="p-3 rounded-xl w-full h-full resize-none bg-[#1c2333] rounded-t-none"
18 |                 readOnly
19 |                 placeholder="Output"
20 |                 value={result}
21 |             />
22 |         </div>
23 |     )
24 | }
25 | 
26 | export default OuptutTextArea
27 | 


--------------------------------------------------------------------------------
/src/styles/selectStyle.js:
--------------------------------------------------------------------------------
 1 | const selectStyle = {
 2 |     indicatorSeparator: (provided) => ({
 3 |         ...provided,
 4 |         display: 'none',
 5 |     }),
 6 |     menu: (provided) => ({
 7 |         ...provided,
 8 |         color: 'white',
 9 |         border: 'none',
10 |         borderRadius: 8,
11 |         backgroundColor: '#1c2333',
12 |     }),
13 |     menuList: (provided) => ({
14 |         ...provided,
15 |         color: 'white',
16 |         border: 'none',
17 |         borderRadius: 8,
18 |         cursor: 'pointer',
19 |     }),
20 |     control: (provided) => ({
21 |         ...provided,
22 |         width: 200,
23 |         backgroundColor: '#1c2333',
24 |         color: 'white',
25 |         border: 'none',
26 |         borderRadius: 8,
27 |         cursor: 'pointer',
28 |     }),
29 |     singleValue: (provided) => ({
30 |         ...provided,
31 |         color: 'white',
32 |     }),
33 |     option: (provided, state) => ({
34 |         ...provided,
35 |         backgroundColor: state.isSelected
36 |             ? '#1c2365'
37 |             : state.isFocused
38 |               ? '#1c2350'
39 |               : '#1c2333',
40 |         color: 'white',
41 |         cursor: 'pointer',
42 |     }),
43 | }
44 | 
45 | export default selectStyle
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "rce-frontend-70",
 3 |     "private": true,
 4 |     "version": "0.0.0",
 5 |     "type": "module",
 6 |     "scripts": {
 7 |         "dev": "vite",
 8 |         "build": "vite build",
 9 |         "preview": "vite preview"
10 |     },
11 |     "dependencies": {
12 |         "@monaco-editor/react": "^4.4.6",
13 |         "@vercel/analytics": "^1.1.2",
14 |         "axios": "^1.2.3",
15 |         "dotenv": "^16.3.1",
16 |         "js-file-download": "^0.4.12",
17 |         "prettier": "^3.1.1",
18 |         "prismjs": "^1.29.0",
19 |         "random": "^4.1.0",
20 |         "react": "^18.2.0",
21 |         "react-dom": "^18.2.0",
22 |         "react-hot-toast": "^2.4.0",
23 |         "react-icons": "^4.7.1",
24 |         "react-router-dom": "^6.6.2",
25 |         "react-select": "^5.7.0",
26 |         "react-spinners": "^0.13.8"
27 |     },
28 |     "devDependencies": {
29 |         "@types/react": "^18.0.26",
30 |         "@types/react-dom": "^18.0.9",
31 |         "@vitejs/plugin-react": "^3.0.0",
32 |         "autoprefixer": "^10.4.13",
33 |         "eslint": "^8.32.0",
34 |         "eslint-config-prettier": "^8.6.0",
35 |         "eslint-plugin-react": "^7.32.1",
36 |         "postcss": "^8.4.21",
37 |         "tailwindcss": "^3.2.4",
38 |         "vite": "^4.0.0"
39 |     }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/RunButton.jsx:
--------------------------------------------------------------------------------
 1 | import { toast } from 'react-hot-toast'
 2 | import { BsFillPlayFill } from 'react-icons/bs'
 3 | import toastStyles from '../styles/toastStyle'
 4 | import runCode from '../utils/runCode'
 5 | 
 6 | const RunButton = ({
 7 |     setError,
 8 |     setLoading,
 9 |     code,
10 |     selectedLanguage,
11 |     input,
12 |     setResult,
13 |     buttonRef,
14 |     setExecutionTime,
15 | }) => {
16 |     const onClickRun = async () => {
17 |         setError(false)
18 |         toast.dismiss()
19 |         setLoading(true)
20 |         try {
21 |             const response = await runCode(code, selectedLanguage, input)
22 |             if (response.data.status === true) {
23 |                 toast.success('Code executed', toastStyles)
24 |                 setResult(response.data.data)
25 |                 setExecutionTime(response.data.executionTime)
26 |             }
27 |         } catch (error) {
28 |             setError(true)
29 |             toast.error('Code execution failed', toastStyles)
30 |             setResult(error)
31 |             setExecutionTime(0)
32 |         }
33 |         setLoading(false)
34 |     }
35 | 
36 |     return (
37 |         <button
38 |             ref={buttonRef}
39 |             onClick={onClickRun}
40 |             className="bg-green-700 flex-grow-0 px-4 py-2 text-white rounded-xl font-medium text-sm mt-4 w-fit hover:bg-green-800 flex items-center justify-center gap-1 ml-auto"
41 |         >
42 |             Run
43 |             <BsFillPlayFill />
44 |         </button>
45 |     )
46 | }
47 | 
48 | export default RunButton
49 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef } from 'react'
  2 | import { useLocalStorage } from '../hooks/useLocalStorage'
  3 | import EditorComponent from '../components/EditorComponent'
  4 | import SelectComponent from '../components/SelectComponent'
  5 | import Loading from '../components/Loading'
  6 | import OuptutTextArea from '../components/OutputTextArea'
  7 | import InputTextArea from '../components/InputTextArea'
  8 | import RunButton from '../components/RunButton'
  9 | import boilerplate from '../data/boilerplate'
 10 | import ResetButton from '../components/ResetButton'
 11 | import DownloadButton from '../components/DownloadButton'
 12 | 
 13 | const Home = () => {
 14 |     const [input, setInput] = useState('')
 15 |     const [result, setResult] = useState('')
 16 |     const [executionTime, setExecutionTime] = useState(0)
 17 |     const [error, setError] = useState(false)
 18 |     const [loading, setLoading] = useState(false)
 19 | 
 20 |     const buttonRef = useRef(null)
 21 | 
 22 |     const [selectedLanguage, setSelectedLanguage] = useLocalStorage(
 23 |         'selected-language',
 24 |         {
 25 |             value: 'javascript',
 26 |             label: 'JavaScript',
 27 |         }
 28 |     )
 29 | 
 30 |     const [code, setCode] = useLocalStorage(
 31 |         selectedLanguage.value,
 32 |         boilerplate[selectedLanguage.value]
 33 |     )
 34 | 
 35 |     useEffect(() => {
 36 |         const storedCode = localStorage.getItem(selectedLanguage.value)
 37 |         if (storedCode) {
 38 |             setCode(JSON.parse(storedCode))
 39 |         } else setCode(boilerplate[selectedLanguage.value])
 40 |     }, [selectedLanguage])
 41 | 
 42 |     useEffect(() => {
 43 |         const handleKeyDown = (e) => {
 44 |             if (e.key === 'Enter' && e.altKey) {
 45 |                 buttonRef.current.click()
 46 |             }
 47 |         }
 48 |         document.addEventListener('keydown', handleKeyDown)
 49 |         return () => document.removeEventListener('keydown', handleKeyDown)
 50 |     }, [])
 51 | 
 52 |     return (
 53 |         <div className="h-screen gap-1 p-3 grid grid-cols-2 grid-rows-[3em_calc(48%-3em)_calc(48%-3em)_3.5em] bg-[#0f1327]">
 54 |             <div className="flex gap-2 items-center col-span-2">
 55 |                 <SelectComponent
 56 |                     selectedLanguage={selectedLanguage}
 57 |                     setSelectedLanguage={setSelectedLanguage}
 58 |                 />
 59 |                 <ResetButton
 60 |                     setCode={setCode}
 61 |                     setInput={setInput}
 62 |                     setResult={setResult}
 63 |                     setError={setError}
 64 |                     selectedLanguage={selectedLanguage}
 65 |                 />
 66 |             </div>
 67 |             <div className="h-full p-3 rounded-xl col-span-2 md:row-span-2 md:col-span-1 bg-[#1c2333]">
 68 |                 <EditorComponent
 69 |                     code={code}
 70 |                     setCode={setCode}
 71 |                     selectedLanguage={selectedLanguage}
 72 |                 />
 73 |             </div>
 74 |             <InputTextArea input={input} setInput={setInput} />
 75 |             <div className="rounded-xl w-full h-full">
 76 |                 {loading ? (
 77 |                     <Loading />
 78 |                 ) : (
 79 |                     <OuptutTextArea
 80 |                         result={result}
 81 |                         error={error}
 82 |                         executionTime={executionTime}
 83 |                     />
 84 |                 )}
 85 |             </div>
 86 |             <DownloadButton code={code} selectedLanguage={selectedLanguage} />
 87 |             <RunButton
 88 |                 buttonRef={buttonRef}
 89 |                 setError={setError}
 90 |                 setLoading={setLoading}
 91 |                 code={code}
 92 |                 selectedLanguage={selectedLanguage}
 93 |                 input={input}
 94 |                 setResult={setResult}
 95 |                 setExecutionTime={setExecutionTime}
 96 |             />
 97 |         </div>
 98 |     )
 99 | }
100 | 
101 | export default Home
102 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <br />
  2 | <div align="center">
  3 |       <img src="public/images/logo.png" alt="Logo" height="80">
  4 | 
  5 | <h3 align="center">
  6 |   <a href="https://rce70.vercel.app/">
  7 |       RCE70
  8 |   </a>
  9 | </h3>
 10 | 
 11 |   <p align="center">
 12 |       Remote Code Executor
 13 |    <br />
 14 | </div>
 15 | 
 16 | ## About The Project
 17 | 
 18 | [![Product Name Screen Shot][product-screenshot]](https://rce70.vercel.app/)
 19 | 
 20 | Users can run code on the web without having to install any IDE or text editor. And it's free! The user can also download the code. The app currently supports 5 languages, C++, C, Python, Java and Javascript. The app is hosted on Vercel. The app is also serverless, and uses AWS Lamda to run the code.
 21 | 
 22 | ## Tools Used
 23 | 
 24 | [![Neact][node.js]][node-url]
 25 | [![Express][express.js]][express-url]
 26 | [![React][react.js]][react-url]
 27 | [![Tailwind][tailwind]][tailwind-url]
 28 | [![AWS][aws]][aws-url]
 29 | [![Vercel][vercel]][vercel-url]
 30 | [![Vite][vite]][vite-url]
 31 | [![React Router][react-router]][react-router-url]
 32 | 
 33 | ## Packages Used
 34 | 
 35 | 1. Axios
 36 | 2. Monaco Editor
 37 | 3. React Hot Toast
 38 | 4. React Icons
 39 | 5. React Select
 40 | 6. React Spinners
 41 | 7. js-file-download
 42 | 
 43 | ## Live Demo
 44 | 
 45 | https://rce70.vercel.app : Frontend hosted on Vercel, and uses AWS Lamda serverless service
 46 | 
 47 | ## Main Features
 48 | 
 49 | 1. Multiple language support
 50 | 
 51 |     ![javascript]
 52 |     ![python]
 53 |     ![c++]
 54 |     ![c]
 55 |     ![java]
 56 | 
 57 | 2. There are three text editors, one for the code, one for the input and one for the output
 58 | 
 59 | 3. The code can be run using the Run button or <kbd>Alt</kbd> + <kbd>Enter</kbd> key
 60 | 
 61 | 4. The code automatically get saved in the local storage, so that the user can continue from where he left
 62 | 
 63 | 5. The user can reset the code using the Reset button
 64 | 
 65 | 6. The user can download the code using the Download button
 66 | 
 67 | ## Thought behind the project
 68 | 
 69 | 1. Researchers could use a Remote Code Executor app to test the security of different applications or systems, without having to run potentially dangerous code on their own machines.
 70 | 
 71 | 2. Developers could use a Remote Code Executor app to quickly test code snippets or entire applications in a controlled environment, without having to set up a local development environment.
 72 | 
 73 | 3. A Remote Code Executor app could be useful for teaching coding concepts and techniques, particularly for online courses or tutorials. Students could experiment with different code examples and receive immediate feedback, without having to install anything locally.
 74 | 
 75 | ## Working
 76 | 
 77 | 1. The user writes the code in the code editor
 78 | 
 79 | 2. The user gives the input in the input editor
 80 | 
 81 | 3. The user clicks on the Run button or presses <kbd>Alt</
 82 |    kbd> + <kbd>Enter</kbd> key
 83 | 
 84 | 4. The code is sent to the server.
 85 | 
 86 | 5. The server creates a random file name and saves the code
 87 |    and input in the file with the respective extensions.
 88 | 
 89 | 6. The server runs the code using the respective compiler or
 90 |    interpreter, with a timeout of 10 seconds.
 91 | 
 92 | 7. The server sends the status, data and execution time to
 93 |    the client.
 94 | 
 95 | 8. The client displays the output (or error if any) and
 96 |    execution time in the output editor.
 97 | 
 98 | ## Getting Started
 99 | 
100 | ### Installation through Source Code
101 | 
102 | 1. Clone the repository
103 | 
104 |     ```sh
105 |     git clone https://github.com/suyashvsingh/rce70-client.git
106 |     ```
107 | 
108 | 2. Install NPM packages
109 | 
110 |     ```sh
111 |     npm install
112 |     ```
113 | 
114 | 3. Start the application
115 | 
116 |     ```sh
117 |     npm run dev
118 |     ```
119 | 
120 | 4. Application will run on PORT 5173
121 | 
122 | 5. Write the code, and give any input (if required)
123 | 
124 | 6. Run the code using Run button or <kbd>Alt</kbd> + <kbd>Enter</kbd> key
125 | 
126 | ## Team 😃
127 | 
128 | Made with love by:
129 | 
130 | 1. Sanket Diwate (2020IMT-031)
131 | 2. Ketan Prakash (2020IMT-044)
132 | 3. Aditya Pote (2020IMT-069)
133 | 4. Suyash Vikram Singh (2020IMT-104)
134 | 
135 | [product-screenshot]: public/images/HomePage.png
136 | [react.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
137 | [react-url]: https://reactjs.org/
138 | [node.js]: https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white
139 | [node-url]: https://nodejs.org/en/
140 | [express.js]: https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white
141 | [express-url]: https://expressjs.com/
142 | [tailwind]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white
143 | [tailwind-url]: https://tailwindcss.com/
144 | [aws]: https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&logo=amazon-aws&logoColor=white
145 | [aws-url]: https://aws.amazon.com/
146 | [vercel]: https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white
147 | [vercel-url]: https://www.vercel.com/
148 | [vite]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white
149 | [vite-url]: https://vitejs.dev/
150 | [react-router]: https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white
151 | [react-router-url]: https://reactrouter.com/en/main
152 | [c++]: https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white
153 | [c]: https://img.shields.io/badge/c-%2300599C.svg?style=for-the-badge&logo=c&logoColor=white
154 | [python]: https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54
155 | [javascript]: https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E
156 | [java]: https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=java&logoColor=white
157 | 


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