Contact Sheet Generator for Asset Management

Project Overview

Built an internal asset management tool for creative teams that integrates with Wrike project management to automatically generate visual contact sheets. The application allows users to select project folders from Wrike, download all attached assets, and generate consolidated thumbnail sheets for creative review and approval workflows.

The Product

The Contact Sheet Generator provides comprehensive asset visualization:

Folder Selection: Browse and select Wrike folders containing project assets
Report Configuration: Define which folders to include and output preferences
Automated Processing: Download assets and generate contact sheets automatically
Real-Time Monitoring: Webhook-based tracking for folder updates
Scheduled Generation: Nightly batch processing for configured reports
Email Delivery: Automatic distribution of completed sheets to stakeholders

Technical Architecture

Frontend (React/Redux)

Modern React application with Semantic UI:

Framework: React 16.13 with Create React App
State Management: Redux with Immutable.js and Redux Thunk
UI Library: Semantic UI React for consistent styling
Components: Folder tree selection, report preview, carousel viewer
Authentication: Wrike OAuth flow integration

Backend (Express.js)

Node.js server with extensive Wrike integration:

Framework: Express.js with body-parser and CORS
Authentication: Wrike OAuth with token refresh handling
Database: LowDB for lightweight JSON persistence
Image Processing: ImageMagick for thumbnails, GhostScript for PDFs
Scheduling: node-cron for nightly batch jobs
Email: Mailgun for report delivery
Monitoring: Sentry for error tracking, Winston for logging

Key Contributions

Wrike API Integration

Built comprehensive integration with Wrike project management:

Implemented OAuth authentication flow with token refresh
Developed services for folders, tasks, attachments, contacts, and custom fields
Built folder hierarchy navigation with tree selection interface
Created task attachment download with progress tracking
Integrated webhook creation and management for folder monitoring

Image Processing Pipeline

Developed robust asset processing system:

Built ImageMagick integration for generating consistent thumbnails
Implemented GhostScript processing to extract individual PDF pages
Created file type detection and conversion for diverse formats (PSD, AI, PDF, images)
Developed sheet layout engine arranging thumbnails in organized grid layouts
Built thumbnail caching to optimize regeneration of unchanged assets

Report Generation System

Created end-to-end report workflow:

Developed report configuration with folder selection and naming options
Built parallel attachment downloading with retry logic
Implemented chunked sheet generation for large asset collections
Created archive system for downloadable ZIP files
Added folder statistics tracking for asset counts and processing metrics

Webhook Automation

Implemented real-time folder monitoring:

Built webhook manager for creating and syncing Wrike webhooks
Developed watcher processor to handle incoming webhook events
Created automatic report regeneration when monitored folders change
Implemented webhook status management for pause/resume functionality

Scheduled Processing

Set up automated batch operations:

Configured node-cron for nightly report generation
Built database backup scheduling to AWS S3
Implemented report rerun system for failed or stale reports
Created logging rotation with winston-daily-rotate-file

Email Notification System

Developed automated delivery:

Integrated Mailgun for transactional email
Built email templates with EJS templating
Implemented multi-recipient support for team distribution
Created in-line report previews with download links

Wrike Integration Details

API Services

Comprehensive Wrike API coverage:

Folders: List, get details, navigate hierarchy
Tasks: List tasks in folders, get attachments
Attachments: Download files, track versions
Contacts: User lookup for sharing and mentions
Custom Fields: Access project metadata
Webhooks: Create, update, delete folder watchers

Authentication Flow

Secure OAuth implementation:

Redirect-based OAuth authorization
Access token and refresh token handling
Automatic token refresh on expiration
Per-user token storage and retrieval

Image Processing Details

Supported Formats

The system handles diverse creative assets:

Images: JPG, PNG, GIF, TIFF, PSD
Documents: PDF (multi-page extraction)
Vector: AI, EPS (with ImageMagick conversion)

Processing Pipeline

Download attachment from Wrike
Detect file type and determine processing path
For PDFs: Extract pages with GhostScript
Convert to standardized format for thumbnail
Generate 200x200 thumbnail with ImageMagick
Arrange thumbnails into row montages
Combine rows into final contact sheet
Generate sheet thumbnail for preview

Sheet Layout

6 columns per row
Maximum rows per sheet (chunked for large folders)
Title row with folder name
Consistent sizing and spacing

Development Environment

Build System

Client: Create React App with npm scripts
Server: Nodemon for development hot reload
Linting: ESLint with Prettier formatting
Git Hooks: Husky with lint-staged for pre-commit

Deployment

CI/CD: Codeship for automated deployment
Hosting: EC2 instance with rsync deployment
Process Management: Docker Compose for services
Restart: Custom restart scripts for zero-downtime updates

Technologies Deep Dive

The technology choices balanced integration requirements with processing capabilities:

Wrike API provided structured access to project assets and folder hierarchy
ImageMagick enabled consistent thumbnail generation across diverse file formats
GhostScript handled PDF-specific processing including page extraction
LowDB offered simple JSON-based persistence without database overhead
node-cron enabled reliable scheduling for batch operations
Semantic UI provided professional enterprise UI components
Webhooks enabled real-time automation without polling