https://github.com/pradeish29/codex-compiler
CodeX : All in one Online Compiler for Top Programming Languages
https://github.com/pradeish29/codex-compiler
chakra-ui code-editor compiler piston-api react
Last synced: 26 days ago
JSON representation
CodeX : All in one Online Compiler for Top Programming Languages
- Host: GitHub
- URL: https://github.com/pradeish29/codex-compiler
- Owner: pradeish29
- Created: 2024-05-21T17:52:21.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T14:29:20.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T13:17:59.221Z (about 1 year ago)
- Topics: chakra-ui, code-editor, compiler, piston-api, react
- Language: JavaScript
- Homepage: https://pradeish29.github.io/CodeX-Compiler/
- Size: 2.19 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeX-Compiler
## Overview
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/
## Features
- 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.
## Technologies Used
- **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.
## Deployment
The app is deployed on GitHub Pages and can be accessed at:
[CodeX-Compiler](https://pradeish29.github.io/CodeX-Compiler/)
## Getting Started
To get a local copy up and running, follow these simple steps:
### Prerequisites
- Node.js installed on your local machine.
### Installation
1. Clone the repository:
```sh
git clone https://github.com/pradeish29/CodeX-Compiler.git
```
2. Navigate to the project directory:
```sh
cd CodeX-Compiler
```
3. Install the dependencies:
```sh
npm install
```
4. Install Chakra UI, Axios, and React Router DOM:
```sh
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion axios react-router-dom
```
5. Start the development server:
```sh
npm start
```
## Usage
Open the application in your browser:
```sh
http://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.
## File Structure
- 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.
## Modifications
There is a small modification in the index.html file to address an issue with the webpack development server overlay:
```html
iframe#webpack-dev-server-client-overlay{display:none!important}
```
This was done to handle the following error:
```vbnet
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError
```
Feel free to fork and contribute to rectifying this issue.
## Contributing
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
## Fork the Project.
- 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.
## License
Distributed under the MIT License. See LICENSE for more information.