A Windows 11 desktop environment emulator built as a React single-page application. Features a functional windowed OS with draggable/resizable windows, a taskbar, start menu, and multiple built-in apps.
- Draggable and resizable windows with 8-direction handles
- Taskbar with pinned apps, open window indicators, system tray, and live clock
- Start menu
- Desktop with wallpaper cycling, icons, and right-click context menu
- Dark mode support
- Window state persistence
| App | Description |
|---|---|
| Calculator | Standard calculator |
| Notepad | Plain text editor |
| WordPad | Rich text editor with formatting toolbar |
| Terminal | Command-line interface |
| File Explorer | File browser |
| Browser | Web browser |
| Settings | System settings (theme, wallpaper) |
| Minesweeper | Classic minesweeper game |
| Mario | Mario game |
- Node.js 18+ (recommended: use nvm with the included
.nvmrc)
cd win11
npm install
npm run devOpen http://localhost:5173 in your browser.
npm run build # TypeScript compile + production build
npm run lint # Run ESLint
npm run preview # Preview production builddocker build -t win11 .
docker run -p 8080:80 win11Open http://localhost:8080 in your browser.
- React 19 — UI framework
- TypeScript 6 — Type safety
- Vite 8 — Build tool and dev server
- Zustand — State management
win11/src/
├── appRegistry.ts # Central app registry (metadata, components, defaults)
├── store/
│ ├── windowStore.ts # Window state (position, size, focus, z-index)
│ └── themeStore.ts # Theme state (dark mode)
├── components/
│ ├── Window.tsx # Drag/resize logic, 8-direction handles
│ ├── Desktop.tsx # Wallpaper, icons, context menu
│ ├── Taskbar.tsx # Pinned apps, system tray, clock
│ ├── StartMenu.tsx # Start menu overlay
│ └── apps/ # Self-contained app components
├── App.tsx # Root: composes Desktop, Windows, Taskbar
└── types.ts # WindowState interface
See CONTRIBUTING.md for guidelines on how to contribute, including a step-by-step guide for adding a new app.
See CHANGELOG.md for version history.