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
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:

   git clone https://github.com/101rror/CodeFlex

2. Navigate into the project directory:

   cd CodeFlex

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Demo Video

Watch the full demo on YouTube: CodeFlex Demo Video