Tiny and Minimal Code Editor supports multiple languages
NanoDe is a tiny and minimal code editor. It supports multiple languages and has a simple UI. Primarily built with React, Material UI, and Monaco Editor. It uses Judge0 for code compilations under the hood.
The challenge was to develop a minimal code editor with multiple language supports. This editor should have
- A simple UI
- Some basic customization options like, font face, font size, theme vice-versa.
- A user can search from the language selectors. The language list might be huge so, it better to implement a search functionality.
- It should have a intuiting code editor interface with minimum support for highlighting, auto-completion, and code snippets.
- There should be a
STDIN
andSTDOUT
section to show the input and output of the code.
- Live Site: https://nanode.vercel.app/
- Source Code: https://github.com/moeen-mahmud/NanoDe-Online-IDE
- Frontend: React, Material UI, Monaco Editor
- API: Judge0
- Build Tools: Vite
- Deployment: Vercel
- Architecture: Atomic Design
- How to work with monaco editor specifically with React.
- How to use Monaco Editor API to customize the editor.
- How to use Judge0 API to compile and run the code.
- How to use Webhooks to get the callback results from the API.
- I will try to add more features to this project like, multiple theme support, sample code generation for each languages, code sharing, snippet making.
- I will try to add more languages to the language selector.
- Login and Registration module to save the code snippets and share them with others.
- Pair programming module to code with others.
- User profile module to show the user's profile and their code snippets.
- Customized dashboard for each user.
- Monaco Editor - This is the official documentation of Monaco Editor. It has a lot of examples and API documentation.
- Judge0 - This is the official documentation of Judge0 API. It has a lot of examples and API documentation.
- Monaco React - This is the official documentation of Monaco React. It has a lot of examples and API documentation.
Made with ❤️ by Moeen Mahmud