Interactive Simulation

How Codeship Works

A visual walkthrough of the three hardest engineering problems I solved — and how I turned "impossible" into production-grade features.

SCROLL TO EXPLORE
CHALLENGE 01

Image Generation in Manifest V3

Service Workers have no DOM. Without a DOM, html2canvas can't render images. Here's how I used the Offscreen API to solve it.

⚙️
Service Worker
background.js
🖼️
Offscreen Document
offscreen.html
✅
Base64 Image
ready to upload
→ Submission received: "Two Sum" (Python)
→ Spawning offscreen document...
→ Rendering code with theme: "Dracula"
→ html2canvas snapshot captured (1200×630)
✓ Base64 image returned to Service Worker
✓ Offscreen document destroyed. Zero memory leaks.
CHALLENGE 02

Network Interception vs DOM Scraping

Instead of reading the fragile UI, Codeship intercepts the raw GraphQL network responses — making it immune to UI redesigns.

✕ DOM Scraping (Fragile)
<div class="result-xQ2f">
  <span>Accepted</span>
</div>
→ Searching for .result-xQ2f …
✓ Found! Scraping text…
✕ LeetCode updated their class names
✕ .result-xQ2f not found. Extension BROKE.
✓ Network Interception (Robust)
fetch("/graphql") → POST
{ "submission": {
   "status": "Accepted",
   "code": "def two_sum..."
}}
→ Intercepted fetch("/graphql")
→ Detected "Accepted" in response
✓ Code captured from network payload
✓ UI can change freely. We don't care.
CHALLENGE 03

Exponential Backoff & Retry Queue

When the network drops, submissions are queued locally. The retry delay doubles each attempt, then instantly flushes when connectivity is restored.

Network: Offline — 1 submission queued
1 min
Attempt 1
2 min
Attempt 2
4 min
Attempt 3
8 min
Attempt 4
✓ Online
Reconnect
✕ POST /api/github failed — network offline
→ Saved to chrome.storage.local queue
✕ Retry 1 failed — waiting 1 min
✕ Retry 2 failed — waiting 2 min
✕ Retry 3 failed — waiting 4 min
✕ Retry 4 failed — waiting 8 min
✓ Network restored! Flushing queue…
✓ Submission pushed to GitHub successfully