A full stack web application for online programming, built with React(Frontend) and Express(Backend).

This application is used for online coding. After selecting the programming language, you can start to write code. Below are the highlighted features.

• Five programming languages are supported, including c, c++, java, javascript and python.
• Syntax highlighting for different languages.
• Compilation and execution are supported. The proper result or error message will be displayed.

The Server is built with Express. The used libraries for server are listed as follows.

• RESTful API: express, express router, cors
• Compilation & Execution: spawn in node.js

The Client is built with React and 3rd-party libraries, see below.

• Styling: bootstrap
• Rich Text Editor: react-ace

Two available demos:

• Live Demo on Netlify: https://code-editor-react.netlify.com/
• Live Demo on Azure: https://code-editor.azurewebsites.net/

Note: The demo websites may be slow when you access them for the first time. Be patient!

git clone https://github.com/jojozhuang/code-editor-react.git
cd code-editor-react
npm install
npm run dev

Access http://localhost:3000/ in web browser and click 'Code Editor' button, enjoy!

Follow tutorial Deploying Full Stack React App to Heroku to deploy the React app to Heroku(RESTful API + Frontend React).

Follow tutorial Continuously Deploy Full Stack React App to Heroku and Netlify with Travis-CI to continuously deploy this Full Stack app to Heroku(RESTful API) and Netlify(Frontend React).

Read portfolio Code Editor(React) to learn the main functions of this code editor.

Read tutorial Building Online Code Editor with React and Express to learn how this online code editor is built.