DEV Community

Cover image for Windows 10 Clone in the Browser - Project Update @ 9 Months
Dustin Brett
Dustin Brett

Posted on

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)

The Wall

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

Screenshot

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.

Discussion (18)

Collapse
qadir007 profile image
Abdul Qadir

Impressive!

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

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

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

Collapse
bcnzer profile image
Ben Chartrand

Seriously impressive. Well do e! And keep going!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks you! I will try!

Collapse
ashoutinthevoid profile image
Full Name

Cool stuff. Thanks for sharing it!

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! Np!

Collapse
jwp profile image
John Peters

Awesome work... tx.

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks!

Collapse
henryjw profile image
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!

Collapse
dustinbrett profile image
Dustin Brett Author

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

Collapse
dontfixyourpc profile image
Richard Rhein

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

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! Hopefully I exceeded your expectations.

Collapse
larsonnn profile image
Lars Feldeisen

winamp killed me.

Collapse
dustinbrett profile image
Dustin Brett Author

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.

Collapse
geomc profile image
Sascha

Jazz Jack rabbit 🐰♥️

Collapse
dustinbrett profile image
Dustin Brett Author

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/).

Collapse
jonrandy profile image
Jon Randy

You should check out friendos.com/

Collapse
dustinbrett profile image
Dustin Brett Author

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. :-)