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

Oldest comments (104)

Collapse
 
blueedgetechno profile image
Blue edge

Just visit the site: win11.blueedge.me

Collapse
 
blueedgetechno profile image
Blue edge

Thanks, I really appreciate it

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
 
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
 
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
 
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
 
blueedgetechno profile image
Blue edge

Thank you

Collapse
 
syntaxbreaker profile image
SyntaxBreaker

Awesome!

Collapse
 
gaweki profile image
Andrel Karunia S

Great!!

Collapse
 
naruaika profile image
Naufan Rusyda Faikar • Edited

The detail at the pixel level is impressive! Although, in my Chrome and Firefox, it isn't as accurate as in your screenshot above. And there isn't any blur in Firefox.

Collapse
 
blueedgetechno profile image
Blue edge • Edited

Turns out, firefox doesn't support backdrop filter and also has a poor rendering compared to chromium based browsers. I have to look for a workaround in the meantime.

Collapse
 
monfernape profile image
Usman Khalil

Good one. Really liked the level of details

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
 
mohdahmad1 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
 
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
 
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
 
pranavbaburaj profile image
Pranav Baburaj

It looks really cool. 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
 
devbysteph profile image
Stephen Praise

Greattt

Collapse
 
blueedgetechno profile image
Blue edge

Thanks

Collapse
 
luisgustavoj profile image
Luis Silva

That is a really well done job! i love it 😍

Collapse
 
blueedgetechno profile image
Blue edge

Thanks Luis

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