How I made a desktop environment in the browser

#react #typescript #javascript #webdev

Welcome

Hey everybody, thanks for checking out my article. I'm Dustin Brett, software developer in Canada, and I'd like to tell you about my recent side project and it's ongoing status.

Plan

In August of 2020 I decided I wanted to try (again) to redo my personal website into something like what I see when I turn on my computer.

I wanted visitors to my site to feel like they had been given a window into my desktop environment and I wanted the elements of the desktop to be related to things about me, as this is for my personal website.

Research

I had seen a few great examples of other developers that had similar ideas involving an operating system desktop environment as a website. I also had seen many npm packages in the open source community which I thought could make cool "apps" within my fake OS.

Best examples I found:

Execution

It took me nearly 4 months of evenings working on it and I had a great time making it.

I feel like it was and still is the perfect side project because it has many different aspects and can be simple or complex depending on what kind of thing I want to add to it that day.

Things I've added so far:

Emulated styling of Windows 10 and Mac OSX elements
Emulated behaviors for clicks, hovering and focus
Animations for desktop icons, taskbar entries and windows
File system with drag & drop support (BrowserFS)
DOS emulation (JS-DOS)
MP3 (Webamp), PDF (PDF.js) & ODF (WebODF) file support
Animated Wallpaper (VantaJS)
WordPress blog "app" via iframe

The main framework I used is Next.js and it currently functions totally offline and is built via SSR. I am hosting the code via GitHub Pages and using a custom subdomain.

Demo: https://x.dustinbrett.com/
Code: https://github.com/DustinBrett/x

Reception

I eventually decided it was ready enough and I posted it on a few subreddits and got a really great reception. I ended up getting 1300+ GitHub Stars, 1000+ comments and 10,000+ upvotes on Reddit (/r/webdev, /r/programming, /r/reactjs, /r/itrunsdoom).

Future

Because of all the positive responses and great questions I got in regards to my project, I decided it was the perfect opportunity to redo this project from scratch and stream it all on my YouTube! Since deciding to do this I have streamed 9 episodes averaging over 2 1/2 hours each.

First Stream (Project Goals & Setup)

If you are interested in the streams I've got a playlist you can check out which has all the episodes. I do the streams every Saturday @ 9 PM PST. Please like/subscribe to my channel if you like what you saw and you want to be notified of new stuff.

Thank you everyone for the support!