System Portal Explorer

A powerful web application designed to demonstrate and test modern web-to-system integration capabilities. This dashboard provides a unified interface to interact with native operating system features directly from the browser, bridging the gap between web and native applications.

🚀 Features

The application provides "Portals" to various system APIs:

File System Integration

• Folder Portal: Access and explore local directories using the File System Access API.
• File Access: Modern file selection and manipulation.
• Legacy Folder: Support for standard directory selection (webview/older browser compatibility).
• File Portal: Standard file selection dialog.
• Save Portal: Trigger native "Save As" system dialogs.

System & Hardware

• Media Portal: Access Camera and Microphone streams.
• Geolocation: High-accuracy GPS/Location bridging.
• Bluetooth & USB: Direct hardware connection bridges (Web Bluetooth / WebUSB).
• Haptics: Hardware vibration feedback triggers.
• Battery & Memory: Real-time system status monitoring.

Interface & Experience

• Wake Lock: Prevent system display sleep during critical tasks.
• Fullscreen: Immersive application mode.
• App Badging: Dynamic application icon notification badges.
• Notifications: Native system desktop notifications.
• Web Share: Native OS sharing sheet integration.
• Clipboard: System-wide clipboard read/write access.
• Display Capture: Screen sharing and window capture capabilities.
• Eye Dropper: System-level color picker integration.
• Local Fonts: Access to installed system typography.

🛠️ Tech Stack

• Framework: React 19 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: FontAwesome

🏃‍♂️ Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• A modern browser (Chrome/Edge recommended for full API support)

Installation

1. Clone the repository (if applicable) or download source.
2. Install dependencies:

   npm install

3. Environment Setup:
   • Copy .env.local example if needed (currently minimal config required).
   • Set GEMINI_API_KEY if using AI features.

Running Development Server

Start the local development server:

npm run dev

Open your browser to the URL shown in the terminal (usually http://localhost:5173).

Building for Production

Create a production-ready build:

npm run build

---

✨ This site is generated by Google AI Studio