You are browsing as a guest. Sign up (or log in) to start making projects!

CaffeineOS_lite

  • 3 Devlogs
  • 6 Total hours

This is my first ever WebOS and i will be using this project to learn JavaScript

Ship #1

I created CaffeineOS Lite, a WebOS that runs entirely in the browser. It features draggable windows, a functional terminal with commands like apt install, neofetch, and sudo. There’s also a file explorer with folder navigation and image preview, a login screen, a welcome window at startup, and a Start Menu with a Shut Down button. The design follows a caffeine theme and uses a dark Catppuccin color palette. Try it out; no password is needed. Just type any username and press Enter!

Try project → See source code →
Open comments for this post

2h 17m 40s logged

CaffeineOS Lite, Devlog #3
Welcome Screen & Start Menu
With the core OS functioning, I focused on two features that enhance its completeness: a proper welcome screen and a useful Start Menu.
The welcome screen opens automatically after login as a draggable window, similar to every other window in the OS. It features a coffee icon, the CaffeineOS Lite name, and a brief description. This small addition makes the first impression feel more intentional rather than just dropping the user straight onto the desktop.
The Start Menu required more thought. It slides up from the taskbar when you click the Start button and closes when you click anywhere outside of it. Inside, it has an apps list on the left and a system panel on the right with a Shut Down button, which takes you back to the login screen, resetting the session. The entire design includes a frosted glass effect using backdrop-filter: blur, matching the taskbar’s style.
Both features prompted me to consider state more carefully. I ensured that the Start Menu closes at the right moment and that the welcome window only opens once per session, not on every login attempt.

0
0
6
Open comments for this post

53m 30s logged

Devlog 2 — File explorer with folder navigation and image viewer

Added a functional “My Documents” app with a real file explorer. The root shows three folders (Wallpapers, Icons, Projects), and double-clicking navigates into them with a “..” button to go back.
Double-clicking an image opens a draggable mini-window with the image preview, centered on screen , reusing the same drag/z-index logic from the main windows. Double-clicking the WebOS1 project entry opens its GitHub repo in a new tab.
Under the hood, the file system is just a JS object (fileSystem) mapping folder names to arrays of items, which made it easy to add new folders/files without touching the rendering logic.

0
0
7
Open comments for this post

2h 40m 23s logged

Devlog 1 — Draggable windows, terminal, and login screen

Built the main desktop environment for WebOS1. Windows can now be dragged around the desktop and bring themselves to the front when clicked (z-index). Added a custom login screen that asks for a username on startup, no passwords, just stored in memory for the session.
The big feature today was a working terminal app with a real shell-like prompt (username@webos:~$). It supports help, whoami, ls, pwd, clear, sudo (denial message for fun), apt install with animated fake install output, and neofetch showing system info.
Also replaced the default wallpaper with the classic Windows XP Bliss background and added custom SVG/icon assets for the desktop shortcuts.

0
0
4

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…