A stunning, fully interactive Ubuntu Desktop Environment built entirely with React
Live Demo • Features • Tech Stack • Installation • Screenshots • Architecture
LinuxOS is a portfolio-grade web application that recreates the Ubuntu desktop experience in the browser. This project demonstrates advanced React patterns, modern UI/UX design principles, and complex state management — all while delivering a functional and visually stunning desktop environment.
💡 Why This Project Stands Out:
- Demonstrates advanced React component architecture
- Showcases modern CSS techniques including glassmorphism & animations
- Implements drag-and-drop functionality from scratch
- Features a working code editor with live execution
- Built with performance and user experience in mind
| Feature | Description |
|---|---|
| Lock Screen | Secure login interface with password authentication & animated UI |
| Dynamic Wallpapers | Multiple backgrounds with right-click to change |
| Draggable Icons | Custom drag-and-drop implementation for desktop icons |
| Context Menu | Native-feeling right-click menu with desktop actions |
| macOS-style Dock | Animated taskbar with hover effects and app launching |
- Glassmorphism Effects — Frosted glass blur throughout the interface
- Smooth Animations — Fade-in, scale, slide transitions using CSS keyframes
- Gradient Overlays — Beautiful color gradients on interactive elements
- Hover Effects — Lift, glow, and scale animations on interaction
- Custom Scrollbars — Styled scrollbars matching the theme
- Responsive Feedback — Visual feedback for all user interactions
- Monaco Editor integration (same editor used in VS Code)
- Syntax Highlighting for JavaScript
- Live Code Execution via Piston API
- Real-time Output display with error handling
- Resizable & Draggable window
- Full web browsing capability
- URL bar with search functionality
- Navigation controls (back, forward, refresh)
- Open external links support
- Integrated GitHub profile lookup tool
- View user profiles and repositories
- Embedded web application
- Embedded video player
- Coding tutorials integration
- Full window controls
- System Information — Browser, RAM, CPU cores, screen resolution
- Network Status — Connection type, speed, latency
- Battery Status — System power information
- Wallpaper Settings — Background customization guide
- Visual file browser interface
- Display created folders
- Grid layout with icons
- Ubuntu-styled terminal emulator
- Neofetch-style system information display
- Authentic Linux terminal aesthetics
| Technology | Purpose |
|---|---|
| React 18 | UI Library with Hooks & Context API |
| Vite | Next-generation build tool |
| TailwindCSS | Utility-first CSS framework |
| Monaco Editor | Code editor component |
| React Hook Form | Form state management |
| Axios | HTTP client for API calls |
| Lucide React | Modern icon library |
| React Icons | Additional icon sets |
| Service | Purpose |
|---|---|
| Piston API | Code execution engine for live coding |
| GitHub API | Profile search integration |
| Tool | Purpose |
|---|---|
| ESLint | Code linting & quality |
| PostCSS | CSS processing |
| Git | Version control |
- Node.js 18+
- npm or yarn
- Git
```bash
git clone https://github.com/cyber-rebel/LinuxOS.git
cd LinuxOS
npm install
npm run dev
npm run build ```
- Password: `12345678`
``` src/ ├── components/ # Reusable UI components │ ├── LockScreen.jsx # Authentication screen │ ├── Bottom.jsx # Dock/Taskbar │ ├── Brave.jsx # Browser application │ ├── VsCode.jsx # Code editor application │ ├── Terimal.jsx # Terminal emulator │ ├── Settings.jsx # Settings panel │ ├── Github.jsx # GitHub search app │ ├── Youtubess.jsx # YouTube player │ └── Folderrr.jsx # File manager ├── context/ # React Context providers │ ├── Authcontext.jsx # Authentication state │ └── Uicontext.jsx # UI state management ├── Desktop/ # Desktop environment │ └── Desktop.jsx # Main desktop component ├── utils/ # Utility functions & hooks │ ├── useDragable.jsx # Custom drag hook │ ├── ChangeBackground.js # Wallpaper switcher │ └── Button.jsx # Reusable button component ├── assets/ # Static assets (icons, images) ├── wallpaper/ # Desktop wallpapers ├── App.jsx # Root component ├── main.jsx # Application entry point └── index.css # Global styles & animations ```
| Pattern | Implementation |
|---|---|
| Custom Hooks | `useDragable` for drag-and-drop functionality |
| Context API | Global state for authentication |
| Component Composition | Modular, reusable components |
| Prop Drilling Prevention | Context for shared state |
| Utility-First CSS | Tailwind classes for styling |
| Category | Skills |
|---|---|
| React | Hooks, Context API, Component Lifecycle, State Management |
| CSS | Flexbox, Grid, Animations, Glassmorphism, Responsive Design |
| JavaScript | ES6+, Async/Await, Event Handling, DOM Manipulation |
| UI/UX | Modern Design Patterns, Animation, User Feedback |
| Architecture | Component Design, Code Organization, Reusability |
| APIs | REST API Integration, Error Handling |
| Tools | Git, npm, Vite, ESLint |
- Multiple user accounts
- File upload/download functionality
- More applications (Calculator, Notes, Music Player)
- Dark/Light theme toggle
- Persistent storage with LocalStorage/IndexedDB
- Mobile responsive version
- PWA support for installation
- Keyboard shortcuts
- Window snapping and tiling
CYBER-REBEL
Full Stack Developer | React Specialist
This project is licensed under the MIT License — see the LICENSE file for details.
⭐ If you found this project impressive, please give it a star! ⭐
Built with ❤️ and React