Dec 19, 2024

I built a Web Desktop

I’ve been cooking. In this post, I talk about the project I’ve been working on for the last 7 months. You’re not going to want to miss this one.

Article hero image

I’ve been putting off posting about this project for a while. Part of me is eager to showcase it on my portfolio—I’ve been working on it for the last 7-8 months. But another part hesitates because the project is constantly evolving. I don’t want to share outdated features! Still, I can’t keep it off my portfolio forever. It’s my best work yet! So, what’s all the fuss about?

I’d like to informally introduce you to BogdanOS!

Overview

Did I really have to name it after myself? Yeah, I did. Naming things is hard! Besides, I don’t expect anyone else to use this project but me. So, in the grand kingdom of one, it only makes sense to crown myself as king.

Now, let’s clear something up: this isn’t a real operating system. Not that I think anyone was fooled. It’s a React app designed to look and feel like a desktop environment. I’m not the first to attempt this, and I’m far from the best.

In fact, here are some outstanding examples:

  • DaedalOS: If there’s a king of web desktops, it’s Dustin Brett, hands down. His project feels like a fully functional Windows environment. Seriously, you can play Doom on it, or open a browser within the desktop that can browse his site inside the browser. It’s next level. This project has been in development for over four years, and Dustin’s documented much of the process on his YouTube channel. Watching his journey was my biggest source of inspiration, and I learned a lot from it.
  • Puter: While I’m less familiar with the development process behind this one, it’s another incredible example. Puter is a web-based desktop environment with apps, games, cloud storage, and even a terminal emulator.
  • WebVM: This is a virtual Linux environment running in the browser via WebAssembly. It’s as impressive as it sounds.
  • Copy.sh: This site emulates real x86 operating systems in the browser. It’s basically sorcery.

There are plenty more examples out there; turns out, some people just really love building web desktops.

My project doesn’t quite measure up to many of them, but you know what they say about comparison being a joy burglar, or whatever. Mine is still a humble skeleton, but I’m happy enough to share it.

Here’s what I’ve implemented so far:

  • File System: Supports nested folders and files.
  • Window Manager: Lets you open, close, move, resize, minimize, and maximize windows.
  • Taskbar: Includes tabs for open windows and a system clock.
  • Selection and Drag-and-Drop System: Works across the file system and other UI elements.
  • Context Menu System: Custom right-click menus based on context.
  • System Menu Bar: Each app has a menu bar with relevant actions.
  • Animated Shader Wallpaper: Adds a dynamic visual element to the desktop.
  • Excalidraw Integration: A seamless integration of Excalidraw, an open-source diagramming tool. It works surprisingly well within my windowing system.
  • File Explorer: A basic folder window that integrates with the file system. You can browse files and folders inside other folders—though it’s still a bit buggy.
  • Solitaire: This one’s my pride and joy! A classic Solitaire game with three difficulty modes, scoring, a timer, and a local leaderboard. All built in React.
  • Headers: A utility app for easily creating styled comment headers. I use it to make fancy code section headers.

Why?

It started as entertainment—and honestly, I’m still having a lot of fun working on it. At the very least, it’s a fantastic way to showcase my portfolio. But it’s also become surprisingly useful. For instance, before I built the Headers app, I often relied on this tool to generate formatted text. Rebuilding it within my system allowed me to tailor the UX to my exact needs, and now it’s a tool I use all the time.

This project also serves as a great starting point for experiments. At its core, it’s a windowing system that runs isolated React apps. When I want to create something new, I don’t have to spin up a new project, design a site, or configure hosting—it’s all set up already. I can just create a new React module and start working on the app logic!

What’s Next?

In my current experiment, I’m building a Tetris clone in Godot. When I finish it, I’ll compile it into WebAssembly and attempt to integrate it into my project. This is a new frontier for me, so I’m excited to see how it goes.

In the medium to long term, I’d like to:

  • A notepad-like text editor.
  • A terminal emulator.
  • An NES emulator built in C++ and compiled to WebAssembly.

Yeah, I know those aren’t verbs. It’s my blog!

The project is open-source, and you’re welcome to fork it.

That’s about it. Thanks for reading! I hope you enjoyed this post. If you have any questions or feedback, feel free to drop me a message.

Javascript

React

Web Development

Back to Projects