CodeX-Compiler is an online code compiler built using React and Chakra UI. It leverages Piston API to execute code in various programming languages. The application provides a simple and user-friendly interface for writing, running, and testing code snippets online.

Live Demo - https://pradeish29.github.io/CodeX-Compiler/

• Supports multiple programming languages including JavaScript, TypeScript, Python, Java, C#, C, C++, and PHP.
• User-friendly code editor with syntax highlighting powered by Monaco Editor.
• Responsive design, adapting to different screen sizes using Chakra UI.
• Real-time code execution and output display using Piston API.

• React: JavaScript library for building user interfaces.
• Chakra UI: Simple, modular, and accessible component library for React.
• Monaco Editor: Code editor that powers VS Code, integrated into the application for a robust coding experience.
• Piston API: API for executing code in multiple programming languages.

The app is deployed on GitHub Pages and can be accessed at: CodeX-Compiler

To get a local copy up and running, follow these simple steps:

• Node.js installed on your local machine.

1. Clone the repository:

git clone https://github.com/pradeish29/CodeX-Compiler.git

2. Navigate to the project directory:

cd CodeX-Compiler

3. Install the dependencies:

npm install

4. Install Chakra UI, Axios, and React Router DOM:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion axios react-router-dom

5. Start the development server:

npm start

Open the application in your browser:

http:https://localhost:3000

• Select a programming language from the dropdown menu.
• Write your code in the editor.
• Provide any necessary input for the code in the input section.
• Click the "Run Code" button to execute the code and view the output.

• src/: Contains the source code of the application. = components/: Contains the React components used in the app.
• CodeEditor.js: Main code editor component.
• LanguageSelector.js: Component for selecting programming languages.
• Output.js: Component for displaying code execution output.
• App.js: Main application component.
• index.js: Entry point of the application.

There is a small modification in the index.html file to address an issue with the webpack development server overlay:

<style>
    iframe#webpack-dev-server-client-overlay{display:none!important}
</style>

This was done to handle the following error:

ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError

Feel free to fork and contribute to rectifying this issue.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. Feel free to fork and contributing to rectify the issue

• Create your Feature Branch (git checkout -b feature/AmazingFeature).
• Commit your Changes (git commit -m 'Add some AmazingFeature').
• Push to the Branch (git push origin feature/AmazingFeature).
• Open a Pull Request.

Distributed under the MIT License. See LICENSE for more information.