Devaansh's WebOS
- 4 Devlogs
- 2 Total hours
My WebOS is a browser-based desktop OS simulation with draggable windows, built with an embedded-systems and homelab-inspired portfolio aesthetic.
My WebOS is a browser-based desktop OS simulation with draggable windows, built with an embedded-systems and homelab-inspired portfolio aesthetic.
Today we finished WebOS 1 and got it ready as the final Stardance submission.
The project is now a complete browser desktop instead of a rough prototype. It has a Windows-style desktop surface, custom desktop icons, a taskbar, a Start menu, draggable and resizable windows, minimize/close controls, focus layering, snapping, persistent layouts, and a public boot sequence that does not block visitors behind a password gate.
The custom apps are also in place:
system info, ls, whoami, ping, and an easter egg.The final polish pass focused on making the project feel shippable. I replaced generic letter icons with custom SVG icons, tightened the taskbar and Start menu, checked window behavior across desktop, tablet, and mobile widths, tuned the animations, and verified that the static export works from the generated out/ folder.
The deployed site is live at:
At this point, WebOS 1 meets the mission requirements: it has multiple draggable windows, a distinct visual identity, extra features beyond the guide, no real login gate, and a public link for reviewers. The README now points to the live site, and the devlogs are ready for the Stardance portal.
Today I rebuilt the WebOS interface to feel much more like a real desktop OS. The old version had windows, but it still felt like a dashboard. This pass added a proper desktop surface with wallpaper, desktop shortcuts, a bottom taskbar, a Start button, pinned apps, active app buttons, and Windows-style window chrome.
I also completed the planned Phase 3 custom features.
The terminal app now supports hardcoded commands:
system infolswhoamipingstardance as the easter egghelp, clear, and reset-layout
Window snapping works by dragging windows to screen edges or corners. Edges snap to half-screen layouts, corners snap to quarter-screen layouts, and a blue preview rectangle shows the snap target before release.
The system monitor is now animated. It has fake CPU, RAM, IO, uptime, a moving bar graph, and a fake process table with WebOS-themed process names.
Window layout now persists in localStorage. Open apps, minimized state, window position, size, and z-index are saved and restored after reload. I also added a reset path through the terminal and Start menu.
The boot sequence is now more complete: BIOS-style firmware lines, fake hardware checks, portfolio disk mount, fake login handoff, and automatic transition to the desktop. It still does not require a password.
I copied portfolio assets from D:/devaansh-website into this repo:
public/portfolio/me.pngpublic/portfolio/blogs/
manifest.json for the blog readerThe new WordPad app loads that manifest, lists the copied Markdown files, and opens them in a readable document-style page.
Verification: npm run build passed, npm audit --omit=dev showed zero vulnerabilities, and Playwright confirmed terminal commands, WordPad loading, edge/corner snapping, layout persistence, and no page-level scrolling.
The biggest change is the core windowing system. WebOS now has a reusable window model that tracks app id, title, position, size, open state, minimized state, and z-index. Windows can be dragged by their title bars, resized from the lower-right handle, focused by clicking, minimized to the taskbar, closed, and reopened through launchers.
I also added the baseline desktop experience for the Stardance mission:
For profile content, I used the local D:/devaansh-website repo instead of inventing copy. The WebOS apps now include Devaansh Pathak, CS + AI/ML student, reliable LLM agents, RL environments, evaluation systems, AI infrastructure, SRE-Zero, GitHub, LinkedIn, and email contact details.
I tested the implementation with npm run build, which passed and generated static routes. I also used Playwright against the local dev server to check multiple-window behavior: launching a window, minimizing and restoring from the taskbar, closing and reopening, dragging a window, resizing another window, and focus/z-index updates.
Next step: Phase 3 custom features, starting with the functional terminal commands and then window snapping/tiling.
Today I completed Phase 0 for WebOS 1, my Hack Club Stardance WebOS 1 mission project. The project now has a real Next.js and Tailwind CSS scaffold instead of only planning docs.
I added the App Router structure, TypeScript config, PostCSS/Tailwind setup, and a next.config.ts file with output: "export" so the site can stay compatible with static hosting. I also installed dependencies and generated the package lockfile.
The first page is a static desktop shell, not the full OS yet. It establishes the visual direction: dark terminal tones, compact desktop launchers, a boot-preview window, and a placeholder system monitor panel. This gives the project an embedded-systems and homelab identity before I start building actual window behavior.
I also checked the setup with a production build. npm run build completed successfully and generated static routes for / and /_not-found. npm audit originally flagged Next’s nested PostCSS version, so I added an override to use the patched PostCSS release and confirmed the audit now reports zero vulnerabilities.
Current state:
Next step: Phase 1, building the core windowing system with draggable, resizable, focusable windows.