ManentiOS - Stardance

Ship #2

@Manenti on ManentiOS · about 1 month ago

For this update, I improved **ManentiOS**, my personal web operating system that runs directly in the browser. The project already had a login-style screen, draggable windows, desktop icons, and apps like FrostLog, Calculator, and Projects. In this mission, I added three new major features: **IceDock**, a bottom dock for quickly opening apps; a **Settings** app for changing the visual mode and ambient effects; and a **Command Palette** with `Ctrl + K` to search and launch apps faster.

The most challenging part was making these new features feel connected to the rest of the OS instead of just being extra buttons on the screen. I had to organize the app list better, connect multiple components to the same open-window logic, manage visual customization through state, and make sure the dock, command palette, settings app, windows, and desktop icons all worked together smoothly.

I am proud that ManentiOS now feels much more like a real operating system. The IceDock makes app navigation easier, the Settings app adds personalization, and the Command Palette makes the experience feel more advanced and polished. I am also proud of the winter-tech identity of the project, with cold colors, rain/snow effects, glass-style windows, and a calm futuristic atmosphere.

To test the project, open the live demo and enter ManentiOS from the login screen. You can open apps from the desktop icons or from the IceDock, use `Ctrl + K` to open the Command Palette and search for apps, and open the Settings app to switch between visual modes and ambient effects like snow, rain, or none. You can also drag windows around, close and reopen them, and explore the Projects app to see my portfolio inside the OS.

1 devlog
2h
9.37x multiplier
23 Stardust
WebOS 2

Try project → See source code →

Open comments for this post

@Manenti on ManentiOS · about 1 month ago

2h 29m 50s logged

For this new mission, I added three major updates to ManentiOS to make it feel more complete as a web operating system.

First, I created IceDock, a bottom dock that lets users quickly open apps and see which apps are currently active. Then, I added a Settings app, where users can customize the visual mode and switch ambient effects like snow, rain, or no effect.

I also implemented a Command Palette with Ctrl + K, allowing users to search and open apps quickly from anywhere on the desktop.

These updates made ManentiOS feel more like a real OS, with better navigation, customization, and a more polished winter-tech experience.

Ship #1

@Manenti on ManentiOS · about 1 month ago

For this project, I made **ManentiOS**, a personal web operating system that runs directly in the browser. It includes a login-style onboarding screen, a desktop interface, draggable and closable windows, a top bar with a clock, and multiple apps such as FrostLog, Calculator, and a Projects portfolio app.

The most challenging part was simulating the behavior of a real operating system inside a website. I had to learn how to manage draggable windows, opening and closing apps, window layering with z-index, desktop icons, and React state across different components. I had never built anything like an OS interface before, so figuring out how all these pieces should work together was a big challenge.

I am most proud that I was able to create something that actually feels like a small operating system. I also like the visual identity I built for it, mixing a winter, forest, rain-inspired atmosphere with a clean technological interface. This project helped me practice React, TailwindCSS, componentization, UI design, and interactive front-end logic.

To test the project, open the live demo, go through the login-style screen, and enter ManentiOS. You can click or double-click the desktop icons to open apps, drag the windows around, close them, reopen them, and explore the Projects app to see some of my other work.

6 devlogs
6h
WebOS 1

Try project → See source code →

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

46m 8s logged

Since the last dev log, I improved the first screen of ManentiOS by turning it into a login-style onboarding page inspired by Windows, but with the winter-tech visual identity of the project.

I also made the buttons functional, allowing users to enter the OS normally or open specific apps directly, like the Projects app and FrostLog.

After that, I worked on the portfolio experience by improving the Projects app and filling it with my best GitHub projects, including ManentiOS, PoupApp, Manenti Slack Bot, Custom Macropad, and other web/full-stack projects.

Now ManentiOS has a stronger first impression, a more useful portfolio section, and feels much more like a complete personal WebOS.

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

1h 30m 14s logged

Since the last dev log, I completed the final WebOS tutorial step by building more advanced apps for ManentiOS. This stage was more open-ended, so I decided to create two useful apps: a Calculator and a Projects portfolio app.

I added new desktop icons, connected them to draggable app windows, and improved the window system to support multiple apps more easily. The Calculator now performs basic operations, while the Projects app showcases my work inside the OS.

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

1h 4m 36s logged

Since the last dev log, I created the first real app for ManentiOS: FrostLog, a winter-tech journal app with selectable entries, a desktop icon, and its own draggable window. This followed the tutorial step focused on adding the first app to the WebOS.

I also improved the desktop behavior by fixing the z-index system, so app windows now appear in front of desktop icons while the top bar stays above everything.

ManentiOS now feels more like a real WebOS, with icons, apps, draggable windows, and better window layering.

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

44m 26s logged

Since the last dev log, I continued developing ManentiOS by following the next WebOS tutorial step and adapting it to my React + TailwindCSS structure. The goal was to make the desktop window feel more like a real operating system window.

I created a reusable OSWindow component with support for dragging, closing, and reopening windows. I also updated the desktop so the welcome window can be opened again from the top bar by clicking on ManentiOS.

Instead of using plain JavaScript with querySelector, I used React state, props, refs, and pointer events to keep the logic more organized and component-based.

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

1h 4m 20s logged

Since the last dev log, I continued working on ManentiOS by defining a stronger visual direction for the project: a winter-inspired interface with forests, rain, landscapes, and a subtle technological touch.

I also moved on to the second part of the WebOS tutorial and adapted the concepts from HTML, CSS, and JavaScript into my current React + JSX + TailwindCSS structure. Instead of using plain HTML and inline styles, I planned the desktop as reusable components.

I created the idea for the main desktop screen, including a background wallpaper, a glass-style welcome window, a top bar, and a live clock using React state and effects. This keeps the project aligned with the tutorial while making the code cleaner and more scalable.

Open comments for this post

@Manenti on ManentiOS · about 2 months ago

1h 7m 17s logged

Today I started working on ManentiOS, my personal web operating system. I chose the main theme, created a futuristic project banner, and wrote a short description for the project.

I also built the first onboarding screen using React, JSX, and TailwindCSS. Then, I organized the code into reusable components like FeatureCard, ActionButton, and Onboarding.

So far, the project has a clear identity, a visual style, and the beginning of a clean, componentized interface. My next step is to build the main desktop screen and add interactive apps.