Fixing bug and update scrollbar and readme file

Author: Shailendrasingh189

README.md

@@ -1,15 +1,239 @@
 # Tech_Compiler
 Code editor created for community .
+## Project Overview
+This project is an advanced Code Editor and Compiler platform designed specifically for students to write, compile, and run code in multiple programming languages—all within a single, unified web application. It provides a seamless and interactive experience, empowering learners to experiment and practice coding in an efficient environment.
 
-# React + Vite
+# Code Editor Compiler
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A comprehensive web-based code editor and compiler that supports multiple programming languages in a single platform. This project provides students and developers with an integrated development environment (IDE) for writing, editing, and executing code across various programming languages.
 
-Currently, two official plugins are available:
+The platform is built using modern web technologies including **React**, **Vite**, and **Tailwind CSS** to ensure a fast, responsive, and visually appealing user interface. It leverages an external compilation API service (requiring an API key) to compile and execute code securely in the cloud.`
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 🚀 Features
 
-## Expanding the ESLint configuration
+- **Multi-language Support**: Supports 40+ programming languages including:
+  - JavaScript, TypeScript, Python, Java, C/C++
+  - Go, Rust, Swift, Kotlin, Ruby, PHP
+  - Assembly, Bash, Haskell, Scala, SQL, and many more
+  - Compile and run code from a wide range of programming languages.
 
-If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- **Monaco Editor Integration**: Professional code editing experience with:
+  - Syntax highlighting
+  - Auto-completion
+  - Error detection
+  - Dark theme interface
+  - Minimap navigation
+  - User-friendly, syntax-highlighted editor to write and edit code.
+   
+- **Real-time Code Execution**: Execute code directly in the browser with:
+  - Live output display
+  - Error handling and display
+  - Execution status tracking
+  - Base64 encoding for secure transmission
+
+- **Responsive Design**: Modern, dark-themed UI built with Tailwind CSS
+- **Keyboard Shortcuts**: Ctrl+Enter to run code quickly
+- **Resizable Panels**: Adjustable editor and output panel sizes
+- **Language Switching**: Easy language selection with version information
+- **Code Snippets**: Access to a library of code snippets for common tasks
+- **Cloud Compilation:** Code is sent to a secure API to compile and run, handling backend complexities.
+- **Fast and Responsive UI:** Built using React with Vite and styled using Tailwind CSS for modern, responsive design.
+- **API Key Based Access:** Secure access to the compilation API with a user-provided API key.
+
+
+## 🛠️ Technologies Used
+
+- **Frontend Framework**: React 19.1.0
+- **Build Tool**: Vite 6.3.5
+- **Styling**: Tailwind CSS 3.4.17
+- **Code Editor**: Monaco Editor (@monaco-editor/react)
+- **HTTP Client**: Axios 1.9.0
+- **Code Execution API**: Judge0 CE via RapidAPI
+- **Language**: JavaScript/JSX
+- **Package Manager**: npm
+
+
+## Prerequisites
+- Node.js (version 14 or above)
+- npm or yarn package manager
+- API key for the code compilation service (you must register on the API provider's platform to obtain this)
+
+
+## 📦 Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone <repository-url>
+   cd tech_compiler
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Configure API Key**
+   - Sign up for RapidAPI and subscribe to Judge0 CE
+   - Replace the API key in `src/components/api.js`:
+   ```javascript
+   "X-RapidAPI-Key": "YOUR_API_KEY_HERE"
+   ```
+
+4. **Start the development server**
+   ```bash
+   npm run dev
+   ```
+
+5. **Open your browser**
+   - Navigate to `http://localhost:5173`
+
+## 🏗️ Project Structure
+
+```
+code-editor/
+├── public/
+├── src/
+│   ├── components/
+│   │   ├── CompilerLandingPage.jsx    # Main editor component
+│   │   ├── CodeEditorWindow.jsx       # Monaco editor wrapper
+│   │   ├── LanguageSelector.jsx       # Language dropdown
+│   │   ├── Output.jsx                 # Output display component
+│   │   ├── api.js                     # API integration
+│   │   └── constant.js                # Language configurations
+│   ├── hooks/
+│   │   └── keyPress.js                # Custom hook for keyboard shortcuts
+│   ├── App.jsx                        # Root component
+│   ├── main.jsx                       # Entry point
+│   └── index.css                      # Global styles
+├── package.json
+├── vite.config.js
+└── README.md
+```
+
+## 🔧 Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint for code quality
+
+## 🌐 API Integration
+
+This project uses **Judge0 CE API** through RapidAPI for code execution:
+
+- **Submission Endpoint**: Creates code execution jobs
+- **Status Endpoint**: Checks execution status and retrieves results
+- **Base64 Encoding**: Ensures secure code transmission
+- **Polling Mechanism**: Handles asynchronous execution
+
+### Supported Language IDs
+- JavaScript (Node.js): 63
+- Python 3: 71
+- Java (OpenJDK): 62
+- C++ (GCC): 54
+- C (GCC): 50
+- And 35+ more languages...
+
+## 💡 Usage
+
+1. **Select Language**: Choose from the dropdown menu (40+ languages available)
+2. **Write Code**: Use the Monaco editor with syntax highlighting
+3. **Execute Code**: Click "Run Code" or press Ctrl+Enter
+4. **View Output**: Results appear in the bottom panel
+5. **Resize Panels**: Drag the divider to adjust editor/output sizes
+6. **Handle Errors**: Error messages are displayed with red highlighting
+
+## 🎯 Key Components
+
+### CompilerLandingPage.jsx
+- Main container component
+- Manages editor state and execution
+- Handles resizing functionality
+- Integrates all sub-components
+
+### CodeEditorWindow.jsx
+- Monaco editor wrapper
+- Provides syntax highlighting
+- Manages editor configuration
+- Handles code snippets
+
+### LanguageSelector.jsx
+- Dropdown for language selection
+- Displays language versions
+- Updates editor configuration
+
+### Output.jsx
+- Displays execution results
+- Handles error formatting
+- Provides output scrolling
+- Toggle visibility
+
+### api.js
+- Judge0 CE API integration
+- Handles code submission
+- Manages execution polling
+- Error handling
+
+## 🚀 Deployment
+
+### Build for Production
+```bash
+npm run build
+```
+
+### Deploy to Vercel/Netlify
+1. Connect your GitHub repository
+2. Set build command: `npm run build`
+3. Set publish directory: `dist`
+4. Deploy automatically
+
+## 🔐 Environment Variables
+
+For production deployment, consider using environment variables for the API key:
+
+```javascript
+const API_KEY = import.meta.env.VITE_RAPIDAPI_KEY || "your-fallback-key";
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a 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
+
+## 📝 Future Enhancements
+
+- [ ] File upload/download functionality
+- [ ] User authentication and code saving
+- [ ] Collaborative editing features
+- [ ] Additional language support
+- [ ] Custom themes and fonts
+- [ ] Code sharing functionality
+- [ ] Performance optimizations
+- [ ] Mobile responsiveness improvements
+
+## 🐛 Known Issues
+
+- API rate limiting may occur with frequent requests
+- Some languages may have longer execution times
+- Large output may affect performance
+
+## 📄 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## 👨‍💻 Author
+
+**[ VISHAL & SHAILENDRA ]**
+- GitHub: [Vishal](https://github.com/@vishal6268),[Shailendra Singh Panwar](https://github.com/Shailendrasingh189)
+- Email: [[email protected]]([email protected]) , [[email protected]]([email protected])
+- LinkedIn: [Vishal Choudhary](https://www.linkedin.com/in/vishal-choudhary-1690202b7),[shailendrasingh189](https://www.linkedin.com/in/shailendrasingh189).
+
+## 🙏 Acknowledgments
+
+- Judge0 CE for providing the code execution API
+- Monaco Editor team for the excellent code editor
+- React and Vite communities for the amazing tools
+- Tailwind CSS for the utility-first CSS framework

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
+  "types": "module",
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "axios": "^1.9.0",

src/App.css

@@ -1,4 +1,4 @@
-import CompilerLandingPage from "./components/CompilerLandingPage";
+import CompilerLandingPage from "./pages/CompilerLandingPage";
 
 function App() {
   return (

src/App.jsx

@@ -1,37 +1,47 @@
 // src/components/CodeEditorWindow.jsx
 import Editor from "@monaco-editor/react";
-import { CODE_SNIPPETS } from "./constant"; // Correct path to constant.js
+import { CODE_SNIPPETS } from "../utils/constant"; // Correct path to constant.js
 
-const CodeEditorWindow = ({ onChange, language, code, onMount, className = "", style = {} }) => {
-  return (
+const CodeEditorWindow = ({
+  onChange,
+  language,
+  code,
+  onMount,
+  className = "",
+  style = {},
+  activeFileId,
+  // openFiles,
+}) => {
+  return activeFileId ? (
     <div className={`h-full ${className}`} style={style}>
       <Editor
-        height="100%" // Editor takes full height of its parent div
+        height="100%" 
         language={language || "javascript"}
         onMount={onMount}
         value={code}
-        theme="vs-dark" // VS Code's dark theme
+        theme="vs-dark"
         options={{
-          minimap: { enabled: true }, // Show the minimap (code overview)
-          fontSize: 14, // Set a comfortable default font size
-          scrollBeyondLastLine: false, // Don't allow scrolling past the last line
-          wordWrap: "on", // Wrap long lines
-          showUnused: true, // Highlight unused variables/imports
-          // More options for a "wow" feel:
-          cursorBlinking: "smooth", // Smooth cursor animation
-          cursorSmoothCaretAnimation: "on", // Animated smooth caret movement
-          renderLineHighlight: "all", // Highlight the whole line, not just the content
-          lineNumbersMinChars: 3, // Minimum width for line numbers
-          fontFamily: "Fira Code, Consolas, 'Courier New', monospace", // Use a popular coding font (install Fira Code for best results)
-          fontLigatures: true, // Enable font ligatures if the font supports them
-          'bracketPairColorization.enabled': true, // Colorize matching brackets
-          'guides.bracketPairs': 'active', // Show guides for bracket pairs
+          minimap: { enabled: true },
+          fontSize: 14, 
+          scrollBeyondLastLine: false,
+          wordWrap: "on", 
+          showUnused: true, 
+          cursorBlinking: "smooth",
+          cursorSmoothCaretAnimation: "on",
+          renderLineHighlight: "all", 
+          lineNumbersMinChars: 3, 
+          fontFamily: "Fira Code, Consolas, 'Courier New', monospace",
+          fontLigatures: true, 
+          "bracketPairColorization.enabled": true,
+          "guides.bracketPairs": "active",
         }}
         defaultValue={CODE_SNIPPETS[language]}
         onChange={(val) => onChange(val)}
       />
     </div>
+  ) : (
+    <p>Select or create a file to start editing</p>
   );
 };
 
-export default CodeEditorWindow;
+export default CodeEditorWindow;