CodeSphere is a web-based code editor supporting multiple programming languages. It offers a seamless coding experience with syntax highlighting, code execution, and real-time output visualization. Built with React, Chakra UI, and powered by the Piston API, it provides a clean and efficient coding environment.
🔹 Multi-Language Support: JavaScript, Python, Java, TypeScript, C#, and PHP.
🔹 Live Execution: Write and execute code with instant output.
🔹 Syntax Highlighting: Enjoy an intuitive and visually pleasing editor interface.
🔹 Customizable Theme: Built with Chakra UI for a responsive and accessible design.
- Frontend: React.js
- UI Library: Chakra UI
- Build Tool: Vite.js
- HTTP Requests: Axios
- Code Editor: Monaco Editor
-
Clone the Repository:
git clone <repository_url>
-
Navigate to the Project Directory:
cd code-editor -
Install Dependencies:
npm install
-
Run the Application:
npm run dev
- Choose a Language: Select a programming language from the dropdown.
- Write Code: Use the built-in editor with pre-defined code snippets.
- Execute: Click the "Run Code" button to see the output in real time.
- API Base URL: Defined in
src/api.js(modify if needed). - Code Snippets & Languages: Managed in
src/constants.js.
CODE-EDITOR/
├── src/
│ ├── components/ # React components
│ ├── api.js # API request functions
│ ├── constants.js # Supported languages and code snippets
│ ├── App.jsx # Main application file
│ └── theme.js # Chakra UI custom theme
├── public/ # Static assets
└── vite.config.js # Vite configuration file
Contributions are welcome! If you have suggestions or improvements, feel free to open an issue or submit a pull request.
- Piston API: For enabling code execution.
- Monaco Editor: For providing a rich code editing experience.
Let me know if you want further personalization! 🚀