πŸ’» Build your own code editor that compiles and runs 40+ programming languages.

Related tags

React react axios judge0
Overview

CodeRush - Compile and Execute code in 40+ languages

⚑️ A code editor that compiles and runs your code on the web. Blog: FreeCodeCamp - Build A Code IDE with React

Features:

  • Compile and execute code in 40+ programming languages.
  • Switch themes from a list of available themes.

Installations and setup

  • git clone https://github.com/manuarora700/react-code-editor.git
  • npm install
  • A sample .env.sample file is given, Register on RapidAPI ang get your API keys.
  • Create a .env file.
  • Add the API Keys in the .env file
  • npm start to run the project.

TODO:

  1. Add more languages [DONE]
  2. User login, authentication and registration (Firebase Auth)
  3. User Profile Page
  4. Save code functionality (Firestore - use Slug based approach)
  5. Share code functionality

Support

Buy Me A Coffee

You might also like...

Visual layout editor for matplotlib and any plotting library built upon matplotlib like seaborn.

Visual layout editor for matplotlib and any plotting library built upon matplotlib like seaborn.

Matplotlib Layout Generator Before you start: You must have experience with using matplotlib. It needs to be use on desktop. Not designed for mobile.

Dec 1, 2022

How to submit HTML forms to Google Sheets. (Updated for 2021 Script Editor)

How to submit HTML forms to Google Sheets. (Updated for 2021 Script Editor)

Submit a HTML form to Google Sheets How to submit a simple HTML form to a Google Sheet using only HTML and JavaScript. Updated for Google Script Edito

Jan 6, 2023

An awesome tool to make Images and GIFs of your code!

An awesome tool to make Images and GIFs of your code!

Recoded An awesome tool to make Images and GIFs of your code! View Demo Β· Report Bug Β· Request Feature About The Project There are plenty of Apps like

Dec 18, 2022

⚑ Pcode lets you create and share beautiful images πŸŽ‰ of your source code πŸš€

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jul 14, 2022

Build blazing fast, modern apps and websites with React

Gatsby v3 βš›οΈ πŸ“„ πŸš€ Fast in every way that matters Gatsby is a free and open source framework based on React that helps developers build blazing fast w

Jan 9, 2023

Boilerplate to build Cross-Platform Apps with Expo and React Native

Expo and React Native Boilerplate Boilerplate to build Cross-Platform Apps with Expo and React Native What are you going to find in this boilerplate E

Apr 29, 2022

Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0

Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0

Umbraco v9 Demo Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0. About this solution: This is a demo site for Umbraco v9 build in the new

Dec 18, 2022

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Oct 5, 2022

Build an App using React, Redux, Node and Sequelize.

Build an App using React, Redux, Node and Sequelize.

Individual Project - Henry PokΓ©mon Objetivos del Proyecto Construir una App utilizando React, Redux, Node y Sequelize. Afirmar y conectar los concepto

Sep 13, 2022
Comments
  • Submissions not working

    Submissions not working

    I used your editor and put my own API key into it and it doesn't seem to be working, please help CodeSandBox: https://codesandbox.io/p/github/manuarora700/react-code-editor/csb-w0vsw6/draft/unruffled-nightingale?file=%2F.env.sample&selection=%5B%7B%22endColumn%22%3A77%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A77%2C%22startLineNumber%22%3A3%7D%5D

    opened by Noellikecode 9
  • Missing dependency

    Missing dependency "handleCompile".

    WARNING in src\components\Landing.js Line 71:6: React Hook useEffect has a missing dependency: 'handleCompile'. Either include it or remove the dependency array react-hooks/exhaustive-deps

    webpack 5.72.0 compiled with 1 warning in 600 ms

    The code runs well, but doesn't execute, the reason is stated above.

    Thanks for the code.

    Kindly fix.

    opened by SamZing777 3
  • Trying to add collaboration feature

    Trying to add collaboration feature

    Hi , I was tring to add collaorative functionality to online code editor but wasn't able to do so bcz of infite loop being setup in firebase. Attaching the stackoverflow link to me post.

    https://stackoverflow.com/questions/73451086/collaborative-online-code-editor-sets-infinite-loop-on-firebase-real-time-databa

    Please do comment and reply back if you could help.

    opened by SumeetSanwal 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    opened by imgbot[bot] 1
Releases(v1.0.0)
Owner
Manu Arora
πŸ”₯ Full-Stack Developer | JavaScript + frameworks enthusiast ⚑️ | Coder, Programmer, Engineer, and a Punjabi. πŸ™ŒπŸΎ Tech blog: manuarora.in
Manu Arora
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
This is full stack todo Application which has front end and backend side on my own. So you can try this out. Build using

Full Stack Todo Application Hello Everyone... Here I am sharing some information about the TODO APP which I build using React, Redux, Material UI, Exp

Nayan Ingale 5 Nov 8, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Tina 8.2k Jan 1, 2023
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❀️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 147 Jan 7, 2023
Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Wuba 126 Dec 29, 2022
This is a code repository for the corresponding video tutorial. In this video, we're going to build a Modern UI/UX Restaurant Landing Page Website

Restaurant Landing Page Live Site Stay up to date with new projects New major projects coming soon, subscribe to the mailing list to stay up to date h

Adrian Hajdin - JavaScript Mastery 843 Jan 4, 2023
Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

null 9.1k Jan 6, 2023
A text editor built with react , firebase and quill

Welcome to Text-Editor ?? A simple text editor built with react,firebase v8 & quill ✨ Demo Install npm install Usage npm run start Run tests npm run t

Whirl 4 Aug 30, 2022