{"id":18821416,"url":"https://github.com/dhanushnehru/customcodeeditor","last_synced_at":"2025-04-09T13:11:19.023Z","repository":{"id":238162587,"uuid":"792172360","full_name":"DhanushNehru/CustomCodeEditor","owner":"DhanushNehru","description":"A web-based tool that allows users to write, test, and execute code in various programming languages seamlessly","archived":false,"fork":false,"pushed_at":"2024-10-18T06:13:02.000Z","size":1904,"stargazers_count":30,"open_issues_count":26,"forks_count":35,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-19T02:27:21.263Z","etag":null,"topics":["codecompiler","codeeditor","contributions-welcome","css","customcode","customcodeeditor","firsttimers","goodfirstissue","hacktoberfest","hacktoberfest-accepted","hacktoberfest2024-accepted","html","javascript","judge0","monaco-editor","opensource","opensourcecontribution","python","rapidapi","react"],"latest_commit_sha":null,"homepage":"https://custom-code-editor.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DhanushNehru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["DhanushNehru"],"patreon":"dhanushnehru","open_collective":null,"ko_fi":"dhanushnehru","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"polar":null,"custom":null}},"created_at":"2024-04-26T06:00:05.000Z","updated_at":"2024-10-18T06:13:06.000Z","dependencies_parsed_at":"2024-07-06T11:23:03.466Z","dependency_job_id":"f7d00248-ea4f-4051-b4a7-f468fc32fe5e","html_url":"https://github.com/DhanushNehru/CustomCodeEditor","commit_stats":null,"previous_names":["dhanushnehru/customcodeeditor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DhanushNehru%2FCustomCodeEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DhanushNehru%2FCustomCodeEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DhanushNehru%2FCustomCodeEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DhanushNehru%2FCustomCodeEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DhanushNehru","download_url":"https://codeload.github.com/DhanushNehru/CustomCodeEditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045247,"owners_count":21038554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codecompiler","codeeditor","contributions-welcome","css","customcode","customcodeeditor","firsttimers","goodfirstissue","hacktoberfest","hacktoberfest-accepted","hacktoberfest2024-accepted","html","javascript","judge0","monaco-editor","opensource","opensourcecontribution","python","rapidapi","react"],"created_at":"2024-11-08T00:41:05.808Z","updated_at":"2025-04-09T13:11:19.005Z","avatar_url":"https://github.com/DhanushNehru.png","language":"JavaScript","readme":"# Custom Code Editor\n\u003cp align=middle\u003e\n\u003cimg src=\"./banner.svg\" height=\"200\" alt=\"Custom Code Editor\"/\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n[![Join Our Discord](https://img.shields.io/badge/Discord-Join%20Server-blue?logo=discord\u0026style=for-the-badge)](https://discord.com/invite/Yn9g6KuWyA)\n[![Subscribe on YouTube](https://img.shields.io/badge/YouTube-Subscribe-red?logo=youtube\u0026style=for-the-badge)](https://www.youtube.com/@dhanushnehru?sub_confirmation=1)\n[![Subscribe to Newsletter](https://img.shields.io/badge/Newsletter-Subscribe-orange?style=for-the-badge)](https://dhanushn.substack.com/)\n\n\u003c/div\u003e\n\n\nThis project is a React-based code builder that utilizes the Monaco Editor. It allows users to write and execute code snippets within a web browser. It uses Judge0 as a code execution system\n\n## Getting Started\nFollow these instructions to get the project up and running on your local machine.\n\n## Prerequisites\nNode.js installed on your machine\nnpm or yarn package manager\n\n## Installation\nClone the repository to your local machine:\n\n```\ngit clone https://github.com/DhanushNehru/CustomCodeEditor\n```\n- Note:- Please fill in the necessary keys in the `.env` file for successful code submissions\n# Without Docker\nInstall dependencies using npm or yarn:\nbash\n```\nnpm install\n# or\nyarn install\n```\n\nTo Start project\n```\nnpm run start\n```\n# With Docker\n## Prerequisites\nBefore starting with the project, ensure you have Docker installed. If not, follow these steps to install Docker:\n\n### Docker Installation\n\n1. **Windows**: \n   - Download Docker Desktop from [Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-windows).\n   - Follow the installation instructions.\n\n2. **Mac**:\n   - Download Docker Desktop from [Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-mac).\n   - Follow the installation instructions.\n\n3. **Linux**:\n   - Docker Engine installation varies by Linux distribution. Refer to [Docker's official documentation](https://docs.docker.com/engine/install/) for installation instructions specific to your Linux distribution.\n\nTo start the project using Docker Compose:\n1. Build and run the project:\n   ```bash\n   #Detach mode\n   docker-compose up -d\n   ```\n   ```\n   docker-compose up\n   ```\n2. Access the project:\n   - Once Docker Compose has started the containers, access the project using your web browser at `http://localhost:3000`.\n\n3. Close project\n   ```\n   docker-compose down\n   ```\n\n## Setting Up Judge0 with RapidAPI\n\n1. **Navigate to Judge0**:\n   - Start by going to the [Judge0 page on RapidAPI](https://rapidapi.com/judge0-official/api/judge0-ce).\n   - Select the **Basic Plan**, which offers a limit of 50 requests per day.\n\n2. **Sign Up for the Basic Plan**:\n   - RapidAPI hosts Judge0, so you need to sign up for the Basic Plan on RapidAPI.\n   - Follow the sign-up process to get started.\n\n3. **Access the RapidAPI Dashboard**:\n   - After signing up, go to the [RapidAPI Dashboard](https://rapidapi.com/judge0-official/api/judge0-ce).\n   - In the navigation bar, select **API Hub**.\n\n4. **Navigate to the API's Section**:\n   - Click on **Endpoints** to view\n   - You will see multiple endpoints such as Submissions, About, and Languages.\n     \n5. **Using the Submissions Endpoint**:\n   - For code submissions, go to the **Submissions** endpoint and then select **Create Submission**.\n   - Here, you will find `X-RapidAPI-Key`, `X-RapidAPI-Host`, and the URL (`url`) needed for API calls. Url is located below the \"Code Snippets\" section.\n\n6. **Copy Required Keys**:\n   - Copy the `RAPIDAPI_HOST` and `RAPIDAPI_KEY` values. These are necessary to perform API calls to the code execution system.\n   - Ensure you have these keys saved as they will be used in your API requests.\n\nBy following these steps, you'll be able to set up Judge0 for code submissions using RapidAPI's infrastructure, enabling you to execute and evaluate code within your application.\n\n## Firebase Configuration\n\n1. Create a Firebase account at [firebase.google.com](https://firebase.google.com/) and go to the console.\n2. Go to Authentication.\n3. In Sign-in method, choose the Google provider.\n4. Go to settings and you'll see authorized domains.\n5. Add your production URL in authorized domains for our project: `https://custom-code-editor.vercel.app/`\n6. Create a `.env` file in your root directory and add these values:\n```\nREACT_APP_FIREBASE_API_KEY=\"\"\nREACT_APP_FIREBASE_AUTH_DOMAIN=\"\"\nREACT_APP_FIREBASE_PROJECT_ID=\"\"\nREACT_APP_FIREBASE_STORAGE_BUCKET=\"\"\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=\"\"\nREACT_APP_FIREBASE_APP_ID=\"\"\n```\n## GitHub Authentication Configuration\n\nTo enable GitHub authentication for the Custom Code Editor, follow these steps:\n\n1. **Enable GitHub Authentication in Firebase Console:**\n   - Go to your Firebase project in the [Firebase Console](https://firebase.google.com/).\n   - Navigate to **Authentication** \u003e **Sign-in method**.\n   - Enable **GitHub** as a sign-in provider.\n   - Note the **Authorization Callback URL** provided by Firebase, as you will need this for your GitHub OAuth App.\n\n2. **Register a New OAuth Application on GitHub:**\n   - Go to your GitHub [Developer Settings](https://github.com/settings/developers).\n   - Click on **OAuth Apps** and select **New OAuth App**.\n   - Fill in the application details:\n     - **Application Name**: Custom Code Editor\n     - **Homepage URL**: \n       - For **local development**, use `http://localhost:3000`\n       - For **production deployment**, use your public URL (e.g., `https://custom-code-editor.vercel.app/`)\n     - **Authorization Callback URL**: \n       - Use the **Authorization Callback URL** provided by Firebase.\n   - Click **Register Application**.\n\n3. **Retrieve GitHub Client ID and Client Secret:**\n   - Once the app is registered, you will see the **Client ID** and **Client Secret** in the GitHub OAuth App settings. Copy these values.\n\n4. **Add GitHub OAuth Credentials to Firebase:**\n   - Return to the Firebase Console and go back to the **GitHub** provider configuration.\n   - Enter the **Client ID** and **Client Secret** from GitHub.\n   - Save these settings.\n\n5. **Update Environment Variables:**\n   - Open your `.env` file in your project root and add the following:\n\n     ```plaintext\n     REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID\n     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET\n     ```\n\n   - Replace `YOUR_GITHUB_CLIENT_ID` and `YOUR_GITHUB_CLIENT_SECRET` with the values you copied from GitHub.\n\n## Local Configuration\n\n- Create a .env file in the root directory of your project if it doesn't already exist.\n- You can copy content from `.env.example` to `.env`, you can run below command.\n  ```\n  cp .env.example .env\n  ```\n- Set the following environment variables in the .env file:\n\n```\nREACT_APP_RAPID_API_HOST=YOUR_HOST_URL\nREACT_APP_RAPID_API_KEY=YOUR_SECRET_KEY\nREACT_APP_RAPID_API_URL=YOUR_SUBMISSIONS_URL\n\n# key for docker container name\nCOMPOSE_PROJECT_NAME=custom_code_editor\n```\nReplace YOUR_HOST_URL, YOUR_SECRET_KEY, \u0026 YOUR_SUBMISSIONS_URL with the appropriate values for your Rapid API and Judge0 API endpoints.\n\n## Server Setup Configuration\nCreate a .env file in the root directory of your project if it doesn't already exist.\nSet the JUDGE0_SUBMISSION_URL environment variable in the .env file. This variable should point to the URL of the Judge0 API endpoint you want to use for code execution. For example:\nplaintext\n\n```\nJUDGE0_SUBMISSION_URL=https://api.judge0.com/submissions\n```\n\nReplace https://api.judge0.com/submissions with the appropriate URL for your Judge0 API endpoint.\n\nRunning the Development Server\nOnce the configuration is complete, you can start the development server to see the React code builder in action.\n\n```\nnpm start\n# or\nyarn start\n```\n\nOpen your web browser and navigate to http://localhost:3000 to access the application.\n\n## Usage\n\n- Write your code in the Monaco Editor.\n- Execute the code snippet by clicking the \"Run\" button.\n- View the output in the console or output panel.\n\n## Important Information\nCurrently the project url is based out of the free version of judge0 this means at most one can have 50 requests per day.\n\n##  Contributing\nContributions are welcome! Feel free to submit pull requests or open issues.\n\n### Contributors\n\u003ca href=\"https://github.com/DhanushNehru/CustomCodeEditor/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=DhanushNehru/CustomCodeEditor\" /\u003e\n\u003c/a\u003e\n\n## Gitpod\n\nIn the cloud-free development environment where you can directly start coding.\n\nYou can use Gitpod in the cloud [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/DhanushNehru/CustomCodeEditor/)\n\n----\n\nContributions are welcome. Drop a PR or reach out if you need any help!\n","funding_links":["https://github.com/sponsors/DhanushNehru","https://patreon.com/dhanushnehru","https://ko-fi.com/dhanushnehru"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhanushnehru%2Fcustomcodeeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhanushnehru%2Fcustomcodeeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhanushnehru%2Fcustomcodeeditor/lists"}