A Fullscreen Desktop Media Experience Built with Vue + Electron
Project Overview
This project involved developing a video player application optimized specifically for the Microsoft Surface Pro 8 tablet. The goal was to create a simple fullscreen video experience that could run reliably in museum environment.
Built using open-source JavaScript frameworks, the project demonstrates how modern web technologies can be leveraged to create polished exhibit applications.
Objectives
The primary objectives of this project were:
- Deliver seamless fullscreen video playback
- Optimize for touchscreen interaction
- Maintain minimal UI
- Ensure stable performance on Surface Pro 8 hardware
- Package the solution as a standalone desktop application
- Create cron tasks to auto start and shutdown
Target Hardware: Surface Pro 8
The Microsoft Surface Pro 8 is a hybrid tablet-laptop device with:
- Touchscreen input
- High-resolution display
- Windows desktop operating system
- Lightweight, portable form factor
Designing specifically for this device meant accounting for:
- Touch-friendly interactions
- Fullscreen rendering without OS interruptions
- Performance efficiency on tablet hardware
- Consistent playback behavior
Technical Stack
Vue.js (Frontend Framework)
Vue.js was used to build the user interface and manage application state.
Benefits of using Vue included:
- Component-based architecture
- Reactive data binding
- Clean separation of UI logic
- Rapid development and iteration
The UI was intentionally minimal, with only essential controls exposed.
Electron (Desktop Application Framework)
Electron enabled the application to run as a native desktop program using web technologies.
Key advantages:
- Cross-platform desktop packaging
- Access to native OS-level functionality
- Controlled fullscreen behavior
- Simplified distribution
Electron allowed the application to operate outside of a browser environment, providing greater control over window management and fullscreen rendering.
Key Features
- Automatic fullscreen video playback
- Clean and minimal user interface
- Touch-optimized interaction
- Stable and predictable playback behavior
- Standalone desktop deployment
Each application instance is configured to play video content in fullscreen mode.
Architecture Overview
At a high level, the architecture consisted of:
- Renderer Process (Vue Frontend)
Responsible for UI components and playback controls. - Main Process (Electron)
Handles window management, fullscreen enforcement, and system-level behaviors.
This separation ensured that:
- UI logic remained modular and maintainable
- Desktop behavior was tightly controlled
- Performance was predictable
Design Considerations
1. Minimal Interface
The interface was intentionally simplified to avoid overwhelming the user. The design prioritized clarity and usability, particularly in fullscreen mode.
2. Touch Interaction
Buttons and controls were sized appropriately for touchscreen input.
3. Performance Optimization
Since video playback can be resource-intensive, care was taken to:
- Reduce unnecessary UI re-renders
- Keep background processes minimal
- Maintain smooth fullscreen transitions
4. Deployment Simplicity
Electron packaging allowed the application to be distributed as a standalone executable, simplifying installation and deployment.
Outcome
The final result was a streamlined desktop video player application tailored specifically for the Surface Pro 8.
This project highlights the versatility of web technologies beyond the browser. By combining Vue and Electron, it’s possible to create focused, hardware-aware desktop applications that feel native while benefiting from the flexibility of JavaScript ecosystems.
It also reinforces an important principle: strong engineering is not always about adding features — sometimes it’s about delivering a clean, reliable experience tailored to a specific use case.
