Dev8 IDE

A modern, feature-rich online IDE for developers

Live Demo • Features • Installation • Documentation

📖 About Dev8 IDE

Dev8 IDE is a powerful, browser-based integrated development environment designed to provide developers with a seamless coding experience without any setup required. Built with modern web technologies, Dev8 IDE offers a Visual Studio Code-like experience directly in your browser, supporting multiple programming languages with real-time code execution.

Whether you're a student learning to code, a developer testing snippets, or a professional building small applications, Dev8 IDE provides a distraction-free, feature-rich environment that works on any device with a web browser.

✨ Why Choose Dev8 IDE?

🚀 Zero Setup Required - Start coding instantly, no installations needed
💻 VS Code Experience - Powered by Monaco Editor, the same editor used in VS Code
🌐 Cross-Platform - Works on Windows, macOS, Linux, and mobile devices
🔒 Secure & Private - JWT-based authentication with secure project storage
⚡ Fast Execution - Quick code compilation and execution with real-time output
🎨 Modern UI/UX - Beautiful, intuitive interface designed for productivity
📱 Fully Responsive - Optimized for desktop, tablet, and mobile devices

🚀 Live Demo

Experience Dev8 IDE right now:

👉 dev8.pradeepx.me
👉 dev8-ide.vercel.app

🎯 Features

🧠 Advanced Code Editor

Monaco Editor Integration - Full-featured code editor with VS Code capabilities
Syntax Highlighting - Support for multiple programming languages
IntelliSense & Auto-completion - Smart code suggestions and autocomplete
Multi-cursor Support - Edit multiple locations simultaneously (Ctrl+Click)
Code Folding - Collapse and expand code blocks for better readability
Bracket Pair Colorization - Visual matching of brackets and parentheses
Line Numbers - Easy navigation with visible line numbers
Minimap - Overview of your entire code file
Find & Replace - Powerful search and replace functionality
Format on Paste/Type - Automatic code formatting
Auto-indentation - Smart indentation for clean code structure

💾 Project Management

Create Projects - Start new coding projects in seconds
Edit Projects - Modify project names and code easily
Save Projects - Auto-save with manual save option (Ctrl+S)
Delete Projects - Remove projects you no longer need
Project Organization - Visual project cards with language icons
Unlimited Projects - Create as many projects as you need
Project History - Access all your saved projects anytime

🔄 Code Execution

Real-time Execution - Run code and see results instantly
Multiple Language Support - Execute code in various programming languages
Input Support - Provide stdin input for interactive programs
Error Handling - Clear error messages for compilation and runtime errors
Output Display - Separate panels for stdout and stderr
Execution Status - Visual indicators for success/failure
Timeout Protection - Prevents infinite loops and long-running code

🎨 Modern User Interface

Dark Theme - Eye-friendly dark mode with gradient accents
Glass Morphism - Modern glass-effect UI components
Smooth Animations - Fluid transitions and hover effects
Responsive Design - Perfect experience on all screen sizes
Custom Scrollbars - Styled scrollbars matching the theme
Loading States - Visual feedback during operations
Toast Notifications - Non-intrusive success/error messages

🔐 Security & Authentication

JWT Authentication - Secure token-based authentication
User Accounts - Create and manage your developer account
Secure Storage - Projects stored securely in your account
Session Management - Automatic session handling
Protected Routes - Secure access to projects and features

📦 Supported Languages

Dev8 IDE supports the following programming languages:

🐍 Python - Full Python 3 support with standard library
☕ Java - Java development with compilation support
📜 JavaScript - Node.js JavaScript execution
🔷 C - C programming with GCC compilation
⚡ C++ - C++ development with standard library support
🐚 Bash - Shell scripting support

⌨️ Keyboard Shortcuts

Ctrl+S / Cmd+S - Save current project
Ctrl+Enter / Cmd+Enter - Run code
Ctrl+F - Find in editor
Ctrl+H - Find and replace
Ctrl+/ - Toggle line comment
Ctrl+Click - Multi-cursor selection
Alt+Up/Down - Move line up/down
Shift+Alt+Up/Down - Copy line up/down

📱 Mobile Features

Touch-Optimized - Full support for touch gestures
Responsive Layout - Adapts to mobile screen sizes
Mobile Menu - Hamburger menu for easy navigation
Touch-Friendly Buttons - Large, accessible buttons

🔧 Developer Experience

Cursor Management - Perfect cursor behavior on desktop and mobile
Input Handling - Seamless text input and editing
Import Detection - Automatic detection of imports and dependencies
Header File Support - C/C++ header file handling
Error Highlighting - Visual error indicators in code
Code Suggestions - Context-aware code completion
Word Wrapping - Automatic line wrapping for long lines

🧑‍💻 Tech Stack

Frontend

