CodeCraft - Online Code Editor Platform

A modern, full-featured online code editor platform built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring Monaco Editor for an exceptional coding experience.

🚀 Features

Core Features

• Monaco Editor Integration - Professional code editing with syntax highlighting, autocomplete, and error marking
• Multi-language Support - Support for 18+ programming languages including JavaScript, Python, Java, C++, and more
• Real-time Code Execution - Execute code online using Judge0 API with input/output support
• JWT Authentication - Secure user authentication and authorization
• Code Snippet Management - Save, organize, and manage your code snippets
• Public/Private Sharing - Share code snippets publicly or keep them private
• User Profiles - Customizable user profiles with preferences

Advanced Features

• Code Execution History - Track execution results, timing, and memory usage
• Folder Organization - Organize code snippets into folders
• Tagging System - Tag and categorize your code snippets
• Search & Filter - Advanced search and filtering capabilities
• Responsive Design - Modern, responsive UI that works on all devices
• Dark/Light Theme - Toggle between dark and light themes
• Code Templates - Pre-built code templates for quick start

🛠️ Tech Stack

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing
• Axios - HTTP client for API calls

Frontend

• React - JavaScript library for building user interfaces
• Monaco Editor - Professional code editor (same as VS Code)
• React Router - Client-side routing
• Styled Components - CSS-in-JS styling
• React Icons - Icon library
• React Hot Toast - Toast notifications

External APIs

• Judge0 API - Online code execution engine
• RapidAPI - API marketplace for Judge0

📋 Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn package manager

🚀 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd codecraft2

2. Install Dependencies

# Install server dependencies
npm install

# Install client dependencies
cd client
npm install
cd ..

3. Environment Configuration

Create a .env file in the root directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/codecraft_editor
JWT_SECRET=your_super_secret_jwt_key_here_change_in_production
NODE_ENV=development
JUDGE0_API_URL=https://judge0-ce.p.rapidapi.com
RAPIDAPI_KEY=your_rapidapi_key_here
RAPIDAPI_HOST=judge0-ce.p.rapidapi.com

4. Get RapidAPI Key

1. Sign up at RapidAPI
2. Subscribe to Judge0 CE
3. Copy your API key and update the .env file

5. Start MongoDB

Make sure MongoDB is running on your system:

# On Windows
net start MongoDB

# On macOS/Linux
sudo systemctl start mongod

6. Run the Application

Development Mode

# Run both server and client concurrently
npm run dev

# Or run them separately:
# Terminal 1 - Server
npm run server

# Terminal 2 - Client
npm run client

Production Mode

# Build the client
npm run build

# Start the server
npm start

📁 Project Structure

codecraft2/
├── server/                 # Backend server
│   ├── index.js           # Main server file
│   ├── models/            # MongoDB models
│   │   ├── User.js        # User model
│   │   └── Code.js        # Code snippet model
│   ├── routes/            # API routes
│   │   ├── auth.js        # Authentication routes
│   │   ├── code.js        # Code management routes
│   │   └── user.js        # User profile routes
│   └── middleware/        # Custom middleware
│       └── auth.js        # JWT authentication middleware
├── client/                # Frontend React app
│   ├── public/            # Static files
│   ├── src/               # Source code
│   │   ├── components/    # React components
│   │   │   ├── auth/      # Authentication components
│   │   │   ├── editor/    # Code editor components
│   │   │   ├── layout/    # Layout components
│   │   │   └── common/    # Common components
│   │   ├── contexts/      # React contexts
│   │   └── App.js         # Main app component
│   └── package.json       # Client dependencies
├── package.json           # Server dependencies
└── README.md             # Project documentation

🔧 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user
• POST /api/auth/logout - User logout

Code Management

• POST /api/code/execute - Execute code
• POST /api/code/save - Save code snippet
• GET /api/code/my-codes - Get user's code snippets
• GET /api/code/public - Get public code snippets
• GET /api/code/:id - Get specific code snippet
• PUT /api/code/:id - Update code snippet
• DELETE /api/code/:id - Delete code snippet

User Management

• GET /api/user/profile - Get user profile
• PUT /api/user/profile - Update user profile
• PUT /api/user/preferences - Update user preferences
• GET /api/user/stats - Get user statistics

🎨 Features in Detail

Code Editor

• Monaco Editor with full VS Code-like experience
• Syntax highlighting for 18+ programming languages
• Auto-completion and IntelliSense
• Error marking and debugging support
• Multiple themes (dark/light)
• Customizable settings (font size, tab size, etc.)

Code Execution

• Real-time execution using Judge0 API
• Input/output support for interactive programs
• Execution statistics (time, memory usage)
• Error handling with detailed error messages
• Multiple language support for execution

User Management

• Secure authentication with JWT tokens
• User profiles with customizable preferences
• Code snippet organization with folders and tags
• Public/private sharing options
• Execution history tracking

🔒 Security Features

• JWT Authentication for secure API access
• Password hashing with bcryptjs
• Input validation and sanitization
• Rate limiting to prevent abuse
• CORS configuration for cross-origin requests
• Helmet.js for security headers

🚀 Deployment

Heroku Deployment

1. Create a Heroku account
2. Install Heroku CLI
3. Create a new Heroku app
4. Set environment variables in Heroku dashboard
5. Deploy using Git:

heroku create your-app-name
git push heroku main

Vercel Deployment (Frontend)

1. Install Vercel CLI
2. Deploy the client folder:

cd client
vercel

🤝 Contributing

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

📝 License

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

🙏 Acknowledgments

• Monaco Editor - Professional code editor
• Judge0 - Online code execution engine
• React - Frontend framework
• Express.js - Backend framework
• MongoDB - Database

📞 Support

If you have any questions or need help, please open an issue on GitHub or contact the development team.

---

Happy Coding! 🚀