🎨 CodeCanvas

CodeCanvas is a modern, responsive, and user-friendly code editor built with React, TailwindCSS, and CodeMirror. Designed to support JavaScript and Markdown, it offers a sleek and intuitive interface with dark mode and file management functionalities. This project is ideal for developers seeking a lightweight and customizable coding experience directly in their browser.

✨ Features

Feature	Description
📱 Responsive Design	Fully responsive layout for a seamless experience on desktop, tablet, and mobile devices.
🌗 Dark Mode	Toggle between light and dark themes for optimal comfort and usability.
💻 Language Support	Easily switch between JavaScript and Markdown editing modes.
📁 File Operations	Import, export, and save files locally for streamlined file management.
⌨️ Keyboard Shortcuts	Save your work quickly with Ctrl/Cmd + S.
🛠️ Elegant Toolbar	Classic, accessible toolbar with intuitive buttons for core actions.

🌐 Demo

Check out the live demo of CodeCanvas here (Add your deployment link).

🔧 Technologies Used

• React: For building the user interface components.
• TailwindCSS: For responsive and modern styling.
• CodeMirror: For a powerful, extensible code editor.
• Lucide Icons: For clean and lightweight icons in the toolbar.

🚀 Installation

Follow these steps to get started with CodeCanvas:

1. Clone the repository:

   git clone https://github.com/your-username/codecanvas.git

2. Navigate to the project directory:

   cd codecanvas

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your browser and navigate to http://localhost:3000 to view the application.

📝 Usage

1. Use the Toolbar at the top of the editor to:

   • 🌐 Switch between JavaScript and Markdown modes.
   • 🌗 Toggle between light and dark themes.
   • 💾 Save your work locally with a single click.
   • 📤 Import and 📥 export files seamlessly.

2. Start coding in the editor area. Your changes will automatically update in real-time.

📂 Folder Structure

The project has the following structure:

codecanvas/
├── src/
│   ├── components/
│   │   ├── Editor.tsx       # Editor component
│   │   ├── Toolbar.tsx      # Toolbar component
│   ├── App.tsx              # Main app component
│   ├── index.tsx            # Entry point
│   └── styles/              # TailwindCSS configuration
├── public/                  # Public assets
├── package.json             # Project dependencies
└── README.md                # Project documentation

📂 File Management

Action	Description
💾 Save	Click the save button or use Ctrl/Cmd + S to store your work in the browser’s local storage.
📤 Export	Download your code as a .js or .md file.
📥 Import	Upload .js, .md, or .txt files to edit directly in the browser.

⌨️ Key Commands

• Save: Ctrl/Cmd + S to quickly save your code.
• Import File: Use the file upload button in the toolbar.
• Export File: Use the download button to export your work.

📜 License

This project is licensed under the MIT License. You are free to use, modify, and distribute this software as per the license terms.

---

🚀 Enjoy using CodeCanvas! If you have any questions or issues, feel free to reach out.