Building Code Runner - Part #0
A series of articles on how to build a simple web app which serves an online IDE using the MERN stack to run code in multiple languages.
Hello mate 👋🏽
Hoping that you are doing well in these difficult times 😀
I hear and I forget.
I see and I remember.
I do and I understand.~ Confucius
I believe in the same and when I started learning the MERN stack,
I built Code Runner to understand the concepts better. I would like to share what I learnt by building Code Runner through this series.
What is Code Runner first of all? 🤔
Code Runner is a simple web application with an integrated code editor, which can be used to execute programs in various languages. It is built using MERN stack, i.e. it uses React in the front end; Node , Express and MongoDB in the backend.
To learn more about the MERN stack check this article by MongoDB themselves.
There are multiple other platforms which serve the same purpose. This project is solely made to have a personal touch of features and UI and also learn to build web applications.
Features of Code Runner:
- Run code in several different languages all in one place.
- Write code faster with auto complete suggestions.
- Save your code on the cloud and access it with a simple link.
- Share the code with others using the same generated link.
- Everything for free without any ads or signup.
What's included in this series? ⁉
- We will learn to build a decent looking front end application using React and ChakraUI which includes routing and redirection.
- We will learn to build a simple CRUD API using Node and Express and interact with MongoDB.
- We will also learn to use multiple third party libraries like react-ace , nanoid and others.
- We will learn to deploy this application on the internet.
Prerequisites to follow this series:
- Working knowledge of using React and Node will suffice.
When will the articles be released? ⏳
- The number of articles in this series is not planned for now.
- There will be one article every week on Sunday night (IST) explaining one important functionality or feature.
- The code for the entire project will be shared on a public GitHub repo. The link for the repo will be shared in the upcoming article.
Subscribe to my newsletter to stay updated about the articles' release. 📬