ArtworkFlow Desktop

Overview

ArtworkFlow Desktop is a native desktop application built to extend the capabilities of the ArtworkFlow web-based ERP system. It provides a bridge between cloud-based asset management and local file operations, enabling creative teams to work with their preferred tools while maintaining synchronization with the central system.

The Challenge

Creative professionals needed to:

• Access and manage assets directly from their desktop
• Receive real-time notifications without keeping a browser open
• Authenticate seamlessly with enterprise Azure AD credentials
• Work offline and sync changes when reconnected
• Have automatic updates without manual intervention

Building a desktop app that feels native while integrating deeply with a web-based system presented unique architectural challenges.

My Role

As lead developer, I was responsible for:

• Architecture design using Electron's multi-process model
• Implementing secure Azure AD/MSAL authentication flow
• Building the real-time synchronization layer with Pusher
• Setting up cross-platform build and distribution pipelines
• Creating the auto-update mechanism with code signing

Technical Architecture

Multi-Package Structure

The application follows Electron's security best practices with a clear separation:

packages/
├── main/        # Node.js main process
├── preload/     # Secure bridge scripts
└── renderer/    # Vue 3 frontend

This architecture ensures the renderer process never has direct access to Node.js APIs, with all sensitive operations routed through validated IPC channels.

Authentication Flow

Implemented Azure MSAL authentication with:

• Silent token refresh for seamless UX
• Secure token storage in the OS keychain
• Automatic re-authentication on token expiry
• Support for enterprise SSO policies

Real-Time Updates

The app maintains a persistent WebSocket connection using Laravel Echo and Pusher:

• Instant notifications for asset changes
• Live status updates across team members
• Efficient reconnection handling
• Battery-conscious polling fallback

State Management

Using Pinia with persistence plugin:

• Application state survives restarts
• Selective sync of user preferences
• Efficient reactivity with Vue 3's Composition API

Key Features

Seamless Enterprise Auth

One-click login with company Azure AD credentials. No separate passwords to remember.

Real-Time Sync

Changes made in the web app appear instantly on desktop, and vice versa.

Auto-Updates

Silent background updates with rollback capability. Users always have the latest version.

Cross-Platform

Single codebase builds for both macOS and Windows with native look and feel.

Technical Highlights

• Electron 37 with latest security patches
• Vue 3.5 with Composition API throughout
• Vite 7 for fast development and optimized builds
• Vitest for unit and E2E testing
• Sentry integration for error tracking
• Electron Builder for distribution

Results

• Deployed to 50+ users across multiple offices
• 99.5% uptime with automatic recovery
• Reduced context-switching time for creative teams
• Enabled offline workflows previously impossible

Lessons Learned

Building production Electron apps taught me:

1. Security first - The preload script pattern is essential, not optional
2. Update carefully - Auto-updates need thorough testing and rollback plans
3. Platform differences matter - macOS and Windows have subtle but important differences
4. Memory management - Electron apps can bloat quickly without careful attention