DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for A web-based desktop environment - two months later
shmuelhizmi
shmuelhizmi

Posted on • Updated on

A web-based desktop environment - two months later

About two months ago I have posted here an article on a project of mine called "web-desktop-environment", if you're interested in the idea of a web-based desktop environment you can read about it here


in this post I'm going to share the progress I have made since I first posted the article

A brief introduction to the project ๐Ÿ‘ฉโ€๐Ÿซ

"web-desktop-environment" is a desktop-environment (a visual interface for a computer) that can run in a web browser over a NodeJS server, the advantages of "web-desktop-environment" over a regular desktop-environment is that it is much slimmer and portable compare to a regular desktop.

Use cases

  • interface for a cloud server (can possibly be used as a replacement for control panel)
  • interface for small/low power computers like the Raspberry Pi zero
  • interface for controlling your computer over a long distance

A demo video ๐Ÿ“น

A live demo ๐Ÿ–ฅ

There is a live demo (serverless) running here
Demo

PWA Screenshot ๐ŸŽž

This is a screenshot of the app running as a PWA in a detachable windows mode
PWA

Upcoming features ๐ŸŽ†

Media Players apps are on their way
Media Players

Looking to build a full-stack app that pushes the web to its limits yourself?

if so you may be interested in the framework I build and used to build this project, the framework is "@react-fullstack/fullstack" and you can read more about it here


GitHub logo shmuelhizmi / react-fullstack

a set of packages for creating full-stack React applications

React Fullstack

"React Fullstack" is collection of libraries for creating fullstack applications that are based on React!

"React Fullstack" main packages are




All my progress since the first post ๐Ÿฅณ

Since the last update, I have made a few new features and improvement

  • Resizeable windows - you can now resize windows.
  • Notepad - a notepad app.
  • PWA - the app can now also run as Progressive Web App.
  • Detachable windows mode - you can now run the desktop in a detachable windows mode which means that every window will open as a separate native window.
  • style changes - the app is currently moving thought a big style redo, to give it a more "native os" like style.
  • big speed improvement from moving the backend from reflow to my own framework "@react-fullstack/fullstack"
  • custom themes - create your own theme using the settings app

Contribute yourself ๐ŸŽ

if you like the project and interested in contributing to it yourself - feel free to open a PR thought Github.
Note that contribution does not have to be in the code side of things, contributing to the project README would be awesome!

Checkout the project ๐ŸŽฎ

GitHub logo shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

Web Desktop Environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

just like any other desktop environment WDE was design to abstract the use of your computer is a visual way but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.

Why?

WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortableโ€ฆ

Top comments (0)

Classic DEV Post

brain computer interface

Experimenting with brain-computer interfaces in JavaScript