Windows 10 Clone in the Browser - Project Update @ 9 Months
Tags: showdev, webdev, javascript, react
Published: 2021-09-08 03:53:36

Back at the start of this year I began [weekly live streams](https://youtube.com/playlist?list=PLM88opVjBuU7xSRoHhs3hZBz3JmHHBMMN) 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

{% youtube JLeAKuOx63k %}

# 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](https://github.com/jvilk/BrowserFS))
- Open zip/iso files directly
- Animated Wallpaper ([Vanta.js](https://www.vantajs.com/?effect=waves))
- Set an image as background
- Drag and drop files from outside the browser ([DnD API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_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](https://www.npmjs.com/package/music-metadata))
- File Explorer
  - Dynamic file/folder updates
- Taskbar entries
- Show desktop/open windows
- Clock
  - Synced to exact second
- Drag/Resize Windows ([React-Rnd](https://github.com/bokuweb/react-rnd))
- Animated Min/Max/Close Windows ([Framer Motion](https://www.framer.com/motion/))
- Cascade opening windows
- Filenames truncate unless selected
- Play mp3's via "Winamp" ([Webamp](https://webamp.org/))
  - Loads Winamp skins
- Edit files with an IDE ([Monaco Editor](https://www.npmjs.com/package/monaco-editor))
  - Language/syntax support
- Start Menu
  - Reset session (Power)
  - Quick access to Documents
- x86 emulator ([v86](https://copy.sh/v86/))
  - Load iso/img files
  - Linux with mock file system support
  - Kolibri with network support ([Kolibri](https://kolibrios.org/en/download))
  - Auto Save state
- DOS emulator ([js-dos](https://www.npmjs.com/package/js-dos))
  - Load zip/jsdos files
  - Auto Save state
- Play flash videos ([Ruffle](https://ruffle.rs/))
  - Drag files onto app directly to load
- WYSIWYG Editor ([TinyMCE](https://www.tiny.cloud/get-tiny/self-hosted/))
  - My blog posts from WordPress
  - Design/Edit mode

# Remaining To Do's (MVP)

![The Wall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mifbq4kb5aakfjdpyjmo.jpg)

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](https://xtermjs.org/))
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgef0jsfr38z3n5fz9ny.png)

**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](https://www.youtube.com/c/DustinBrett) for my latest weekly streams, so far I haven't missed one in 36 weeks. They are every Saturday @ 9 PM PT.