Overview
This project is a partial clone of the Windows 11 desktop interface, implemented as a browser-based web application using React JS, and bootstrapped with Create React App.
Built as a learning initiative to sharpen skills in React and Redux, the project features selected desktop UI behaviors. It attracted attention from developers globally, serving both as a technical exercise and a portfolio highlight.
Highlights
- ⭐ GitHub Repository(opens in a new tab) received community engagement through stars and forks.
- 🌍 Featured in a LinkedIn post(opens in a new tab) by Indian developer Devansh Singh Parmar(opens in a new tab), showing the impact of this project.
Features
While not a full operating system replica, the project includes core UI interactions such as:
- Simulated Windows 11 desktop experience in the browser.
- Draggable, resizable, and closable windows.
- Dynamic wallpaper switching.
- Real-time date and time display.
- Basic terminal emulator.
- Application state is managed using Redux, including window positions, sizes, open/close statuses, and the control of active applications.
Role
Front-End Developer — Designed and implemented the user interface, built windowing logic, managed application state, and optimized UI responsiveness.
Core Stack
The programming language of the web.
Technology Breakdown
- JavaScript - Primary programming language.
- React - Used for component-based UI structure.
- Redux - Enabled centralized state handling across UI layers.
- Tailwind CSS - Simplified responsive styling with utility classes.
Development Period
Initial development began with the first Git commit on July 12, 2021.
Key Learnings
Through this project, I explored and developed a deeper understanding of:
- Handling layered UI interactions using Redux (z-index, focus states, modals).
- Structuring a desktop-like UI metaphor within a browser environment using React.
- Building draggable and resizable components from scratch.
- Using Tailwind CSS for scalable layout management.
- Applying event delegation and performance optimizations in a dynamic UI setting.
- Practical experience with ReduxJS in managing intricate state management workflows.
Live Demo
Explore the experience at win11os.derikn.com(opens in a new tab). Or interact directly using the embed below:
