DEV Community

Cover image for Windows 11 in React Js πŸ’» 🌈
Blue edge
Blue edge

Posted on

 

Windows 11 in React Js πŸ’» 🌈

Hello devs,

So this is a windows 11 clone that I made in React in the span of 7 days. Would you like to check out? I bet you wont be able to tell the difference in full screen mode.

Website: win11.blueedge.me
Github: blueedgetechno/windows11

All Apps

Widgets

Snapping tool

And this is just the tip of the iceberg, visit: win11.blueedge.me

Top comments (110)

Collapse
 
areeburrub profile image
Areeb ur Rub

Cool!
I suggest you to Add

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Enter fullscreen mode Exit fullscreen mode

So that doesn't resize itself on mobile devices.

Collapse
 
blueedgetechno profile image
Blue edge

It wasn't meant for mobile devices but Thanks for your suggestion.

Collapse
 
ahmeteneskcc profile image
Ahmet Enes KCC

Cool

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
areeburrub profile image
Info Comment hidden by post author - thread only accessible via permalink
Areeb ur Rub

It's also good but this one is also not compatible with mobile devices, I mean in tablets also you don't want anyone to zoom in for that you can also use the same meta tag.

 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Thanks For your feedback..
I am trying to making it compatible with mobile devices...

Collapse
 
sami_hd profile image
Sami

I just tricked my brother into thinking that I download windows 11 XD
Just brilliant!

Collapse
 
blueedgetechno profile image
Blue edge

Now that's what we call a pro move

Collapse
 
biomathcode profile image
Pratik sharma

you can actually download windows 11 in beta. Just saying. You would have to download it manually though

Collapse
 
sami_hd profile image
Sami

Yeah but I don't think the trick is worth that work.

Thread Thread
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
blueedgetechno profile image
Blue edge

I downloaded it in a vm and got the color references and what not

Thread Thread
 
biomathcode profile image
Pratik sharma

yeah, you literally clone it :) as a website.

You are great.

It has performance issue or maybe my laptop is slowing down day by day

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
bobbyqgard profile image
Rob Gardner

That's hilarious

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
catalinradoi profile image
CatalinRadoi

Is this the "cloud" version Microsoft was talking about? 🀣

(Looks pretty neat, @blueedgetechno )

Collapse
 
olivertembo profile image
olivertembo

This is the one. haha

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
blueedgetechno profile image
Blue edge

If there is any cloud version then I'm in big trouble πŸ˜‚

Collapse
 
blueedgetechno profile image
Blue edge

Just visit the site: win11.blueedge.me

Collapse
 
rlogical profile image
Rlogical Techsoft Pvt Ltd

Great post but get to know more here about Microsoft Windows 11 Launched: Know Expected Features, and More.

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
abdelrahmandeghedy profile image
Abdelrahman AbouDeghedy

This is really fantastic! Great work!

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
blueedgetechno profile image
Blue edge

Thanks man

Collapse
 
posandu profile image
Posandu

Thank you for making this !

Collapse
 
blueedgetechno profile image
Blue edge

Thanks for visiting it.

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
hash_codes profile image
HashCodes

Wow, I’m amazed πŸ‘

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
shazamshakeel profile image
Shazam Shakeel

Hi @blueedgetechno , Which React UI Library/Framework You used in this Project ?
And What are Your thoughts on React Material UI ?
Thanks !

Collapse
 
blueedgetechno profile image
Blue edge

Apparently I didn't used any React Ui Library, it was all made from scratch. I used tailwind for css, fa fa icons and redux for state handling but not anything for framework. The material ui is really handy when you are building a production app but doesn't seems lucrative when you want customised components.

Collapse
 
shazamshakeel profile image
Shazam Shakeel

Thanks !

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
itscasey profile image
Casey πŸ’Ž

This is seriously impressive - great job

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
blueedgetechno profile image
Blue edge

Thanks Casey

Collapse
 
csumm profile image
Carl Summers

This is awesome! I tried to use the browser inside the browser to see if it would work but oh well haha. Really neat!

Collapse
 
blueedgetechno profile image
Blue edge

There are many limitations due to CORS policy, anyway thanks for checking out.

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
abhilearnstocode profile image
Abhii

I didn't expect to open microsoft store at all 🀯 It is insanely great man!

Great Work.

Collapse
 
blueedgetechno profile image
Blue edge

You can also open vscode, terminal, calculator, edge and notepad. I will adding many more. Make sure to visit github repo if you have any suggestion.

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
saurabhh333 profile image
shadow333

If Microsoft sees this.
So he will fire some employees.
πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
zakiazfar profile image
Mohd Ahmad

WoW 😍😍

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
 
zazapeta profile image
Ghazouane

This is huge, well done !

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Some comments have been hidden by the post's author - find out more

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!