React 18.3 - Modern UI library
React Router 7.1 - Client-side routing
Monaco Editor 4.6 - VS Code editor in the browser
Tailwind CSS 3.4 - Utility-first CSS framework
React Icons 5.5 - Beautiful icon library
React Select 5.9 - Advanced select component
React Toastify 11.0 - Toast notification system
Vite 6.0 - Next-generation build tool

Backend

Node.js - JavaScript runtime
Express.js 4.16 - Web application framework
MongoDB 6.16 - NoSQL database
Mongoose 8.9 - MongoDB object modeling
JWT (jsonwebtoken 9.0) - Authentication tokens
bcryptjs 2.4 - Password hashing
CORS 2.8 - Cross-origin resource sharing
dotenv 16.5 - Environment variable management

Code Execution

Piston API - Online code execution engine
Multi-language Support - Execution for Python, Java, JavaScript, C, C++, Bash

📸 Screenshots

Home Dashboard

Code Editor

About Page

⚙️ Installation

Prerequisites

Node.js (v16 or higher)
npm or yarn
MongoDB (for local development) or MongoDB Atlas (for cloud)

Step 1: Clone the Repository

git clone https://github.com/pradeepx-dev/Dev8-IDE.git
cd Dev8-IDE

Step 2: Install Dependencies

Frontend Dependencies

cd frontend
npm install

Backend Dependencies

cd ../backend
npm install

Step 3: Environment Configuration

Backend Environment Variables

# Server Configuration
PORT=5000
ALLOWED_ORIGIN=http://localhost:5173

# Database Configuration
MONGODB_URI=your-mongodb-key-change-this-in-production
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

Frontend Environment Variables

# API Base URL
VITE_API_BASE_URL=http://localhost:5000

Step 4: Start the Application

Start Backend Server

cd backend
npm start

Start Frontend Development Server

cd frontend
npm run dev

Project Structure

Dev8-IDE/
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   │   ├── Navbar.jsx
│   │   │   └── Footer.jsx
│   │   ├── pages/           # Page components
│   │   │   ├── Home.jsx
│   │   │   ├── Editor.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── SignUp.jsx
│   │   │   └── About.jsx
│   │   ├── App.jsx          # Main app component
│   │   ├── main.jsx         # Entry point
│   │   ├── index.css        # Global styles
│   │   └── helper.js       # Helper functions
│   ├── public/              # Static assets
│   ├── package.json
│   └── vite.config.js
├── backend/
│   ├── controllers/          # Route controllers
│   ├── models/              # Database models
│   ├── routes/              # API routes
│   ├── config/              # Configuration files
│   ├── app.js               # Express app
│   └── package.json
└── README.md

📚 Documentation

Usage Examples

Creating a Python Project

Log in to your account
Click "Create Project"
Enter project name
Select "Python" as language
Start coding!

Running Code with Input

Write your code (e.g., name = input("Enter name: "))
Click the "Input" button
Enter your input in the textarea
Click "Run"
See the output!

🤝 Contributing

Contributions are welcome! We appreciate your help in making Dev8 IDE better.

How to Contribute

Fork the Repository

git fork https://github.com/pradeepx-dev/Dev8-IDE.git

Create a Feature Branch
```
git checkout -b feature/amazing-feature
```
Make Your Changes
- Write clean, readable code
- Follow existing code style
- Add comments where necessary

Commit Your Changes

git commit -m 'Add some amazing feature'

Push to the Branch
```
git push origin feature/amazing-feature
```
Open a Pull Request
- Describe your changes
- Reference any related issues
- Wait for review and feedback

Contribution Guidelines

Follow the existing code style
Write meaningful commit messages
Add tests for new features
Update documentation as needed
Be respectful and constructive

🐛 Known Issues

Cursor behavior may vary slightly between browsers
Some complex C/C++ programs may require additional compilation flags
Large projects may take longer to load

🔮 Future Roadmap

Support for more programming languages (Go, Rust, Ruby, etc.)
Collaborative coding features
Code sharing and export functionality
Custom themes and editor customization
File system support for multi-file projects
Package manager integration
Code templates and snippets
Performance monitoring and optimization

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Author

Pradeep Kumar Maurya

📧 Email: pradeepx135@gmail.com
🔗 LinkedIn: linkedin.com/in/pradeepx
🐙 GitHub: github.com/pradeepx-dev
🌐 Website: pradeepx.me

🙏 Acknowledgments

Monaco Editor - For the amazing code editor
Piston API - For code execution services
React Team - For the incredible framework
Tailwind CSS - For the utility-first CSS framework
All Contributors - For their valuable contributions

⭐ Show Your Support

If you find Dev8 IDE useful, please consider:

⭐ Starring this repository
🐛 Reporting bugs
💡 Suggesting new features
📢 Sharing with others
🤝 Contributing to the project

Made with ❤️ by Pradeep Kumar Maurya

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 42 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

License

pradeepx-dev/Dev8-IDE

Folders and files

Latest commit

History

Repository files navigation