webos-anglular

Stars: 5
Language: TypeScript
Updated: 2025-10-30

WebOS — A Browser-Based Mini Operating System (Built with Angular)

Tagline: A modular, desktop-style operating system that runs entirely inside your browser — with draggable windows, built-in apps, and persistent storage.

Overview

WebOS is a web-based operating system built using Angular (17+). It simulates a full desktop environment inside the browser with draggable and resizable windows, multiple built-in apps, a taskbar, and persistent client-side storage using IndexedDB. Designed to be modular and extensible, WebOS is a great learning sandbox for advanced front-end concepts such as state management, drag-and-drop interactions, and client-side persistence.

Core goals:

Fully client-side — works offline in the browser
Modular architecture so new apps can be plugged in easily
Smooth, realistic desktop interactions (drag, resize, z-index, animations)

Core Vision

Bring the experience of an operating system into the browser — lightweight, modular, and endlessly extensible. No backend required. The app emphasizes a realistic desktop UX with a focus on modularity and persistent local storage.

Tech Stack

Frontend: Angular 17+, Angular CDK (Drag & Drop / Resize), RxJS
Styling: TailwindCSS or Angular Material (project-agnostic — pick one)
Storage: IndexedDB (via a wrapper such as Dexie.js or ngx-indexed-db)
UI Effects: Angular Animations (Framer Motion optional)
Optional Cloud: Firebase / Supabase (for future sync)

Folder Structure (high-level)

/webos/
├── /src/
│   ├── /app/
│   │   ├── core/            # global services, models, utils
│   │   ├── desktop/         # desktop view, wallpaper, icons
<!--
	CRAZY README: playful / bold / slightly insane but useful.
	Replaces the previous, more conservative README with a fun and discoverable home page.
-->

# 🌐 WebOS — The Browser OS That Thinks It's a Desktop

██████╗ ███████╗███████╗ ██████╗ ███████╗
██╔══██╗██╔════╝██╔════╝██╔═══██╗██╔════╝
██████╔╝█████╗  ███████╗██║   ██║███████╗
██╔══██╗██╔══╝  ╚════██║██║   ██║╚════██║
██║  ██║███████╗███████║╚██████╔╝███████║
╚═╝  ╚═╝╚══════╝╚══════╝ ╚═════╝ ╚══════╝

Tagline: A modular, desktop-style operating system that lives inside your browser — drag windows, spawn apps, and hoard data in IndexedDB. No backend. All chaos, all client.

Badges: [🧪 demo-ready] [⚡ Angular 17+] [🌙 Dark mode friendly]

---

Welcome to WebOS — the tiny, opinionated, slightly rebellious desktop environment for browsers. Built with Angular 17+, it provides draggable/resizable windows, a taskbar, built-in apps (Notes, Paint, Files), and persistent storage using IndexedDB. It's part sandbox, part demo, part art project.

If you want sensible documentation, flip to the sections below. If you want to party, scroll further down and read the wild ideas and developer easter eggs.

## Quick Highlights (TL;DR)

- Multi-window desktop UI (Angular CDK + clever state management)
- IndexedDB persistence (Dexie-friendly StorageService)
- Modular apps — drop in new Angular modules and register them
- Lightweight, offline-first, runs purely in your browser
- Fun: themes, wallpapers, draggable chaos

## CRAZY DEMO (GIF / screenshot placeholder)

![Demo GIF placeholder](assets/demo-placeholder.gif)

Tip: Replace `assets/demo-placeholder.gif` with an animated GIF showing windows being dragged, minimized, and a note being saved.

---

## Install & Run (real fast)

```bash
git clone https://github.com/your-username/angular-webos.git
cd angular-webos
npm install
# Optional (if you want Dexie example to run)
# npm install dexie

# Start dev server
ng serve --open

# Visit http://localhost:4200

If you don't have the Angular CLI installed globally, run npm install -g @angular/cli or use npx ng serve.

Wildly Important Notes

This project ships with a minimal UI and many TODOs — it's intentionally opinionated and playful.
The included StorageService example uses Dexie. Install dexie to use it.

Features (short)

Desktop: icons, wallpaper, right-click menu
Window Manager: drag, resize, z-index, minimize/maximize
Apps: Notes, Paint (canvas), Files, Settings
Persistence: IndexedDB for notes, files, settings
Theme engine: light/dark + wallpapers

Developer Guide — Make Your App a Citizen

Add a new Angular module under src/app/components/apps/your-app/.
Export the main component.
Register your app in src/core/app-registry.ts (or core/services/app-registry.service.ts) using the APP_REGISTRY pattern.
Implement open/close behaviors using the global WindowService.

Example registry snippet:

export const APP_REGISTRY = [
	{ id: 'notes', name: 'Notes', icon: '📝', component: NotesComponent },
	{ id: 'paint', name: 'Paint', icon: '🎨', component: PaintComponent },
	{ id: 'files', name: 'Files', icon: '📁', component: FileExplorerComponent },
];

StorageService (quickstart)

For a fast start, we've added a Dexie-based example service at src/core/services/storage.service.ts.

Install Dexie if you want to use the example:

npm install dexie

The service exposes CRUD helpers for notes and basic helpers for files/settings. It's minimal — adapt it for your domain model.

Architecture (brief and punchy)

DesktopComponent + WindowService manage UI. StorageService persists data. ThemeService handles wallpapers and palettes. Apps are modular and pluggable.

CONTRIBUTING — how to make the chaos better

See CONTRIBUTING.md for a friendly, slightly eccentric guide to contributing.