Windows 10 Clone in the Browser - Project Update @ 9 Months

Back at the start of this year I began weekly live streams of my side project where I've been building a ✌functional✌ ✌OS✌ in the browser.

I've been having an absolute blast developing the thing and this Saturday will be my 37th stream/week. As I am coming up on 9 months of work on this project, I wanted to make a post/video demonstrating my progress.

Demo Video

Features

This list covers most of what I went over in the video but it's likely not complete or well organized.

• File System via HTTP & IndexedDb (BrowserFS)
• Open zip/iso files directly
• Animated Wallpaper (Vanta.js)
• Set an image as background
• Drag and drop files from outside the browser (DnD API)
• Internal drag and drop between folders
• Icon selection box
  • Select/move multiple files
• Session saved in between loads
  • Remembers size/position of windows
• Live "Peek" of windows on taskbar entry hover
• Context menus
  • New File, Folder & Text Document
  • Add, Rename, Delete, Copy, Cut, Paste & Download
  • Download multiple files to a zip
• Thumbnails for image and music files (music-metadata)
• File Explorer
  • Dynamic file/folder updates
• Taskbar entries
• Show desktop/open windows
• Clock
  • Synced to exact second
• Drag/Resize Windows (React-Rnd)
• Animated Min/Max/Close Windows (Framer Motion)
• Cascade opening windows
• Filenames truncate unless selected
• Play mp3's via "Winamp" (Webamp)
  • Loads Winamp skins
• Edit files with an IDE (Monaco Editor)
  • Language/syntax support
• Start Menu
  • Reset session (Power)
  • Quick access to Documents
• x86 emulator (v86)
  • Load iso/img files
  • Linux with mock file system support
  • Kolibri with network support (Kolibri)
  • Auto Save state
• DOS emulator (js-dos)
  • Load zip/jsdos files
  • Auto Save state
• Play flash videos (Ruffle)
  • Drag files onto app directly to load
• WYSIWYG Editor (TinyMCE)
  • My blog posts from WordPress
  • Design/Edit mode

Remaining To Do's (MVP)

I moved to keeping track of tasks via Post-It's quite a while ago and I've been loving it. I have a system of colors which denote category and difficulty (but don't ask me to explain it). The ones on the whiteboard are the ones I plan to finish before I do my first release. Keep in mind I often do things not on this board and usually when I finish a yellow I make a lot of reds (bugs).

The listed MVP tasks (not including bugs) as of today are:

Files

• Change directory structure to better match Windows

Taskbar

• Nested Start Menu Items
• Improve Start Menu Enter/Exit Transitions
• Improve Peek height to fill better

Window

• Menu Bar
• Dynamic URL loading for Container Apps
• Min/Max/Close icons for title bar menu

File Explorer

• Navigation (Address Bar & Buttons)
  • Use folder name for title
• Column/Detail View
• Status Bar
• Open in Same Window

Dialogs

• Open & Save File
• Transfer Progress

Apps

• Terminal/CLI (xterm)
• Image Viewer
• Video Player
• Loading status for Container Apps

File Manager

• Reorganize Icons on Drag
• Store Icon Order
• Setup Recursive Copy, Delete & Zip
• Context Menu
  • Compress/Decompress
  • Sort By
  • Share API
  • Create Shortcut
• Improve Rename Textarea visuals
• Improve File Name Truncate logic

System

• Save custom app settings to session

Current Status

Source Code: https://github.com/DustinBrett/x/tree/redo

Thanks for checking out my project! If you want to follow my progress please check out my YouTube channel for my latest weekly streams, so far I haven't missed one in 36 weeks. They are every Saturday @ 9 PM PT.

Comments

[Sascha Picard]

Jazz Jack rabbit 🐰♥️

[Dustin Brett]

Ya that is a fun one. I actually don't have Jazz Jackrabbit yet on this version, but I will by the time I release, just like in v1 (x.dustinbrett.com/).

[Richard Rhein]

Damn. I did not expected that it would look like that. It’s awesome keep going!

[Dustin Brett]

Thanks! Hopefully I exceeded your expectations.

[Abdul Qadir]

Impressive!

Can you tell me how to make a prototype website similar to Figma?

[Dustin Brett]

Thanks!

As for making a prototype website, I'm not sure tbh. One brick a time. :-)

[Full Name]

Cool stuff. Thanks for sharing it!

[Dustin Brett]

Thanks! Np!

[Larson]

winamp killed me.

[Dustin Brett]

Thanks, I tried my best to integrate the amazing work of github.com/captbaritone/webamp into my OS. I will be adding visualizations via github.com/jberg/butterchurn eventually too.

[John Peters]

Awesome work... tx.

[Dustin Brett]

Thanks!

[Henry Williams]

Thanks for sharing the source code. I've been wanting to do a MacOS clone and now I feel more inspired to do it!

[Dustin Brett]

No problem. It's very possible to do, one step at a time and eventually something appears. Good luck!

[Jon Randy 🎖️]

You should check out friendos.com/

[Dustin Brett]

Thanks for the tip. I've actually seen this before along with almost every other type of app like this on the web. I'm a bit obsessed with these projects. :-)

[Dustin Brett]

Thanks you! I will try!