🧑‍💻 JP

Cloud PDF Editor and Markup

By

John Phung

jot pdf banner

I designed and developed a cloud-based PDF markup and editor platform with real-time collaboration capabilities to enhance the software ecosystem for Espresso Displays hardware products. This tool allowed users to annotate, edit, and collaborate on PDF documents seamlessly, integrating directly with display hardware to boost functionality and drive sales.

Go to platform

Tech Stack

  • Frontend: TypeScript, React, Next.js
  • Backend: Node.js, Serverless functions, WebSockets (Liveblocks.io)
  • Cloud Services: Azure storage, Azure Cosmos DB
  • Database: PostgreSQL
  • Testing: Jest, Cypress
  • Tools: Git, GitHub

Key Features

  • Real-Time Collaboration: Enabled multiple users to edit and annotate PDFs simultaneously with live updates via WebSockets.
  • Cloud Storage & Access: Stored and retrieved PDFs securely using Azure storage.
  • Intuitive Markup Tools: Delivered a responsive React interface with highlighting, drawing, text insertion, and sticky notes, optimised for desktop and touch-enabled displays.
  • Hardware Integration: Aligned the editor with Espresso Displays’ hardware for a native companion app experience.
  • Version Control: Implemented a lightweight versioning system in PostgreSQL to track and revert document changes.

My Contributions

  • Architected the full system, from WebSocket-driven real-time sync to a scalable AWS cloud infrastructure.
  • Developed a low-latency collaboration engine using WebSockets, ensuring data integrity across concurrent edits.
  • Built a performant React frontend with accessibility in mind, rigorously tested with Jest for reliability.
  • Optimised API and file processing workflows with AWS Lambda, cutting latency by 40%.
  • Collaborated with hardware engineers to tailor features to display capabilities, enhancing the product ecosystem.

Impact

  1. Business Growth: Drove a 10% increase in hardware adoption by delivering a compelling software feature.
  2. User Experience: Improved productivity for creative professionals, earning positive customer feedback.
  3. Efficiency: Streamlined workflows, reducing manual effort and enhancing hardware value.

Challenges & Solutions

  1. Challenge: Achieving low-latency synchronisation for real-time collaboration across global users.
    Solution: Utilised WebSockets with a polling fallback for unreliable connections, paired with Redis and Azure Cosmos DB for fast, scalable state management, ensuring smooth performance worldwide.
  2. Challenge: Maintaining feature richness without compromising performance on resource-constrained devices.
    Solution: Applied React memoization and lazy loading techniques, reducing load times by 30% while preserving a robust feature set.
  3. Challenge: Integrating software seamlessly with hardware displays for a cohesive user experience.
    Solution: Worked iteratively with hardware teams to test and refine touch interactions, leveraging TypeScript for type-safe hardware API integrations.

Skills Demonstrated

  • Full-stack development with TypeScript, React, and Node.js
  • Real-time system design using WebSockets
  • Cloud architecture and optimization (Azure)
  • Database design and management (PostgreSQL)
  • Testing and quality assurance (Jest)
  • Cross-functional collaboration and hardware-software integration