├── .gitignore
├── README.md
├── api
├── app.js
├── index.js
├── modules
│ └── index.js
├── package.json
└── routes
│ └── index.js
├── judge
├── app.js
├── config.js
├── index.js
├── modules
│ ├── commands.js
│ ├── evaluateCode.js
│ ├── getData.js
│ └── runCode.js
├── package.json
└── routes
│ └── index.js
├── online-compiler
├── .eslintrc.json
├── README.md
├── components
│ ├── Login
│ │ ├── header
│ │ │ └── Header.js
│ │ └── signin
│ │ │ └── SigninComponent.js
│ ├── Problem
│ │ ├── description
│ │ │ └── DescriptionComponent.js
│ │ ├── hints
│ │ │ └── HintsComponent.js
│ │ ├── ide
│ │ │ ├── IdeComponent.js
│ │ │ └── modules.js
│ │ └── submission
│ │ │ └── SubmissionComponent.js
│ ├── loading
│ │ └── LoadingComponents.js
│ └── styles
│ │ ├── Description.module.css
│ │ ├── Header.module.css
│ │ ├── Hints.module.css
│ │ ├── Ide.module.css
│ │ ├── Signin.module.css
│ │ ├── Statement.module.css
│ │ ├── Submission.module.css
│ │ └── loading.module.css
├── modules
│ └── getData.js
├── next.config.js
├── package.json
├── pages
│ ├── [pid].js
│ ├── _app.js
│ └── index.js
├── public
│ ├── description.svg
│ ├── favicon.ico
│ └── vercel.svg
└── styles
│ ├── Home.module.css
│ ├── globals.css
│ └── pid.module.css
└── pictures
├── login.PNG
├── problem.png
├── problemList.PNG
└── screenshot.png
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | online-compiler/node_modules
3 | online-compiler/.pnp
4 | online-compiler/.pnp.js
5 |
6 | # testing
7 | online-compiler/coverage
8 |
9 | # next.js
10 | online-compiler/.next/
11 | online-compiler/out/
12 |
13 | # production
14 | online-compiler/build
15 |
16 | # misc
17 | online-compiler/.DS_Store
18 | online-compiler/*.pem
19 |
20 | # debug
21 | online-compiler/npm-debug.log*
22 | online-compiler/yarn-debug.log*
23 | online-compiler/yarn-error.log*
24 | online-compiler/.pnpm-debug.log*
25 |
26 | # local env files
27 | online-compiler/.env.local
28 | online-compiler/.env.development.local
29 | online-compiler/.env.test.local
30 | online-compiler/.env.production.local
31 | online-compiler/config.js
32 |
33 | # vercel
34 | online-compiler/.vercel
35 | online-compiler/yarn.lock
36 |
37 | # judge
38 | judge/.env
39 | judge/package-lock.json
40 | judge/yarn.lock
41 | judge/node_modules
42 |
43 | # api
44 | api/modules/online-compiler.json
45 | api/package-lock.json
46 | api/yarn.lock
47 | api/node_modules
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Leetcode Clone
2 |
3 | ## Description
4 |
5 | Online Judge Compiler is Leetcode tiny version. The app is divided in **Frontend ide**, **judge api** and **problem api**.
6 |
7 | ## Setup
8 |
9 | > api
10 |
11 | Default port: 5050
12 |
13 | The api is using firebase store as database, to store test cases and evaluator of each problem.
14 |
15 | Base structure
16 |
17 | ```javascript
18 | {
19 | "problems": {
20 | "name_problem_1": {
21 | "extension_language": [ /* ONLY C++ and Javascript are available (as cpp and js) */
22 | "simple test case",
23 | "evaluator code",
24 | "correct answer",
25 | "complete test case"
26 | ],
27 | }
28 | },
29 | "statements": {
30 | "name_problem_1": {
31 | "title": "Name Problem 1",
32 | "hints": [],
33 | "input": "simple test case",
34 | "statement": "html description problem",
35 | "templates": [
36 | "solution file empty for cpp",
37 | "solution file empty for js"
38 | ],
39 | }
40 | }
41 | }
42 | ```
43 |
44 | Include Service Account Key in /api/modules as "online-compiler.json"
45 |
46 | > judge
47 |
48 | Default port: 3080
49 |
50 | Judge api needs docker installed
51 |
52 | Create .env file with the following keys
53 |
54 | ```sh
55 | PROBLEM_API='your_api_url'
56 | JUDGE_PATH='your_path_to_store_the_code_of_users'
57 | ```
58 |
59 | > Client
60 |
61 | Export Firebase SDK app in /online-compiler/config.js
62 |
63 | Default port: 3000
64 |
65 | ## Install & Run
66 |
67 | Valid for each application
68 |
69 | ```sh
70 | yarn
71 | yarn dev
72 | ```
73 |
74 | ## Preview
75 |
76 | 
77 | 
78 | 
79 | 
80 |
--------------------------------------------------------------------------------
/api/app.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import cors from 'cors';
3 | import helmet from 'helmet';
4 | import routes from './routes/index.js';
5 | import firestore from './modules/index.js';
6 |
7 | const app = express();
8 |
9 | app.use(cors());
10 | app.use(helmet());
11 | app.use(express.json());
12 | app.use(express.urlencoded({ extended: true }));
13 | app.use('/', routes);
14 |
15 | (function () {
16 | const database = firestore();
17 | app.set('firestore', database);
18 | })();
19 |
20 | export default app;
21 |
--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
1 | import app from './app.js';
2 |
3 | const PORT = process.env.PORT || 5050;
4 |
5 | app.listen(PORT, () => console.log('[api] Running on port', PORT));
6 |
--------------------------------------------------------------------------------
/api/modules/index.js:
--------------------------------------------------------------------------------
1 | import { initializeApp, cert } from 'firebase-admin/app';
2 | import { getFirestore } from 'firebase-admin/firestore';
3 | import serviceAcc from './online-compiler.json';
4 |
5 | export default function firestore() {
6 | initializeApp({
7 | credential: cert(serviceAcc),
8 | });
9 |
10 | const db = getFirestore();
11 |
12 | return {
13 | async getProblem (id) {
14 | const docRef = await db.collection('problems').doc(id).get();
15 | return docRef._fieldsProto;
16 | },
17 |
18 | async getStatement (id) {
19 | const docRef = await db.collection('statements').doc(id).get();
20 | return docRef._fieldsProto;
21 | },
22 |
23 | async getProblemList () {
24 | const docRef = await db.collection('statements').get();
25 | return docRef;
26 | },
27 | };
28 | }
29 |
--------------------------------------------------------------------------------
/api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "api",
3 | "version": "1.0.0",
4 | "description": "api problems for judge",
5 | "type": "module",
6 | "main": "index.js",
7 | "scripts": {
8 | "dev": "node --experimental-json-modules index.js"
9 | },
10 | "license": "MIT",
11 | "dependencies": {
12 | "cors": "^2.8.5",
13 | "express": "^4.17.3",
14 | "firebase-admin": "^10.0.2",
15 | "helmet": "^5.0.2"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/api/routes/index.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 |
3 | const app = express.Router();
4 |
5 | app.get('/problems', async (req, res) => {
6 | const firestore = req.app.get('firestore');
7 |
8 | try {
9 | const problemList = await firestore.getProblemList();
10 | const statements = [];
11 |
12 | problemList.forEach((doc) => statements.push({ id: doc.id, title: doc.data().title }));
13 |
14 | res.json(statements);
15 | } catch (error) {
16 | res.sendStatus(404);
17 | }
18 | });
19 |
20 | app.get('/problem/:id', async (req, res) => {
21 | const { id } = req.params;
22 | const firestore = req.app.get('firestore');
23 |
24 | try {
25 | const statement = await firestore.getStatement(id);
26 |
27 | res.json(statement);
28 | } catch (error) {
29 | res.sendStatus(404);
30 | }
31 | });
32 |
33 | app.get('/evaluator/:id/:language/:mode', async (req, res) => {
34 | const { id, language, mode } = req.params;
35 | const firestore = req.app.get('firestore');
36 |
37 | try {
38 | const data = await firestore.getProblem(id);
39 | const evaluators = data[language].arrayValue.values;
40 |
41 | const evaluator = {
42 | evaluator: evaluators[1].stringValue.split('_n').join('\n'),
43 | correct: evaluators[2].stringValue.split('_n').join('\n'),
44 | input: mode === 'run' ? evaluators[0].stringValue : data.cpp.arrayValue.values[3].stringValue,
45 | };
46 |
47 | res.json(evaluator);
48 | } catch (error) {
49 | res.sendStatus(404);
50 | }
51 | });
52 |
53 | export default app;
54 |
--------------------------------------------------------------------------------
/judge/app.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import cors from 'cors';
3 | import helmet from 'helmet';
4 | import runCodeRoute from './routes/index.js';
5 |
6 | const app = express();
7 |
8 | app.use(cors());
9 | app.use(helmet());
10 | app.use(express.json());
11 | app.use(express.urlencoded({ extended: true }));
12 | app.use('/', runCodeRoute);
13 |
14 | export default app;
15 |
--------------------------------------------------------------------------------
/judge/config.js:
--------------------------------------------------------------------------------
1 | import 'dotenv/config';
2 |
3 | const vars = {
4 | problemApi: process.env.PROBLEM_API,
5 | judgePath: process.env.JUDGE_PATH,
6 | };
7 |
8 | export default vars;
9 |
--------------------------------------------------------------------------------
/judge/index.js:
--------------------------------------------------------------------------------
1 | import app from './app.js';
2 |
3 | const PORT = process.env.PORT || 3080;
4 | app.listen(PORT, () => console.log('[server] Running on port:', PORT));
5 |
--------------------------------------------------------------------------------
/judge/modules/commands.js:
--------------------------------------------------------------------------------
1 | export default function commands(path, id) {
2 | return {
3 | cpp: `docker run --rm -m 64M --memory-swap 64M --name ${id} -v ${path}:/code -w /code cpp /bin/sh -c "g++ -Wall main.cpp -o a && ./a >&1 | tee"`,
4 | js: `docker run --rm -m 64M --memory-swap 64M --name ${id} -v ${path}:/code -w /code node:current-alpine3.15 /bin/sh -c "node main.js"`,
5 | };
6 | }
7 |
--------------------------------------------------------------------------------
/judge/modules/evaluateCode.js:
--------------------------------------------------------------------------------
1 | import { createFolder, createFiles, runCode, deleteFolder } from './runCode.js';
2 | import commands from './commands.js';
3 | import config from '../config.js';
4 |
5 | const { judgePath } = config;
6 |
7 | export default async function evaluateCode(id, code, language, { evaluator, correct, input }) {
8 | const fullPath = `${judgePath}\\${id}`;
9 |
10 | try {
11 | const cmd = commands(fullPath, id)[language];
12 |
13 | await createFolder(judgePath, id);
14 | await createFiles(
15 | fullPath,
16 | { name: `\\input.txt`, string: input },
17 | { name: `\\main.${language}`, string: evaluator },
18 | { name: `\\Correct.${language}`, string: correct },
19 | { name: `\\Solution.${language}`, string: code },
20 | );
21 | const output = await runCode(cmd, 15000, id);
22 | await deleteFolder(fullPath);
23 |
24 | return output;
25 | } catch (error) {
26 | await deleteFolder(fullPath);
27 | if (typeof error === 'string')
28 | return error;
29 |
30 | return 'Out of Memory';
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/judge/modules/getData.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import config from '../config.js';
3 |
4 | const { problemApi } = config;
5 |
6 | export default async function getEvaluator(id, language, mode /* run | submit */) {
7 | return axios.get(`${problemApi}/evaluator/${id}/${language}/${mode}`);
8 | }
9 |
--------------------------------------------------------------------------------
/judge/modules/runCode.js:
--------------------------------------------------------------------------------
1 | import { writeFile } from 'fs';
2 | import { exec } from 'child_process';
3 |
4 | export const createFolder = (path, name) => {
5 | return new Promise((resolve, reject) => {
6 | exec(`cd ${path} && mkdir ${name}`, (err, _, __) => {
7 | if (err) return reject(err);
8 | resolve();
9 | });
10 | });
11 | };
12 |
13 | export const createFiles = (path, input, evaluator, correct, main) => {
14 | return new Promise((resolve, reject) => {
15 | const writeSolutionFile = () => {
16 | writeFile(path.concat(main.name), main.string, (err) => {
17 | if (err) return reject(err);
18 | resolve();
19 | });
20 | };
21 |
22 | const writeCorrectFile = () => {
23 | writeFile(path.concat(correct.name), correct.string, (err) => {
24 | if (err) return reject(err);
25 | writeSolutionFile();
26 | });
27 | };
28 |
29 | const writeEvaluatorFile = () => {
30 | writeFile(path.concat(evaluator.name), evaluator.string, (err) => {
31 | if (err) return reject(err);
32 | writeCorrectFile();
33 | });
34 | };
35 |
36 | const writeInputFile = () => {
37 | writeFile(path.concat(input.name), input.string, (err) => {
38 | if (err) return reject(err);
39 | writeEvaluatorFile();
40 | });
41 | };
42 |
43 | writeInputFile();
44 | });
45 | };
46 |
47 | export const runCode = (cmd, timeout, name) => {
48 | return new Promise((resolve, reject) => {
49 | exec(cmd, { timeout, killSignal: 'SIGKILL' }, (err, stdout, stderr) => {
50 | if (stderr) {
51 | if (stderr.startsWith('docker: Error response from daemon: OCI runtime'))
52 | reject('Out of Memory 64MB');
53 | else
54 | reject(stderr);
55 | }
56 |
57 | if (err) {
58 | if (err.killed) {
59 | exec(`docker kill ${name}`);
60 | resolve(`${stdout} \nTimeout after ${timeout}ms`)
61 | } else
62 | reject(err);
63 | } else {
64 | resolve(stdout);
65 | }
66 | });
67 | });
68 | };
69 |
70 | export const deleteFolder = (path) => {
71 | return new Promise((resolve, reject) => {
72 | exec(`rm -rf ${path}`, (err, _, __) => {
73 | if (err) return reject(err);
74 | resolve();
75 | });
76 | });
77 | };
78 |
--------------------------------------------------------------------------------
/judge/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "judge",
3 | "version": "1.0.0",
4 | "description": "jugde for online compiler",
5 | "main": "index.js",
6 | "type": "module",
7 | "scripts": {
8 | "dev": "node --experimental-json-modules index.js"
9 | },
10 | "license": "MIT",
11 | "private": true,
12 | "dependencies": {
13 | "axios": "^0.26.0",
14 | "cors": "^2.8.5",
15 | "dotenv": "^16.0.0",
16 | "express": "^4.17.3",
17 | "firebase-admin": "^10.0.2",
18 | "helmet": "^5.0.2"
19 | },
20 | "devDependencies": {
21 | "nodemon": "^2.0.15"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/judge/routes/index.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import getEvaluator from '../modules/getData.js';
3 | import evaluateCode from '../modules/evaluateCode.js';
4 |
5 | const app = express.Router();
6 |
7 | app.post('/', async (req, res) => {
8 | const { id, code, language, problem } = req.body;
9 |
10 | if (!id || !code || !language) { return res.sendStatus(400); }
11 |
12 | try {
13 | const getData = await getEvaluator(problem, language, 'run');
14 | const { evaluator, correct, input } = getData.data;
15 | const output = await evaluateCode(id, code, language, { evaluator, correct, input });
16 |
17 | res.json(output);
18 | } catch (error) {
19 | res.send(error);
20 | }
21 | });
22 |
23 | app.post('/judge', async (req, res) => {
24 | const { id, code, language, problem } = req.body;
25 |
26 | if (!id || !code || !language) { return res.sendStatus(400); }
27 |
28 | try {
29 | const getData = await getEvaluator(problem, language, 'submit');
30 | const { evaluator, correct, input } = getData.data;
31 | const output = await evaluateCode(id, code, language, { evaluator, correct, input });
32 |
33 | if (output.includes('correct:true'))
34 | res.send('Accepted');
35 | else if (output.includes('correct:false'))
36 | res.send('Wrong Answer');
37 | else if (output.includes('Timeout after'))
38 | res.send('Time Limited Exceded');
39 | else
40 | res.send(output);
41 | } catch (error) {
42 | await deleteFolder(fullPath);
43 | if (typeof error === 'string')
44 | return res.send(error);
45 |
46 | res.send('Out of Memory');
47 | }
48 | });
49 |
50 | export default app;
51 |
--------------------------------------------------------------------------------
/online-compiler/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/online-compiler/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/online-compiler/components/Login/header/Header.js:
--------------------------------------------------------------------------------
1 | import { signOut } from "firebase/auth";
2 | import styles from '../../styles/Header.module.css';
3 |
4 | export default function Header ({ auth, children }) {
5 | const handleClick = (e) => {
6 | e.preventDefault();
7 | const userLogout = confirm('Are you sure?');
8 |
9 | if (userLogout) {
10 | signOut(auth);
11 | }
12 | };
13 |
14 | return (
15 |
16 |
Logout
21 | {children}
22 |
24 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/online-compiler/components/Problem/description/DescriptionComponent.js:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import styles from '../../styles/Description.module.css';
3 |
4 | export default function DescriptionComponent({ children, title }) {
5 | return (
6 |
7 |
8 |
⬅ |
9 |
10 |
{title}
11 |
12 |
13 |
14 | {children}
15 |
16 |
16 | {hints.map((hint, index) => (
17 | handleToggle(index)}>
18 |
19 | 💡 {open[index] ? 'Hide' : 'Show'} hint #{index + 1}
20 |
21 | {hint}
22 |
23 | ))}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/online-compiler/components/Problem/ide/IdeComponent.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import Editor from '@monaco-editor/react';
3 | import SubmissionComponent from '../submission/SubmissionComponent';
4 | import styles from '../../styles/Ide.module.css';
5 | import { runCode, submitCode } from './modules';
6 |
7 | export default function IdeComponent({ templates, input, problemId, userId }) {
8 | // editor
9 | const [language, setLanguage] = useState('cpp');
10 | const [template, setTemplate] = useState('// some code here');
11 | const [theme, setTheme] = useState('vs-light');
12 | const [themeButton, setThemeButton] = useState('🌞');
13 | const [code, setCode] = useState('');
14 | const [extension, setExtension] = useState('cpp');
15 |
16 | // submissions
17 | const [loading, setLoading] = useState(false);
18 | const [submission, setSubmission] = useState('');
19 | const [result, setResults] = useState('');
20 | const [typeSubmission, setTypeSubmission] = useState('');
21 |
22 | useEffect(() => {
23 | setTemplate(templates[0] || '// some code here');
24 | setCode(templates[0] || '// some code here');
25 | }, [templates, input, problemId, userId]);
26 |
27 | const handleChangeTheme = (e) => {
28 | e.preventDefault();
29 |
30 | if (themeButton === '🌞') {
31 | setTheme('vs-dark');
32 | setThemeButton('🌙');
33 | return;
34 | }
35 | setTheme('vs-light');
36 | setThemeButton('🌞');
37 | };
38 |
39 | const handleChangeLanguage = (e) => {
40 | const lang = e.target.value;
41 | if (lang === 'js') {
42 | setExtension('js');
43 | setLanguage('javascript');
44 | setTemplate(templates[1]);
45 | setCode(templates[1]);
46 | } else if (lang === 'cpp') {
47 | setExtension('cpp');
48 | setLanguage('cpp');
49 | setTemplate(templates[0]);
50 | setCode(templates[0]);
51 | }
52 | };
53 |
54 | const handleRunCode = async () => {
55 | try {
56 | setLoading(true);
57 | await runCode(
58 | code,
59 | extension,
60 | problemId,
61 | setSubmission,
62 | setResults,
63 | setTypeSubmission,
64 | userId,
65 | );
66 | } finally {
67 | setLoading(false);
68 | }
69 | };
70 |
71 | const handleSubmitCode = async () => {
72 | try {
73 | setLoading(true);
74 | await submitCode(
75 | code,
76 | extension,
77 | problemId,
78 | setSubmission,
79 | setResults,
80 | setTypeSubmission,
81 | userId,
82 | );
83 | } finally {
84 | setLoading(false);
85 | }
86 | };
87 |
88 | return (
89 |
90 |
91 |
92 |
101 |
102 |
{themeButton}
103 |
104 |
105 |
setCode(value)}
112 | />
113 |
114 |
115 |
116 |
122 |
128 |
129 |
10 |
{typeSubmission} Code Status: {status}
11 |
12 | {status !== 'Pending' && !!output ? (
13 |
14 | {type === 'run' ? (
15 |
16 |
Input
17 |
{input.split('\n').map((str,i) =>
{str}
)}
18 |
19 | ) : null}
20 |
21 | {output ? (
22 |
23 |
Your Answer
24 |
{output.split('\n').map((str,i) =>
{str}
)}
25 |
26 | ) : null}
27 |
28 | ) : null}
29 |
23 | {!!statement.title && !loading ? (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
37 |
38 | ) : (
39 |
40 |
41 |
42 | )}
43 |
33 | {loading ? (
34 |
35 |
36 |
37 | ) : signinOrHome}
38 |
16 |
17 | Problems
18 |
19 | {loading ? (
20 |
21 |
22 |
23 | ) : (
24 |
25 | {statements.map((statement) => {
26 | return (
27 |
30 | );
31 | })}
32 |
33 | )}
34 |