Web Deck 🚀

A fullscreen, touch-first "Web OS" shell for dedicated touchscreens, kiosks, and internal showcases. Built with Electron, React, and Tailwind CSS.

🖼️ Screenshots

🎯 Project Goal

Web Deck turns any computer into a dedicated web application launcher. It hosts independent web apps in an Android-like environment, hiding the underlying OS distractions and providing a unified system navigation experience.

Key Features

• Fullscreen Kiosk UX: Zero browser chrome, zero OS distractions.
• System Navigation: Persistent bottom bar with Back, Home, and Recents buttons.
• Task Manager (Recents):
  • Swipe-up to Close: Fluid, native-feeling gestures for multitasking.
  • Visual Snapshots: Real-time previews of running apps.
• Dynamic App Spawning: Handles popups (window.open) as independent system apps.
• Responsive Layout: System UI that adapts to portrait, landscape, and custom screen ratios.
• Zero-SDK Requirements: Hosts any standard web page without requiring a framework or SDK.

🧱 Tech Stack

• Main Process: Electron 39
• Renderer: React 19 + Vite 7
• Styling: Tailwind CSS 4
• Animations/Gestures: Framer Motion
• Icons: Lucide React

---

🛠️ Getting Started

Prerequisites

• Node.js (v20.19.0+ or v22.12.0+)
• npm

Installation

# Clone the repository
git clone https://github.com/emarock/webdeck.git

# Navigate to the project directory
cd webdeck

# Install dependencies
npm install

Development

To quickly build and run the application:

npm run dev

For advanced development with Hot Module Replacement (HMR) (requires two terminals):

# Terminal 1: Start Vite dev server
npm run dev:renderer

# Terminal 2: Start Electron pointing to the dev server
npm run dev:electron

Build for Production

To build the React application for the renderer:

npm run build

---

🖥️ Platform Support

macOS (Development)

• Full support for development and testing.
• Launching in fullscreen might cover the Dock/MenuBar.

Windows (Primary Runtime)

• Designed for Windows 11 / Windows IoT Enterprise.
• Optimized for kiosk-mode deployment on touchscreens.

Linux (Kiosk Setup)

• Ideal for lightweight Linux distributions in kiosk mode.
• Requires standard X11/Wayland dependencies for Electron.

---

📂 Configuration

Available apps are managed through a hierarchical configuration system. The shell looks for the following files in order and uses the first one it finds:

1. apps.dev.json: Local development overrides (Git ignored).
2. apps.user.json: Personal user configuration (Git ignored).
3. apps.json: Default system configuration (Versioned).

Configuration Format

The JSON structure should contain an array of app objects:

{
  "apps": [
    {
      "id": "my-app",
      "title": "My Application",
      "url": "https://example.com",
      "symbol": "🚀"
    }
  ]
}

Note: The Home app (id: "launcher") is automatically added by the system and doesn't need to be defined in your config files.

📜 License

This project is licensed under the ISC License.