https://github.com/101rror/CodeFlex
https://github.com/101rror/CodeFlex
code-editor-online css html javascript online-ide
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/101rror/CodeFlex
- Owner: 101rror
- Created: 2024-09-03T05:11:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-09T20:33:32.000Z (over 1 year ago)
- Last Synced: 2024-12-31T14:43:20.683Z (about 1 year ago)
- Topics: code-editor-online, css, html, javascript, online-ide
- Language: JavaScript
- Homepage:
- Size: 3.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeFlex
CodeFlex is a modern browser based coding platform that allows users to write, execute and share code in real time. Developed using HTML, CSS, JavaScript and powered by CodeMirror. It features robust multi language syntax highlighting, dynamic code templates, real time output validation, and an intuitive, responsive user interface. Designed for both learning and collaboration, CodeFlex streamlines the coding experience with built-in tools for code sharing, file downloads and theme customization.
## 🔧 Features
- 🔄 **Automatic Language-Based Code Download**
Downloads your code with the correct file extension (e.g., `.cpp` for C++, `.py` for Python) based on the selected language.
- 🌐 **Multi-language Syntax Highlighting**
Integrated CodeMirror for real-time syntax highlighting in multiple programming languages.
- 📄 **Dynamic Code Templates**
Automatically loads boilerplate code templates when a language is selected.
- 🧹 **Code Reset Button**
Quickly clears the editor and resets it to the default template.
- 🌓 **Dark & Light Mode Support**
Toggle between light and dark themes for a visually comfortable coding environment.
- 📥 **Input, Output & Expected Output Validation**
- Allows users to provide **custom input** and set an **expected output**.
- Displays a **"Matched"** message when the actual output matches the expected output.
- Shows **"Not Matched"** if the output differs — perfect for debugging.
- 🔗 **Social Sharing**
Generates a unique shareable link for platforms like **Facebook** and **WhatsApp**, making it easy to share code with others.
## 🚀 Usage
1. Visit the CodeFlex platform: *[Click here to see live Website](https://code-flex.vercel.app/)*
2. Select your desired programming language.
3. Write or paste your code in the editor.
4. Use the **Input** and **Expected Output** fields as needed.
5. Click **Run** to execute and **Check** to validate your output.
6. Share or download your code, or reset the editor to start fresh.
7. Use the theme toggle to switch between dark and light modes.
## Installation using npm
1. Clone the repository:
```bash
git clone https://github.com/101rror/CodeFlex
```
2. Navigate into the project directory:
```bash
cd CodeFlex
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
## Demo Video
Watch the full demo on YouTube: *[CodeFlex Demo Video](https://youtu.be/x-ueWw9Jk7M?si=sdKayGdoUMdIslZA)*