💻 IDE Code Editor

A modern, feature-rich online code editor inspired by CodePen, built with cutting-edge web technologies. Write, edit, and preview your HTML, CSS, and JavaScript code in real-time with a sleek, responsive interface.

🚀 Live Demo

ide-code.vercel.app

✨ Features

• 🎨 Real-time Preview - See your code changes instantly
• 🌓 Dark/Light Theme - Toggle between themes for comfortable coding
• 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
• 🎯 Multi-language Support - HTML, CSS, and JavaScript editing
• 💾 Auto-save - Never lose your work
• 🔍 Syntax Highlighting - Beautiful code highlighting for better readability
• ⚡ Fast Performance - Built with Next.js for optimal speed
• 🎭 Modern UI - Clean, intuitive interface with smooth animations

🛠️ Tech Stack

• Framework: Next.js 14 - React framework for production
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Components: shadcn/ui - Beautiful, accessible components
• Language: TypeScript - Type-safe JavaScript
• Deployment: Vercel - Seamless deployment and hosting

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ide-code-editor.git
   cd ide-code-editor

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. **Open your browser**

http://localhost:3000

## 🎯 Core Components

### Editor Component
- Multi-tab interface for HTML, CSS, and JavaScript
- Syntax highlighting and auto-completion
- Responsive layout with resizable panels

### Preview Component
- Real-time rendering of code changes
- Responsive preview modes
- Error handling and display

### UI Components
- Modern button designs
- Dropdown menus
- Theme toggle
- Mobile-responsive navigation

## 🌟 Features in Detail

### 🎨 Code Editor
- **Syntax Highlighting**: Beautiful syntax highlighting for HTML, CSS, and JavaScript
- **Auto-completion**: Intelligent code suggestions
- **Error Detection**: Real-time error highlighting
- **Multi-tab Interface**: Switch between HTML, CSS, and JS tabs seamlessly

### 🔍 Live Preview
- **Instant Updates**: See changes as you type
- **Mobile Preview**: Test responsive designs
- **Console Output**: View JavaScript console logs
- **Error Handling**: Graceful error display

### 🎭 User Experience
- **Dark/Light Mode**: Toggle between themes
- **Responsive Design**: Works on all screen sizes
- **Smooth Animations**: Polished interactions
- **Keyboard Shortcuts**: Power-user features

## 📱 Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers

## 🔧 Configuration

### Tailwind CSS
Customize your design system in `tailwind.config.js`:
```javascript
module.exports = {
// Your custom configuration
theme: {
 extend: {
   colors: {
     // Custom colors
   }
 }
}
}

Next.js

Configure Next.js settings in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your configuration
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• Inspired by CodePen
• Built with shadcn/ui
• Powered by Next.js
• Styled with Tailwind CSS

📞 Contact

• Developer: Harshit
• Email: [[email protected]]
• LinkedIn: [www.linkedin.com/in/harshit-bhalani]

🔗 Links

• Live Demo: ide-code.vercel.app
• Repository: GitHub Repository
• Issues: Report Issues

---

⭐ Star this repository if you found it helpful!

Made with ❤️ by Harshit