blueedgetechno / win11react

Windows 11 in React 💻🌈⚡

Win11React

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.

Notice

This project is not in anyway affiliated with Microsoft and should not be confused with Microsoft’s Operating System or Products. This is not a Windows 365 cloud PC.

THIS IS NOT THE APP STORE REPO: App Store

Documentation: https://win11react-docs.andrewstech.me/

This project is still a work in progress.

Live Experience🌈: win11.blueedge.me

Translation

You can find other language versions of Win11React here.

Simplified Chinese(中文简体)

Gallery

Why

WHY NOT? Why not just waste a week of your life creating a React project, just to cover up 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 + Setting
• Drag and Resize windows
• Startup and Lock screen
• Themes and Background
• Multilang Support

📑 Suggest More

Stack

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

FAQ

• Is this the full operating system?
  • No, This is not a full operating system and It is also not affiliated by Microsoft in anyway.
• How long did it take?
  • Honestly It took 2-3 days collecting assets, 2-3 planning and about 6 days programming it.
• Did you use 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

🌟 Star this project

⏫ Scroll to the ⭐️ button

If you believe this project has potential, feel free to star this repo just like many amazing people have 👇

Local Deployment

Docker

To use docker use the following command: docker run -d --restart unless-stopped --name win11react -p 3000:3000 blueedge/win11react:latest

Home Assistant

Balena-Cloud

---

Compiled

You can find a compiled .exe in the Releases section or via clicking HERE

WINGET - WINDOWS PACKAGE MANAGER If you have one of the latest windows builds then you can enter the command below in CMD

winget install blueedge.win11react

Online Deployment

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

Sharing

Although our license does allow for this project to be reposted, modified and shared without permission from us, we do kindly ask that credits are given to the original GitHub page and the Win11 react team when reposting the project publicly.

win11react's Issues

Failed to depoly on Heroku

Logs

-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected

-----> Creating runtime environment

   NPM_CONFIG_LOGLEVEL=error
   NODE_VERBOSE=false
   NODE_ENV=production
   NODE_MODULES_CACHE=true

-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)

   Resolving node version 14.x...
   Downloading and installing node 14.17.5...
   Using default npm version: 6.14.14

-----> Installing dependencies
Installing node modules
npm ERR! bindings not accessible from watchpack-chokidar2:fsevents

   npm ERR! A complete log of this run can be found in:
   npm ERR!     /tmp/npmcache.Kzszl/_logs/2021-08-30T09_40_17_986Z-debug.log

-----> Build failed

   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys
   
   Some possible problems:
   
   - Node version not specified in package.json
     https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
   
   Love,
   Heroku

! Push rejected, failed to compile Node.js app.
! Push failed

error Couldn't find package "webpack-merge" on the "npm" registry

Folder design

Hey, you have created a very beautiful clone for 11. I too had tried it in the very beginning of windows 11 education version roll out. I have tried to create a folder view in my build which you haven't done yet. Check the folder thing in my built. Here's the link. https://dev.akchauhan2.com/

Discord invite link is expired

Deploy localhost

Good morning, how to run the application locally? I tested some commands to compile and run, but it's giving errors in some parts. Are there specific commands to compile and run on localhost? I would like to test an intranet implementation.

Sir, can you use Camel-Case to regulate variables please ?

Sir, I am very happy to find this project, But I found the rules for naming variables are too confusing ！
I originally wanted to reconstruct this project to achieve the target of having become skilled at using react,
I couldn't read you code fluently. Because you used Javascript very flexiable, i had to canecel my plan to use Typescript

So I sincerely give you some advice for updating :

• Can you strengthen the specification of variable names？
• I think you can take a few minutes to learn about vite, which can make the project faster
• Although it's a little abrupt, can you use typescript to standardize the project?

I hope you can take my advice.

Featured films label

Fix the featured films label in the store, now is "Featured Games"

Some icons are wrong

I think you can get enough imformation through this image:

New fonts and Icons

Microsoft uses new Segoe UI Variable for font and Fluent Icons for system icons in windows 11.

this is the official page to get them.

Please use them instead of others to get more similar UI.

add file explorer

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

I would like to be able to add android apps to customize Dev Opps

The ability to build A virtual Mall and Libraries lie within the abilities of the joining teams with Microsoft ,Galaxy Design's, and Android Apps all in one spot plus the shopping mall with virtual stores

Phone Message Error

Refer to this screenshot:

