Web XP is a Windows XP desktop simulation built with React. This guide will help you install, run, and build the project.
Prerequisites
Before you begin, ensure you have Node.js installed on your system:
Node.js version 14 or higher is required to run Web XP.
Installation
Clone the repository
First, clone the Web XP repository to your local machine:git clone https://github.com/aduncandev/web-xp.git
cd web-xp
Install dependencies
Install all required npm packages using your preferred package manager:The project uses React 18, styled-components for styling, and Vite as the build tool.
Start the development server
Launch the development server:The application will automatically open in your browser at http://localhost:3000. Building for production
When you’re ready to deploy Web XP, create an optimized production build:
The production-ready files will be generated in the dist/ directory.
Preview the production build
To test your production build locally before deploying:
First steps
Once the application is running, you’ll experience the full Windows XP boot sequence:
- Boot screen — Watch the XP loading animation (4.5 seconds)
- Login screen — Click on the “Skillz” or “Administrator” user account
- Welcome screen — A brief welcome animation (2.5 seconds)
- Desktop — The full interactive Windows XP desktop environment
Double-click any desktop icon to launch an application, or click the Start menu in the bottom-left corner to explore available programs.
Project structure
Here’s a quick overview of the key directories:
src/
├── App.jsx # Main app logic with screen state management
├── WinXP/ # Desktop environment components
│ ├── apps/ # All 13 applications
│ ├── Footer/ # Taskbar and Start menu
│ ├── Windows/ # Window management system
│ └── Icons/ # Desktop icons
├── components/ # Boot, login, shutdown, BSOD screens
└── context/ # Global volume control context
Key features at a glance
Desktop environment
Draggable, resizable windows with full XP-style window management
13 applications
Internet Explorer, Minesweeper, Paint, Winamp, and more
Boot sequence
Authentic boot, login, and shutdown animations with system sounds
Volume control
Global volume control with mute, persisted to localStorage
Next steps
Explore features
Discover all 13 applications and desktop features
View source code
Explore the full source code on GitHub
Mobile compatibility: This application is designed for desktop use and may not function correctly on mobile devices or small screens.
