@SpaceYatri

What did you make?

DZIP (Distraction Zipper) — a Chrome extension with three main quality-of-life features:

Focus mode — a one-click toggle that automatically appears on every page. You add your tasks and start a focused session.

Task-Locked exit — you can’t leave Focus mode until all your tasks are checked off, along with typed proof of what you actually did. So there’s no “I’ll just check one thing real quick.”

Persistent zips — a hover-and-click picker that lets you hide distracting elements from a webpage. The hidden elements stay hidden even after refreshing the page, and they are saved separately for each website.

I also added a bonus feature outside the original scope: Isolate mode. You can click on one element, like a video or an article, and everything else on the page gets hidden so you can focus only on that.

What was challenging?

The hardest part was getting the UI to work properly without fighting with the webpage it was injected into.

At first, typing a space in the task input would actually pause background videos because my keyboard inputs were bubbling up to the website’s own shortcuts. I had to isolate the whole DZIP UI using Shadow DOM and stop event propagation on the inputs.

Making the zips stay after a reload was also pretty tricky. I generate a CSS selector path for each hidden element and then apply those selectors again when the page loads. It works pretty well, but it can still break on websites that use dynamically generated class names.

What am I proud of?

Definitely the Task-Locked exit.

Most focus extensions just hide distracting stuff, but I wanted DZIP to actually make you commit to the task. Before leaving Focus mode, you have to finish everything and write down what you actually did.

That was the part that made DZIP feel like more than just another decluttering extension, and it’s also something I can see myself actually using regularly.

What should people know so they can test it?

It’s currently an unpacked Chrome extension.

Go to:

chrome://extensions → enable Developer mode → Load unpacked

After loading it:

• Click the floating button in the top-right corner to start Focus mode.
• Try adding a task with spaces in it while a video is playing in the background. This was one of the bugs I had to fix.
• Try exiting Focus mode before completing your tasks. It should keep you locked in.
• Try Isolate on a page with a video or article and see how it hides everything else.

What did you make?

I made SpaceYatri OS, a space-themed web operating system built with HTML, CSS, and JavaScript. It includes a desktop interface, customizable wallpapers and accent colors, a settings window, calculator, clock widget, Wi-Fi and brightness controls, fuel indicator, toast notifications, and a cinematic rocket launch boot sequence.

What was challenging?

The most challenging part was connecting all the different features together and making the interface feel like an actual operating system. I also worked on the boot animation, including the countdown, rocket launch, smoke, screen shake, sound effects, and transition into the desktop. Making the windows draggable and keeping the different controls working together was also challenging.

What are you proud of?

I am proud that I built the project myself and turned a simple webpage into something that feels like a small space-themed operating system. I especially like the rocket launch boot sequence, because it gives SpaceYatri OS its own identity instead of just looking like a normal website.

What should people know so they can test your project?

When the project loads, click anywhere or press a key to start the boot sequence. Wait through the countdown and rocket launch until the desktop appears. Once inside the OS, try clicking DECK to open Settings, CALC to open the calculator, the brightness and Wi-Fi icons in the top bar, and the fuel indicator. You can also change wallpapers, accent colors, sound settings, brightness, and window transparency.

A web-based operating system called SpaceYatri OS. My first project for Hack Club and Stardance. I divided my project into two different parts. One: Welcome screen with a dedicated launch button to start the OS. And the actual OS.

Layout issues, especially getting my background image to properly fill the screen without stretching or cropping incorrectly, and getting the drag-and-drop logic for the windows to feel smooth instead of glitchy.

I’m proud that I debugged the background/CSS sizing issue myself and got a fully working drag system. Windows can be opened, closed, and dragged around the desktop without breaking.

Click “Launch Yatri OS” on the welcome screen to launch the OS. Once inside, click any desktop icon to open its window , you can drag windows around by their title bar and close them with pressing the escape button or the green circle.