mindows

A minimal Operating System created with React.

About

This project provides a minimal Windows 10 experience in browser. It runs completely on client's side. The user is presented with screen to create a new user account on the first visit. User can create multiple accounts, and log into any one of them. Desktop, TaskBar and StartMenu are shown after logging in. Basic apps like Notepad (text editor) and File Explorer are pre-built into the app. Windows 10 design is tried to be replicated for both apps.

New documents and folders can be created in File Explorer. Explorer ribbon similar to that in Windows 10 is also provided for Copy/Cut/Paste/Select/Open operations. Furthermore, project is designed in a way to add new apps without affecting the project structure. It's as simple as writing a new app, add it into softwares folder and edit the config/apps.js file. Functions like reading/writing filesystem (yeppp, not the real OS filesystem but the browser storage), etc. are automatically passed down to the app.

Filesystem is built using LocalStorage and IndexedDB API of browsers. So, incase the app data is deleted, complete accounts' data are deleted... like after a new OS installation.

It's not complete but it's honest work.

Features

• Windows 10 user interface
• Persistent Filesystem
• Multiple user accounts
• Multiple instances of apps
• Maximizable, minimizable, draggable and focusable apps instances
• Custom installable apps
• Different apps for different types of documents
• Separation of apps based on permissions

Contribution

This is my first project of this level, so it might have bugs. New apps (what about a music player?) can be written and added to the project. For now apps including Calender, Calculator and Settings are not pre-installed into it.

Getting Started with Create React App

This project was bootstrapped with Create React App. Follow the steps at ReactJS for more information about running this project locally.

Credits

Wallpapers used in the project are taken from different websites.

The windows 10 loading icon has also been inserted from codepen created by Fernando de Almeida Faria.

Used Libraries

Demo Video

mindows.mp4

Screenshots

Boot Screen

New User Account Screen

Switch User Screen

Desktop

Desktop with Start Menu

File Explorer

Notepad

Logout Screen