A fully functional cloud-based desktop environment built with React, TypeScript, and Tailwind CSS. Features include a lock screen, user management, AI assistant powered by Groq, task manager with real data, and much more.
- Multi-user support with password authentication
- User profiles with avatars and roles (Admin/Standard)
- Last login tracking and session management
- Beautiful lock screen with live time/date and system status
Default Users:
- Administrator (password:
admin123) - Guest User (password:
guest) - Developer (password:
dev123)
- Real AI integration using Groq's LLaMA 3.3 70B model
- Multi-domain assistance: Coding, writing, math, research, creative tasks
- Code generation with syntax highlighting
- Voice input simulation
- Conversation history with markdown formatting
- Fallback responses when API is unavailable
- Real-time system monitoring
- Live process tracking with CPU, Memory, Disk, Network usage
- Performance metrics for CPU, Memory, Disk, Network
- Hardware information display
- Process sorting by any column
- Integration with open windows
- Updates every 2 seconds with realistic data
- Full Monaco Editor integration
- Multi-language support: Python, JavaScript, HTML, CSS, Java, C, and more
- File explorer with folder navigation
- Integrated terminal with proper resizing (150px-600px)
- Code execution simulation for multiple languages
- Live HTML preview
- Syntax highlighting and IntelliSense
- Dark/Light theme toggle
- 15+ Beautiful wallpapers from Unsplash
- Categories: Nature, Abstract, Modern, Anime, Urban
- Real background images (no gradients)
- Accent color customization
- Instant preview and application
- High-quality images optimized for desktop
- Electron webview integration for full website compatibility
- Navigation controls: Back, Forward, Refresh, Home
- Address bar with search and URL support
- Quick links to popular websites
- Bookmark support
- HTTPS indicator
- External link option to open in new tab
- Smooth animations throughout the UI
- App indicators showing running applications
- Draggable and resizable windows
- Taskbar with pinned apps and system tray
- Start menu with app launcher
- Action center with notifications and quick settings
- Context menus on right-click
- Desktop icons with hover effects
- File Explorer with full file system navigation
- Notepad for text editing
- Paint Studio Pro with drawing tools
- Calculator with scientific mode
- Settings with system configuration
- And more!
- React 18 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling
- Zustand for state management
- Monaco Editor for code editing
- React RND for draggable windows
- Lucide React for icons
- Groq API for AI capabilities
- Sonner for toast notifications
- Custom CSS animations for smooth transitions
# Clone the repository
git clone <repository-url>
# Navigate to project directory
cd windows-11-web
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildThe Groq API key is already configured in the code. If you want to use your own:
- Get your API key from Groq Console
- Update the
GROQ_API_KEYinsrc/components/apps/AIAssistant.tsx
const GROQ_API_KEY = 'your-api-key-here';- Launch the application
- Select a user account
- Enter the password
- Press Enter or click "Sign in"
- Double-click icons to launch applications
- Right-click for context menus
- Drag windows to move them
- Resize windows from edges and corners
- Green dots indicate running applications
- Click the Nexus AI icon on desktop
- Type your question or request
- Press Enter or click Send
- Get intelligent responses powered by Groq
- Use voice input button for simulation
- Press Ctrl+Shift+Esc or launch from desktop
- View real-time system performance
- Monitor running processes
- Sort by CPU, Memory, Disk, or Network
- Switch between tabs for different views
- Open Settings from Start menu or desktop
- Navigate to Personalization
- Choose from 15+ beautiful wallpapers
- Select accent colors
- Adjust system settings
- Launch Web Browser from desktop
- Enter URL or search term
- Use navigation buttons
- Click external link icon to open in new tab
- Webview provides full website compatibility
Edit src/components/apps/Settings.tsx:
const wallpapers = [
{
id: 16,
url: 'https://your-image-url.jpg',
name: 'Your Wallpaper',
category: 'nature'
},
// ... more wallpapers
];Edit src/components/apps/AIAssistant.tsx:
{
role: 'system',
content: 'Your custom system prompt here'
}Edit src/components/Desktop.tsx:
const desktopIcons = [
{ id: 'your-app', icon: '🎯', name: 'Your App' },
// ... more icons
];- Terminal properly positioned below Monaco editor
- Resizable with drag handle (150px-600px range)
- Content visible above taskbar
- Proper scrolling and overflow handling
- High-quality images from Unsplash
- Multiple categories for variety
- Lazy loading for performance
- Proper aspect ratio and scaling
- Real-time AI responses
- Streaming support (optional)
- Error handling with fallback
- Context-aware conversations
- Full website compatibility
- No CORS restrictions
- Proper navigation
- Session persistence
- 60fps animations throughout
- Lazy loading for images
- Optimized rendering with React
- Efficient state management with Zustand
- Code splitting for faster loads
- Responsive design for all screen sizes
- Webview requires Electron environment for full functionality
- Some websites may still have CORS restrictions
- AI responses depend on Groq API availability
- System monitoring shows simulated data (not actual system resources)
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- Wallpapers: Unsplash
- AI: Groq
- Icons: Lucide
- Editor: Monaco Editor
For issues, questions, or suggestions, please open an issue on GitHub.
Enjoy your Cloud Edge OS Experience! 🎉