DEV Community

loading...
Cover image for Windows 11, but for Web

Windows 11, but for Web

Piyush Suthar
Hi 🖐, I'm a 17Y/O Web Dev from ‎🇮🇳. I love to code in JS❀.
・1 min read

Hello!

Recently I started creating a clone of Windows 11 for web in Preact. My main focus while creating this clone was performance. It must work smoothly even on a low end device (like mine).

image

The UI isn't complete yet. I'll be working on it in my free time. My focus while creating this is maintainability and Performance. Anyone with a basic level react knowledge should easily understand the code.

Here's the stack I used:-

  • Preact (For smooth runtime performance)
  • ViteJS (For smooth development performance)
  • CSS modules (I know frameworks would have been better. But I wanted some control and Performance Babe!)
    • TypeScript (Obviously :)

Try it out here -> Windows 11 Web

I'll recommend you to contribute or atleast check the code. You'll learn something :)

GitHub logo PiyushSuthar / Windows-11-Web

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Windows 11 Web

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Try Windows 11 Web:- win11.vercel.app

This isn't ready yet, and who knows when it will XD

Why?

Microsoft launched their newest version of Windows and I was very excited to test it out. So I made this!

BTW, This project was inspired by Macos Web

Stack

Acknowledgement

Thanks to Sunrit Jana for writing an awesome description for this project! and to Manivannan for sharing icons with me!

And to all the Super-Awesome contributors!

(tbh, finding suitable icons is the most difficult part of making this project)

More

Some similar, but super awesome projects!




Demo

Light Mode Start Menu
Start Menu (Light Mode)
Dark Mode Start Menu
Start menu (Dark Mode)

Widget Light Mode
Widget (Light Mode)
Widget Dark Mode
Widget (Dark mode)

image
Windows (Light Mode)

image
Context Menu

End

You can follow me on twitter to follow the progress @piyushsthr.

Discussion (19)

Collapse
cristhos profile image
Br CRISTAL DIBWE

Nice achievement, I think your approach can be used for something else.

Collapse
piyush profile image
Piyush Suthar Author

Thanks!
Yeah! I have made this reusable so that I can reuse the same code for any other web os...

Collapse
mohammadraufzahed profile image
Mohammad Raufzahed

This is awesome man.
keep going

Collapse
piyush profile image
Piyush Suthar Author

Thank you!!

Collapse
merichard123 profile image
Richard

This is so cool!!! You are so talented! Keep up the great work!!

Collapse
piyush profile image
Piyush Suthar Author

Thank you!!

Collapse
irvv17 profile image
irvv17

Wow. that's awesome :O

Collapse
irvv17 profile image
irvv17

You can even drag an drop the windows, pretty cool.

Collapse
piyush profile image
Piyush Suthar Author

There's much more you can do with it 😋.

Collapse
zakiazfar profile image
Mohd Ahmad

😍😍😍 Love it man

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
jadenguitarman profile image
Jaden Baptista

Awesome! Some time back I made a similar thing for mac: jaden.baptista.dev

Collapse
piyush profile image
Piyush Suthar Author

So cool!

Collapse
metacoding profile image
Meta Coding

Brilliant!

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!!

Collapse
zdoten profile image
z.En

This is pretty awesome, I prefer the macOS one.

Collapse
piyush profile image
Piyush Suthar Author

Yeah! Me too 😬

Collapse
codinghusi profile image
Gerrit Weiermann

Oh that's awesome!
It reminds me of OS.JS thats also a web ui with the goal to actually work as a desktop engine :)

Collapse
victorreissp profile image
VictorReisSp

very nice 🙂 ❀