So hello everyone 👋👋. Today i present to you coding machine a online editor to run programs. This is my personal project made using mern stack. So in this blog i will discuss general idea about this project some points which are important when you make such types of editors. So let's get started 🤩🤩.

So the frontend part is simple it is made in react with typescript it is and the main page is the editor it self where you can write code along with that you can do customization like changing font size, changing tab size, changing themes.

Along with that you can enable auto completion features as well we provide you with 2 kinds of auto complete features. First one is basic auto complete which provides you auto complete when you press cntrl+space on keyboard. Second one is live auto complete which provides you auto complete while typing no need to use the shortcut to enable it.

These all features of editor is provided by ace editor you can check other editor like code mirror as well to make the frontend.

And then we have the footer and navbar which are simple two components which provides you basic navigation to docs and source code of project.

Now for backend i will make another blog explaining the main part of the project.

And the whole frontend code is available here

And the whole backend code is available here

Thanks for reading 🙂😉😊