Windows 11 in React -

This open source project is made in the hope to replicate the Windows 11 desktop experience on web, using standard web technologies like React, CSS (SCSS), and Js.

Live Experience🌈: win11.blueedge.me

Gallery

Why

WHY NOT? Why not just waste a week of your life creating a react project just to coverup your insecurities of how incompetent you are. Just Why not!

Features

• Start Menu, Search Menu and Widgets
• Desktop and Right Click action
• Side Navigation and Calendar View
• Snap windows in different layouts
• Browser, Store, Terminal, Calculator
• Notepad, Vscode, Whiteboard
• File Explorer + other apps
• Drag and Resize windows
• Startup and Lock screen
• Themes and Background

📑 suggest more

Stack

• Framework - React (^17.0.2) + Redux
• Component/UI Library - None!!
• Styling Solution - SCSS and CSS Modules (tailwind).
• Icons - fontawesome

FAQ

• How long it took?

  • Honestly It took 2-3 days collecting assets, 2-3 planning and about 6 days programming it.

• Did you used any UI/Library?

  • No.

• Can I contribute?

  • Yes, you can! Open an issue, create a pull request, head over to discussions or join the discord.

• Where did you get the inspiration from, if you have?

  • I got the inspiration from this youtube video.

• What is the answer of Life, the Universe, and Everything?

  • 42

    

Docker

To use docker use the following command docker run -d --restart unless-stopped --name windows11 -p 3000:3000 ghcr.io/blueedgetechno/windows11:master

Heroku

Contributors

Known Issues

• Blur not working in Firefox browser.

Solution:

1. Open about:config in your firefox browser.
2. Search for layout.css.backdrop-filter.enabled and set it to true.

License

⚖️ CC0-1.0 License