DEV Community

Cover image for Windows 11 in React Js 💻 🌈

Windows 11 in React Js 💻 🌈

Blue edge on July 13, 2021

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 ...
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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
Abdul 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
 
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
Abdul Rehman

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

Collapse
 
blueedgetechno profile image
Blue edge

Just visit the site: win11.blueedge.me

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
Abdul Rehman

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

Collapse
 
blueedgetechno profile image
Blue edge

Thanks man

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
Abdul Rehman

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

Collapse
 
blueedgetechno profile image
Blue edge

Thanks Casey

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
Abdul 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
Abdul 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
Abdul Rehman

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

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
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Abdul Rehman

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

Collapse
 
blueedgetechno profile image
Blue edge

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

Collapse
 
real_ib1 profile image
Ibrahim

Wow, I’m amazed 👏

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

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

Collapse
 
stephanieraymos profile image
Stephanie Raymos

Bruh this is sick!

Collapse
 
blueedgetechno profile image
Blue edge

Thanks Stephanie, :)

Collapse
 
pradeepradyumna profile image
Pradeep Pradyumna

Wow! So clean.
Keep inspiring ...!

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

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

Collapse
 
yogawicak profile image
yogawicak

Cool

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
Abdul Rehman

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

Collapse
 
kdev2005 profile image
K-Dev2005

Awesome

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

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

Wow cool!

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

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

Collapse
 
mahendrakulkarni177 profile image
Mahendra

Awesome !!

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

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

Collapse
 
boravivek profile image
Vivek Bora

Wow this is really amazing, I can definitely say you are quite skilled on development. Great work with this.

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

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

Collapse
 
habeeb57 profile image
Habeeb57

Great Work!

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

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

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
Abdul Rehman

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

Collapse
 
monfernape profile image
Usman Khalil

Good one. Really liked the level of details

Collapse
 
syntaxbreaker profile image
SyntaxBreaker

Awesome!

Collapse
 
devbysteph profile image
Stephen Praise

Greattt

Collapse
 
blueedgetechno profile image
Blue edge

Thanks

Collapse
 
mayankkalbhor profile image
Mayank K

Great work and keep up the good work

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

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

Collapse
 
gaweki profile image
Andrel Karunia S

Great!!

Collapse
 
asifsimform profile image
Asif Vora

Awesome

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

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

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
 
mafee6 profile image
Mafee7

2fps xD

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

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

Collapse
 
mafee6 profile image
Mafee7

Get ready to be caught be microsoft xD

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

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

Collapse
 
uwemisrael profile image
Uwem

This is so cool.

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Abdul 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
Abdul Rehman

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

Collapse
 
atifpasha profile image
sheikh atif

can we install window 11 now?

Collapse
 
blueedgetechno profile image
Blue edge

You can install the insider build, officially from microsoft.

P.S This is a clone not a real one

Collapse
 
mohdahmad1 profile image
Mohd Ahmad

WoW 😍😍

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

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

Collapse
 
blueedgetechno profile image
Blue edge

Thanks, I really appreciate it

Collapse
 
rehman0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Abdul 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
Abdul Rehman

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

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Why is it not open source anymore?

Collapse
 
blueedgetechno profile image
Blue edge

It is , checkout github.com/andrewstech/windows11-1

My repo got disabled by github. I'm working to fix it

Collapse
 
raihanpress profile image
RaihanPress

Hey! Try out Mine:
win11web.netlify.app/

Collapse
 
raihanpress profile image
RaihanPress

you can also try win11web.netlify.app

Collapse
 
rupeshpadhye profile image
Rupesh Padhye

🔥 🔥 🔥

Collapse
 
vishwakarma09 profile image
Sandeep Kumar

I kinda freaked out when I could see my outlook calendar and emails in the edge browser

Collapse
 
blueedgetechno profile image
Blue edge

Then you should be worried because I'm gonna make them very soon ... ( XD )

Collapse
 
kosovych profile image
Yaroslav Kosovych

I have only one question - Why?

Collapse
 
blueedgetechno profile image
Blue edge

I have an answer ... why not!

Collapse
 
luisgustavoj profile image
Luis Silva

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

Collapse
 
blueedgetechno profile image
Blue edge

Thanks Luis

Collapse
 
blueedgetechno profile image
Blue edge

Thank you

Collapse
 
ruben_delgadoduran_78cc9 profile image
Ruben Delgado Duran

Your website was just blocked at my school .**

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