Markup Hero

Summary

Markup Hero is a screenshot and annotation tool that we built alongside Jeff Solomon. Our goal was to create a user-friendly, accessible tool for individuals and teams to easily capture and annotate screenshots, improving communication and collaboration. The product gained quick traction thanks to its simple interface and integrations with Chrome, Slack, and Google Drive, allowing users to annotate directly within their workflow.

We designed Markup Hero with a consumer-first approach, prioritizing ease of use and affordable pricing. We actively engage with our subscribers to gather feedback and implement improvements based on their needs. The tool's seamless integration with popular productivity platforms like Chrome, Slack, Google Drive, and Notion enhances its value across different workflows.

Over the past four years, we've bootstrapped Markup Hero into a sustainable SaaS product. This experience has given us deep insight into building and continuously improving a successful app and business.

Design & Technology

We architected MarkupHero as a cloud-native, microservices-based platform designed for high availability, performance, and scalability. The system needed to handle intensive image processing workloads while maintaining responsive user interactions for screenshot capture, annotation, and sharing.

Technology Stack:

• Frontend: Vue.js 3 SPA with Konva.js for canvas-based drawing and annotation
• API Gateway: .NET 7 C# for CRUD operations and business logic
• Authentication: AWS Cognito for identity and access management
• Image Processing: Node.js microservices with Google Pub/Sub messaging
• Database: Google Firestore (NoSQL document store)
• Storage: Google Cloud Storage for binary assets
• Analytics: Google Cloud Functions, BigQuery, and Looker Studio
• Infrastructure: Docker containers on Kubernetes (DigitalOcean)

We chose a multi-cloud approach, leveraging Google Cloud's superior media processing capabilities while using AWS Cognito for robust authentication and DigitalOcean for cost-effective Kubernetes hosting.

Architecture & Scalability

The system follows a microservices pattern with clear separation of concerns. The .NET API serves as the central gateway, while Node.js workers handle CPU-intensive image processing tasks through Google Pub/Sub messaging. This decoupled architecture allows each component to scale independently based on demand, with Kubernetes providing auto-scaling capabilities for API pods and elastic processing through the messaging queue.

Image Processing Pipeline

We built a sophisticated asynchronous processing system using Google Pub/Sub to handle image manipulation tasks. The pipeline manages resizing, thumbnail generation, format conversion (including PDF rasterization), markup rendering, and final WebP optimization. All processing tasks are tracked with metadata and status logging in Firestore, ensuring reliability and debugging capabilities.

Security & Compliance

Security was implemented at multiple layers, including HTTPS enforcement with managed TLS certificates, data encryption at rest (GCS & Firestore) and in transit, AWS Cognito user groups with IAM policies, and Firestore security rules for document-level access control. The containerized infrastructure includes vulnerability scanning in our CI/CD pipeline before deployment.

Development & Deployment

Our deployment strategy uses Docker containerization across all services with Kubernetes orchestration. The CI/CD pipeline features automated builds and tests on each commit, rolling updates with zero-downtime deployments, and comprehensive image scanning. We maintain separate namespaced deployments for staging and production environments to ensure thorough testing before releases.

Analytics & Monitoring

We implemented a comprehensive analytics system using Google Cloud Functions to capture user events, BigQuery for data warehousing, and Looker Studio for real-time dashboard visualization. This provides detailed insights into user behavior, system performance, and feature adoption patterns.

Data Management

The system uses Google Cloud Storage with intelligent lifecycle policies for binary asset management and Google Firestore for all structured data including user profiles, markup documents, subscription records, and processing logs. This combination provides optimal performance for both high-frequency reads and complex queries.