r/u_Time-Willingness-360

▲ 8 r/u_Time-Willingness-360+5 crossposts

IP Linux: I built a browser-based desktop environment with React, Vite and local-first apps

I built a browser-based desktop environment with React, Vite and local-first apps

I have been working on a project called IP Linux: a browser-based desktop environment that runs as a static web app.

Live site: https://ip-os-linux.vercel.app/
GitHub: https://github.com/ikerperez12/IP-OS-LINUX

It is not a real Linux distribution, and it does not run native binaries. The idea is different: I wanted to explore how far a polished desktop-like experience can go inside a normal browser tab.

The result is a small web OS-style environment with:

  • A splash / entry screen
  • A desktop with icons, folders and widgets
  • A top panel with system controls
  • A dock and app launcher
  • Resizable and draggable windows
  • Virtual workspaces
  • Snap assist
  • A global search / Spotlight-style command palette
  • Local-first apps
  • Reactive wallpapers
  • Glass UI and visual effects
  • A public GitHub repo and Vercel deployment

Why I built it

Most web demos are landing pages, dashboards or small single-purpose apps. I wanted to build something that feels more like an environment.

I was interested in questions like:

  • Can a web app feel physical and desktop-like?
  • How should windows behave inside a browser viewport?
  • How do you organize many small apps without making the UI messy?
  • How far can local-first storage go before a backend is actually needed?
  • How do you publish a visual project publicly without exposing secrets or overcomplicating the stack?

IP Linux became a way to test all of that in one project.

What is inside

The app includes a catalog of built-in apps and tools: Files, Terminal, Browser, Settings, App Store, Music Player, Matrix Rain, games, developer tools, productivity apps and visual utilities.

The apps are loaded lazily, so the initial shell does not need to download every app upfront. The virtual file system and user preferences are stored locally in the visitor's browser with IndexedDB/localStorage. There is no backend, no account system and no required environment variables for the public release.

What I focused on

The main focus was the shell experience:

  • Window resizing and dragging
  • Dock behavior
  • Desktop icon grid
  • App launcher workflow
  • Keyboard shortcuts that do not interfere with inputs or the terminal
  • Responsive behavior for compact viewports
  • Wallpaper rendering that respects reduced motion and tab visibility
  • Public-safe security posture
  • A README that presents the project like a real product

There were also a few important constraints. For example, a full YouTube page cannot be embedded in an iframe because YouTube blocks that for security reasons. So IP Linux includes a YouTube Lite / embed-aware fallback instead of pretending that every website can load inside the internal browser.

Stack

The project is built with:

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI primitives
  • Lucide / React Icons
  • DOMPurify
  • IndexedDB via idb-keyval
  • Vercel static hosting
  • Vercel Web Analytics

The repo also includes a public release setup:

  • README with screenshots and GIF
  • MIT license
  • SECURITY.md
  • Vercel config
  • Security headers
  • Robots and sitemap
  • Manifest
  • GitHub Actions CI for audit, lint and build

What I learned

The biggest lesson was that a desktop UI is mostly about small interaction details.

A window that opens slightly too small feels broken.
A dock icon that scales inside a clipped container feels wrong.
Desktop icons that can overlap make the whole shell feel unfinished.
Keyboard shortcuts that steal Tab from the terminal are frustrating immediately.

Fixing those details made the project feel much more real than adding another decorative effect.

I also learned that public release work matters. A project can look good locally but still feel unfinished if the repo has a generic README, no security notes, no screenshots, no CI and no clear deploy story.

Feedback welcome

I am sharing it because I think browser-based desktop interfaces are a fun area for frontend experimentation.

I would especially appreciate feedback on:

  • Window management
  • Desktop organization
  • Accessibility
  • Performance
  • App ideas
  • Whether the repo presentation is useful for other developers

Live: https://ip-os-linux.vercel.app/
Code: https://github.com/ikerperez12/IP-OS-LINUX

u/Time-Willingness-360 — 7 days ago
▲ 30 r/u_Time-Willingness-360+8 crossposts

E36 Scroll Cine es una experiencia web cinematográfica fan-made sobre el BMW 318is Coupé Pack M (E36): siete escenas verticales, scroll bloqueado, vídeo, HUD, datos técnicos reales y una portada pensada para entrar en el coche antes de empezar.

He creado E36 Scroll Cine, una experiencia web cinematográfica fan-made sobre el BMW 318is Coupé Pack M (E36).

Web: https://e36.vercel.app/
GitHub: https://github.com/ikerperez12/e36

La idea no era hacer una landing normal, sino algo que se sintiera más como una pieza visual vertical. Empiezas en una pantalla de entrada con vídeo y después avanzas por siete escenas usando scroll, teclado o gestos en móvil.

Cada escena está centrada en una parte del coche:

  • la generación E36
  • Hellrot 314
  • Pack M / M-Technic
  • interior
  • motor M44B19
  • carácter de conducción
  • cierre con el capó abierto

He intentado que el contenido hable del coche de verdad, no de frases genéricas. La ficha y el HUD incluyen datos del 318is: M44B19, 1.895 cc, 16 válvulas DOHC, Bosch Motronic M5.2, admisión DISA, Getrag 250G, reparto 50/50, suspensión Pack M, etc.

En la parte técnica, la web es bastante simple:

  • HTML/CSS/JavaScript sin framework
  • deploy en Vercel
  • navegación por scroll, teclado y swipe
  • posters para evitar pantallas negras en vídeo
  • service worker
  • tests con Playwright + axe
  • auditoría para no subir rutas locales, secretos ni carpetas privadas
  • media fuera del repo público

No es una web oficial de BMW. Es una fanpage y un experimento web alrededor de un coche que me gusta mucho.

Me encantaría recibir feedback:

¿La experiencia se siente bien en móvil? Y si conocéis bien el E36/318is, ¿qué dato añadiríais o corregiríais?

u/Time-Willingness-360 — 14 days ago