Kobayashi OS

Cleaned up the codebase, fixed a minor bug, and finally built a manual wallpaper changer.
Decided to use global state for it and… wow. It actually clicked. I was stuck for a minute overthinking how the workflow should look, but once I just started typing, it made total sense.
State management isn’t nearly as painful as I used to think.
Naturally, it didn’t work on the first try—the wallpaper wasn’t updating at all. Turns out I forgot a set of parentheses and had a stupid typo. Classic. Fixed that, and now it’s smooth sailing.

I started moving my app state from local state to a global store using Zustand.
Right now, the open/close state of applications is managed globally, and next I’ll move the window dragging logic there as well.
The dragging system already works locally, so this is mostly a refactor to make the OS easier to scale.I also added a Settings app, although it doesn’t do anything yet. I decided to focus on getting the core OS functionality solid before adding more features and applications. Once that’s done, I’ll add things like manually changeable wallpapers and expand the Settings app.
As someone who’s still new to state management, I had no idea how to use a global store when I started. So before writing code, I spent time learning Zustand, understanding how global state works, and planning the architecture instead of jumping straight into implementation.There were plenty of moments where I got stuck. I had a few headaches trying to wrap my head around the concepts, but I kept going until it finally clicked.

No big visual changes, but I think I crossed a small milestone—one that’s going to make everything I build next much cleaner and easier to manage.

Fixed a sneaky LocalStorage bug today! 🛠️

I initially put JSON.stringify directly inside useState, which completely crashed the app and prevented it from opening.
Rewrote the logic by moving JSON.stringify into a useEffect hook with tasks as a dependency. That got it working, but refreshing the page triggered a new bug: local storage was getting overwritten with an empty array.
I logged the data flow at every stage and caught the issue: useEffect was running on initial mount before state was restored. Added a simple length check (tasks.length > 0) before stringifying, and everything works perfectly now!
Always check your mount cycles! 🚀

It’s been a while since my last update, so here is what I’ve been building and refining lately:
UI Refactoring:
Invested a significant amount of time redesigning and polishing the UI (still a work in progress, but looking much better!).

Window Management:
Added support for opening, minimizing, and closing windows.

Calculator App:
Cleaned up the codebase and added new functionality.

Task Tracking:
Added a strike-through feature for completed items in To-Dos App.

Next up: Implementing localStorage so task completions and window states persist across sessions.

Focus was the window manager.

Completed
Implemented dynamic z-index so the active window is always brought to the front.
Added window minimization.Implemented restore functionality from the Apps Bar.
Preserved window state while minimized instead of closing the application.

Challenge: Initially, minimizing a window removed it from the UI, but there was no way to bring it back because clicking the app icon simply ignored already opened apps.

Solution: Instead of treating minimized windows as closed, I introduced a minimized state for each window. The Apps Bar now checks whether an app is already open, minimized, or closed, and performs the appropriate action—open, restore, or bring it to the front. This keeps the component mounted and preserves its state while hidden.

The desktop now supports opening, closing, dragging, minimizing, restoring, and proper window stacking. With these core interactions in place, the next milestone is maximize/restore, followed by window resizing and a global state refactor with Zustand.

Continued building the window management system for Kobayashi OS.

Implemented draggable application windows from scratch using React mouse events (mousedown, mousemove, mouseup) with proper drag offsets for smooth movement. Refactored the layout to introduce a dedicated desktop area, keeping windows constrained within the workspace instead of the entire page.

Spent most of the session debugging positioning logic, DOM measurements, and boundary constraints. The draggable window system is now functional and forms the foundation for upcoming features like minimize, maximize, focus (z-index), and Zustand-powered window state management.

Continued refining the Kobayashi OS interface.Finalized the built-in app icons and continued shaping the application dock and overall desktop structure to make the OS feel more like a complete desktop environment.Built the first built-in application—a basic calculator—with support for standard arithmetic operations. This marks the beginning of adding functional utilities to the OS.The focus remains on establishing a solid foundation before expanding into more advanced applications and features.

Continued working on the Kobayashi OS layout.

The overall design is still evolving, and I’m experimenting with different arrangements before settling on a final structure.
I added icons for the built-in applications and started shaping how the interface should feel.

No application logic yet—right now the focus is on finding the right layout before building the functionality.

DevDock is no longer just a collection of developer tools—it’s being redesigned into Kobayashi OS , a browser-based operating system built for developers.

This update focuses on restructuring the application’s architecture, replacing the original layout with an OS-inspired interface, and laying the groundwork for applications, tools, and a desktop-like workflow.

The goal is to create a cohesive environment where developer utilities feel like native applications rather than separate web pages.The transition is still in progress, but the foundation for Kobayashi OS is now replacing the original DevDock vision.

DevLog 1 — DevDock

After wrapping up DevScope, I wanted to build something that solves a problem.

Introducing DevDock — a workspace that brings essential developer tools together in one place, reducing context switching and making common development tasks faster and more convenient.I’ve already finished the initial landing page. It took far more CSS work than I’m used to, but I’m happy with where it stands for now. Of course, nothing is ever truly finished—I’ll keep refining it if future feedback or better ideas come up.This is only the beginning. The real work starts now as I begin building the tools that will make DevDock genuinely useful.