The button to proceed anyways, is under the text. It may not cause a functionality issue, but it causes a graphical issue. I am running on Firefox for iOS, on iOS15 Public Beta 8, and am on an iPhone 6s.

Not to mention that there are a few grammatical errors, as well.

It should say: Even Microsoft couldn't make it far with Windows on phone, then how could I?

Update Favicon.ico

Describe the bug
Wrong logo/favicon.ico of Windows 11

To Reproduce

this is what is used here

and this is the one used.

Decrease the size of the windows logo in the booting screen

settings

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add Power Controls

Add Power Controls. Eg. Shutdown , Sleep , Hibernate , etc.

Minimal Design And User friendly experience

It will be helpful for new beginner who took interest in computer field and it will give experience.

Wallpapers should be 3d animated and silent and calm to get mantal stability and looks great on pc/laptop.

Add Settings app

i am trying to replicate the windows 11 settings app https://github.com/moreorless-ml/win11-settings , maybe you could include it, btw amazing work. 👍

P.S. From where did you get the icons.

More apps and features

Here is a list:

• python apps and cli with brython (this should be spawned in some sort of worker or iframe so that you can choose what is exposed to the instance)
• (node)js cli with eval() (this should be spawned in some sort of worker or iframe so that you can choose what is exposed to the instance)
• make the Microsoft store download apps from some sort of registry (so that the community can make apps)
• put a widget in the store which allows the user to create a webview app (the user enters a URL and it installs an app for that website using an iframe
• use Microsoft Oauth2 for login and use Microsoft to store the file system of the user or use the local storage API
• allow apps to create cli

Here are some apps already available as webpages:

• WhatsApp
• mail (Outlook)
• Netflix
• discord

night light

I think when you activate the night light button, there should be a filter that converts white to yellow (blue light filter)
here is an image I found on google about that:

Some more features

Align taskbar animation
It would be nice
Setup and OOBE (Out of Box Experince)
that will be nice too
PK (Product key) typing
Type random (and select what version to unlock)
Settings and Activate windows
Nice feature it will be

If some of these suggestions are impossible, i know, its very hard to make new functions like that i listed

Logon User Interface

Hi Guys! It is me. Yatin,
Hope you know me, I am on your Discord server.

I am requesting you guys to make a logon UI.
So, I will be making a reference to it.

And I request @blueedgetechno please take a look at it.
@blueedgetechno Also, try translating the HTML code to React.

Change "Action Center"

Windows 11 moves the "Action Center" to Calendar bar, but the site is still using the old style. Can you change it?

Command CMD TIME lag

Describe the bug
If you send the command TIME more thant one time, the cmd starts to lag

To Reproduce
Steps to reproduce the behavior:

1. Go to cmd'
2. write TIME
3. write anothe time "TIME"
4. write anothe command
5. See the error

Expected behavior
not lag

Desktop (please complete the following information):

• OS:Windows 10
• Browser Firefox

Sort

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Windows 11 Changes

Some of changes has been made on Windows builds, like right notification bar. (build 22000.160) You can track news on pages.

And didnt see right click menu.

Collabora or Onlyoffice / nextcloud

You could try and integrate Collabora or Onlyoffice as editors for local/cloud files via a nextcloud based file repository

This would bring full office capabilities to your project.

Some suggestions

Restart ability
Restart/shutdown ability (after shutdown screen shows restart button)
Trigger BSOD
Trigger BSOD by deleting important file
DEL command in terminal
Makes you trigger bsod actually

Help

Live Battery Feed

Hii Maintainers
-- Add a Feature Where Battery Icon Will change Based On the System Battery Status.

Windows 11 in SwiftUI.

Hi, Blue edge
Thank you for your project, which gave me some inspiration, so I spent some time using SwiftUI to write a macOS version of the Windows 11 app,and then just open source the project.
This is link: https://github.com/Jinxiansen/Windows11

If you have free time and are interested, please help me with some suggestions, thank you!

Right click menu doesn't work when right clicking in right side

Right click menu doesn't work when right clicking in right side

Right side

left Side

搜索按钮的bug

Describe the bug
打开搜索框，此时点击其他区域（除搜索按钮和搜索框外的其他任意区域）时，搜索框会显示为开始菜单，然后关闭

translated: Open the search box, when you click on other areas (any area except the search button and search box), the search box will be displayed as the start menu, and then closed.

Desktop (please complete the following information):

• OS: windows 10 21H1
• Browser edge、chrome、firefox
• Version 最新版（截止目前，即2021年7月23日09点29分）

Booting animation and User login screen

Two things:

• Is it possible to include a windows 11 boot screen/animation when the website is opened?

For reference:

If possible, include any sound of your choice when the boot animation is running

• Including a User login screen with a dummy password?

For reference:

Todo

1. Window preview on hover (ongoing)
2. Right click
3. Drag windows and desktop apps
4. Resize windows
5. More apps
6. Startup and lock screen

Comment if you suggest more

Add Contributing.md

It's spelt 'calendar', not 'calender'

lol

Make responsible for mobile phones

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

it shows win version as 10

Improve Dockerfile

What's up, @blueedgetechno? I was reviewing your Dockerfile and I think the following topics could be improved.

• Use an specific node image
• package.json and package-lock.json could be copied to the image using a single COPY statement.
• Install only production dependencies in the image
• Set NODE_ENV=production
• Expose 3000 port
• Replace CMD statement by ENTRYPOINT
• Set up a .dockerignore

Why?

• Using a specific node image, you reduce the risk of braking something if the latest image updates, I'd recommend using the LTS alpine
• You can use COPY package*.json and copy both files with a single command, and reduce a layer from the image.
• You don't need development dependencies in the image.
• Setup NODE_ENV var provides a better optimization.
• It's better making explicit exposed port
• When running the image with ENTRYPOINT no arguments can be overwritten in the command line.
• You should remove unused files from the image, such as README, LICENSE, git and GitHub files... by adding the .dockerignore

What do u think?

*cough cough* why not ditch react?

Is your feature request related to a problem? Please describe.
I hate react, its too slow. (my opinion don't fight)

Describe the solution you'd like
I'd do it myself, Lets just ditch react to make the thing faster shall we?

Describe alternatives you've considered
VANILA JAVASCRIPT

Additional context
Don't fight me :)

Thanks hope you allow me to ditch stupid react and make life better for all the human beings in the world

No blur effect in Firefox

firefox nightly 92.0a1 (2021-07-18) ↓

edge 91.0.864.70 ↓

Windows 10 21H1, i5 6500, RX570

Cannot load itself when nested twice

Describe the bug

Cannot navigate to https://win11.blueedge.me/ itself within the "virtual" Edge browser within the "virtual" Edge browser.

To Reproduce

Steps to reproduce the behavior:

1. Open https://win11.blueedge.me/ in a (real) browser.
2. Click the "Edge browser" button in the webpage.
3. In the new "virtual" Edge browser, navigate to https://win11.blueedge.me/.
4. Click the "Edge browser" button in the new inner webpage in the "virtual" Edge browser.
5. In the new inner "virtual" Edge browser in the "virtual" Edge browser, navigate to https://win11.blueedge.me/.
6. The webpage https://win11.blueedge.me/ does not load in the "virtual" Edge browser in the "virtual" Edge browser.

Expected behavior

I expect to play with unlimited nesting level 😝

Screenshots

Console:

All I need are….

office(word, excel, powerpoint)
visio
qq
wechat
baidunetdisk
matlab
texstudio
zotero

:-)

windows11 Component

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Whether to consider developing a series of component libraries to support Windows 11 UI?
Describe alternatives you've considered

Additional context

Other Deployment Software?

Is it possible to deploy tests and previews using other Deployment Software, for example: Railway? I already have a purchased plan on Railway, I would rather test my changes and contributions there, rather than Heroku.

improve the browser

1- New tab button
at ms edge, there is no new tab button

2- about:blank
this is an empty page, but I'm unable to access it

3- Dev tools
I'm sure you know what is this, but is it possible?

Command Line Bug

When you hit Enter with a blank space in Command Prompt,
You get this :

'' is not recognized as an internal or external command,
operable program or batch file.

Please fix this.

Calendar does not hide completely when choose a month which has 6 rows

Describe the bug
in the right bottom calendar, it will not hide completely if we choose a month which has 6 rows.

To Reproduce
Steps to reproduce the behavior:

1. Select a month which has 6 rows, for example, October 2021
2. Close the calendar
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop:

• OS: Windows
• Browser :Chrome
• Version :92.0.4515.107

Website Description

Dear windows11 maintainers,
On browsers, when searching in the address bar for the site, not the actual link, it shows this description:

This is weird, since I am not on a mobile device, I am on a touchscreen chromebook. The end part shouldn't be in the site description. All that needs to be there is: "Windows 11 made in react." Thanks!

---

Best Wishes,
Lukas Batema