Docker Heatmap

Overview

Docker Heatmap is a developer tool designed to bridge the visibility gap between containerization work and public profiles. While GitHub tracks code commits, Docker Hub activity often goes unnoticed. This platform allows developers to generate beautiful, GitHub-style contribution graphs based on their Docker Hub image pushes and updates, providing a visual representation of their DevOps and containerization consistency.

Features

• GitHub OAuth Integration: Seamless and secure authentication using GitHub, allowing users to quickly link their Docker Hub profiles.
• Dynamic SVG Engine: A high-performance Go-based SVG generation service that supports real-time customization via URL parameters (themes, cell size, radius, etc.).
• Encrypted Credential Storage: Implementation of AES-256-GCM encryption for all Docker Hub tokens, ensuring zero-plaintext storage of sensitive user credentials.
• Theme Support: Includes a variety of curated themes like GitHub Dark/Light, Dracula, Nord, and Tokyo Night, plus support for fully custom color palettes.
• Automated Synchronization: Robust background workers that periodically poll Docker Hub APIs to keep contribution data fresh without user intervention.
• Easy Embedding: Optimized for GitHub READMEs with pre-generated Markdown and HTML snippets that load instantly via a global CDN-ready API.

Tech Stack

The architecture is split into a modern Next.js 16 frontend and a high-performance Go backend. The frontend utilizes shadcn/ui and Tailwind CSS for a premium developer-centric interface, with TanStack Query handling state synchronization. The backend is built with the Fiber framework for low-latency API responses and uses GORM to interface with a PostgreSQL database. The entire stack is containerized using Docker and orchestrated with Docker Compose for consistent deployment.

Challenges

The primary technical hurdle was building a secure yet accessible system for Docker Hub data. Unlike GitHub, Docker Hub's public API is more restrictive, requiring careful token management. I implemented a multi-layered security approach where sensitive tokens are encrypted at the application level before hitting the database. Additionally, designing the SVG generation logic in Go to be both fast and highly customizable (handling 365-day layouts, leap years, and dynamic themes) required precise mathematical modeling of the SVG viewport and coordinate system.

Roadmap

• Organization Support: Extended heatmaps for visualizing contributions across entire Docker Hub organizations.
• Advanced Analytics: Detailed breakdown of which images are being pushed most frequently and their impact.
• CI/CD Integration: A dedicated GitHub Action to trigger heatmap refreshes immediately after a successful Docker push in a workflow.