<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mahmoud Madi</title>
    <description>The latest articles on DEV Community by Mahmoud Madi (@mah7moud_madi).</description>
    <link>https://dev.to/mah7moud_madi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4081887%2F93ab7d9e-78b0-4944-8ab9-9c93d1aa4130.jpg</url>
      <title>DEV Community: Mahmoud Madi</title>
      <link>https://dev.to/mah7moud_madi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mah7moud_madi"/>
    <language>en</language>
    <item>
      <title>Why I Built Unlockt: A Local-First Instagram Saved Archiver, Canvas Collage Studio &amp; 9:16 Video Vault</title>
      <dc:creator>Mahmoud Madi</dc:creator>
      <pubDate>Mon, 17 Aug 2026 15:22:37 +0000</pubDate>
      <link>https://dev.to/mah7moud_madi/why-i-built-unlockt-a-local-first-instagram-saved-archiver-canvas-collage-studio-916-video-fkk</link>
      <guid>https://dev.to/mah7moud_madi/why-i-built-unlockt-a-local-first-instagram-saved-archiver-canvas-collage-studio-916-video-fkk</guid>
      <description>&lt;p&gt;Like many developers, designers, and digital marketers, my Instagram "Saved" collection had turned into a digital graveyard with over 5,000 bookmarked posts, reels, and carousels. &lt;br&gt;
The native Instagram web app offers virtually zero productivity tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;❌ No full-text search across captions or hashtags&lt;/li&gt;
&lt;li&gt;❌ No way to extract individual slides from carousel photo dumps&lt;/li&gt;
&lt;li&gt;❌ No offline preservation (if a creator archives a post, it disappears forever)&lt;/li&gt;
&lt;li&gt;❌ Existing web downloaders ask for account passwords, inject trackers, or bombard you with ads.
So I spent the last few months developing &lt;strong&gt;Unlockt&lt;/strong&gt; — a 100% free, MIT open-source, local-first Chromium extension and Node.js Express dashboard.
---
## 🏗️ Architecture &amp;amp; Engineering Highlights
Here is how Unlockt is designed under the hood:
┌─────────────────────────────────┐ │ Chromium Extension (MV3) │ ──► Reads Instagram GraphQL via active session └────────────────┬────────────────┘ │ Local REST Sync ▼ ┌─────────────────────────────────┐ │ Express Backend (Port 3000) │ ──► SSRF-Hardened Proxy &amp;amp; HTTP 206 Video Streamer └────────────────┬────────────────┘ │ ┌────────┴────────┐ ▼ ▼ ┌──────────────┐ ┌───────────────────────────┐ │ data/saved. │ │ /thumbnails /videos │ │ json (DB) │ │ (Local High-DPI Storage) │ └──────────────┘ └───────────────────────────┘&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  1. Zero-Password Session Scraping
&lt;/h3&gt;

&lt;p&gt;Rather than asking users for their credentials or running headless browser instances that trigger Meta account checkpoints, Unlockt operates as a Manifest V3 Chromium extension. It uses the cookies and CSRF tokens already present in your authenticated browser tab with randomized jitter delays (800ms - 2200ms) to respect rate limits.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. 1-Click HTML5 Canvas Collage Studio
&lt;/h3&gt;

&lt;p&gt;One of my favorite features is the &lt;strong&gt;Carousel Studio&lt;/strong&gt;. When you open a 10-slide photo dump, Unlockt extracts every slide and can render them onto an off-screen HTML5 &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; element to produce high-resolution moodboards (&lt;code&gt;2x1&lt;/code&gt;, &lt;code&gt;2x2&lt;/code&gt;, &lt;code&gt;3x2&lt;/code&gt;, &lt;code&gt;3x3&lt;/code&gt;, and &lt;code&gt;5x2&lt;/code&gt;) with crisp 4px white margin dividers.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. HTTP 206 Partial Content Video Streaming
&lt;/h3&gt;

&lt;p&gt;Saved Reels are streamed via native HTTP 206 byte-range headers on the Express backend. This enables instant seeking, scrubbing, and frame-by-frame inspection without buffering the full 1080x1920 MP4 file in memory.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Zero-Telemetry &amp;amp; Offline SVGs
&lt;/h3&gt;

&lt;p&gt;All metadata, photos, and videos reside strictly in your local filesystem. Even creator profile avatars are generated on-the-fly as clean SVG initials in memory to avoid external CDN network requests.&lt;/p&gt;




&lt;h2&gt;
  
  
  💻 Quick Setup
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
bash
# 1. Clone the repository
git clone https://github.com/mahmoud-madi/unlockt-instagram-saved-chrome-extension.git

# 2. Install dependencies &amp;amp; launch backend
cd unlockt-instagram-saved-chrome-extension
npm install
npm start

# 3. Load extension in Chrome / Brave / Edge
# Navigate to chrome://extensions -&amp;gt; Enable Developer Mode -&amp;gt; "Load unpacked" -&amp;gt; Select /extension directory


---

🌟 Links &amp;amp; Documentation
GitHub Repository: mahmoud-madi/unlockt-instagram-saved-chrome-extension [Unlockt](https://mahmoud-madi.github.io/unlockt-instagram-saved-chrome-extension/)

Live Landing Page &amp;amp; Q&amp;amp;A Hub: [Unlockt Page](https://mahmoud-madi.github.io/unlockt-instagram-saved-chrome-extension/)

I'd love to hear your feedback, feature suggestions, or pull requests!



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>opensource</category>
      <category>javascript</category>
      <category>node</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
