A fully functional, browser-based operating system built with React and Node.js, featuring a complete desktop environment, advanced file system, and professional text editor.
- URL : https://webos-five-eosin.vercel.app/
- Youtube : https://youtu.be/w_px6U_JwAI
- Modern UI: Windows-style interface with taskbar, system tray, and start menu
- Window Management: Resizable, draggable windows with minimize/maximize/close controls
- Desktop Customization: Drag-and-drop icons, customizable wallpapers
- Multi-App Support: Run multiple applications simultaneously
- Full CRUD Operations: Create, read, update, delete files and folders
- Real-Time Persistence: All changes saved to MongoDB database
- Smart File Explorer: Tree view navigation with grid/list display modes
- Search Functionality: Search by filename and content across entire file system
- Drag & Drop: Intuitive file management with context menus
- Monaco Editor Integration: Same editor used in Visual Studio Code
- Syntax Highlighting: Support for 20+ programming languages (JavaScript, Python, HTML, CSS, Markdown, etc.)
- Auto-Save: Automatic saving after 2 seconds of inactivity
- Manual Save: Ctrl+S for immediate saving to database
- Multiple Themes: Dark, light, and high contrast themes
- IntelliSense: Auto-completion, code suggestions, and error detection
- User Registration & Login: JWT-based authentication
- Session Management: Persistent login with secure token handling
- User Isolation: Each user has their own private file system
- Password Security: Bcrypt hashing for secure password storage
- File Explorer: Navigate and manage your file system
- Notepad: Professional code and text editor
- Terminal: Command-line interface (coming soon)
- Browser: Web browsing capabilities (coming soon)
- Settings: System configuration and preferences
- React 18 - Modern UI framework with hooks and context API
- Vite - Fast build tool and development server
- Monaco Editor - Professional code editor component
- CSS3 - Custom styling with animations and responsive design
- Context API - State management for authentication and file system
- Node.js - JavaScript runtime environment
- Express.js - Web application framework
- MongoDB - NoSQL database for data persistence
- Mongoose - MongoDB object modeling library
- JWT - JSON Web Tokens for authentication
- bcrypt - Password hashing and security
- Vercel - Frontend hosting and deployment
- Render - Backend API hosting
- MongoDB Atlas - Cloud database hosting
- GitHub Actions - CI/CD pipeline (coming soon)
- Detailed data modeling diagram created with Eraser.io
- Node.js 16+
- MongoDB 5+
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/webos.git cd webos -
Backend Setup
cd backend npm install cp .env.example .env # Update .env with your MongoDB URL and JWT secret npm run dev
-
Frontend Setup
cd ../frontend npm install cp .env.example .env # Update .env with your backend URL npm run dev
-
Access the Application
- Frontend:
http://localhost:5173 - Backend:
http://localhost:5000
- Frontend:
Backend (.env)
NODE_ENV=development
PORT=5000
MONGO_URL=mongodb://localhost:27017/webos
JWT_SECRET=your-super-secure-jwt-secret
FRONTEND_URL=http://localhost:5173Frontend (.env)
VITE_API_URL=http://localhost:5000/apiPOST /api/auth/register # Register new user
POST /api/auth/login # User login
POST /api/auth/logout # User logoutGET /api/filesystem # Get file system structure
GET /api/filesystem/file # Get file content
POST /api/filesystem/file # Create new file
POST /api/filesystem/file/save # Save file content
POST /api/filesystem/folder # Create new folder
POST /api/filesystem/item/rename # Rename file/folder
POST /api/filesystem/item/delete # Delete file/folder
GET /api/filesystem/search # Search filesGET /api/desktop # Get desktop configuration
PUT /api/desktop/icons # Update desktop icons
PUT /api/desktop/wallpaper # Update wallpaper- 🖥️ Terminal Application - Full bash-like command-line interface
- 📦 Package Manager - Install/uninstall third-party applications
- 🎨 Theme System - Customizable UI themes and color schemes
- 👥 Multi-user Workspaces - Shared folders and collaborative editing
- 🔍 Advanced Search - Full-text search with filters and indexing
- 📱 Mobile Support - Responsive design for tablets and phones
- ⚡ Real-time Collaboration - Google Docs-style collaborative editing
- 🔌 Plugin System - Third-party app development framework
- ☁️ Cloud Storage Integration - Google Drive, Dropbox, OneDrive sync
- 🤖 AI Assistant - Built-in AI for code completion and file management
- 🔒 Advanced Security - End-to-end encryption, 2FA, audit logs
- 📊 Analytics Dashboard - Usage statistics and performance metrics
- 🌐 WebAssembly Support - Run native applications in browser
- 🎮 Application Store - Marketplace for WebOS applications
- 🔄 Offline Support - Progressive Web App with offline functionality
- 🏢 Enterprise Features - SSO, LDAP integration, admin controls
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow ESLint configuration
- Write unit tests for new features
- Update documentation for API changes
- Use conventional commits
This project is licensed under the MIT License - see the LICENSE file for details.
- Monaco Editor - For providing the excellent code editor component
- React Team - For the amazing frontend framework
- MongoDB - For the flexible NoSQL database
- Vercel & Render - For reliable hosting and deployment
- Open Source Community - For inspiration and countless helpful libraries
- Developer: Taral Shah
- Email: taralshah604@gmail.com
- LinkedIn: taralshah9
- Twitter: @taralshah995
Made with ❤️ by Taral Shah