# GrabMedia — Instagram & YouTube Downloader

> Category: Full-Stack | Period: 2026 | Metric: Dual-platform · zero client-exposed API keys
> Canonical URL: https://www.arman-portfolio.online/projects/grabmedia/
> Live Demo: https://grab-media-project-psi.vercel.app/
> Source Repository: https://github.com/arman080325/GrabMedia-Project.git

## Overview
A full-stack media downloader — paste a public Instagram or YouTube link, preview it, pick a quality, and download. An Express backend proxies two separate RapidAPI providers so the API key never reaches the browser. Try the live demo below.

## Architecture & Tech Stack
Node.js, Express, REST API, RapidAPI, Vercel, Render

## Case Study

### The Problem
Downloading public Instagram reels/posts/stories or YouTube videos usually means routing through ad-heavy third-party sites or browser extensions that ask for excessive permissions — there was no single, clean tool covering both platforms without watermarks or a login.

### Architecture & Approach
Built a two-piece system: a vanilla JS frontend (auto dark/light by time of day, in-app video/carousel preview, toast feedback) and an Express backend that validates the pasted URL, calls the matching RapidAPI provider server-side, and normalizes Instagram's and YouTube's very different response shapes into one consistent `{platform, mediaType, downloads[]}` contract the frontend doesn't need to special-case. A `/api/proxy` route re-streams YouTube's googlevideo CDN response with the right headers (Range, Referer, Origin) so the browser can save it as a normal download instead of hitting CORS or 403s.

### Engineering Challenges & Solutions
- Hiding the RapidAPI key from the client entirely — every request is proxied server-side, with helmet, a strict CORS origin allowlist, and two-tier rate limiting (100 req/15min global, 20/min on the download routes) protecting the key from abuse
- Reconciling two unrelated upstream response formats — Instagram's flat media array and YouTube's separate muxed/adaptive-format lists — into one normalized shape the frontend renders identically
- Streaming YouTube's video-only and audio-only adaptive formats through the proxy with the exact headers googlevideo.com expects, since a plain fetch from the browser gets blocked

### Outcome & Results
A working full-stack downloader — frontend on Vercel, backend on Render — with rate-limited, key-protected API routes, in-app preview, and multi-quality download support for both platforms.

### Lessons Learned
Building a proxy that streams someone else's video ended up teaching more about HTTP headers (Range, Content-Disposition, Content-Range) than about the download feature itself — most of the real debugging was in the plumbing, not the UI.

---
Author: Arman Ahemad Khan (https://www.arman-portfolio.online/)
Role: Application Security & Full-Stack Developer
Education: Final-year B.Tech CSE at Silicon University, Bhubaneswar (CGPA 9.15, graduating May 2027)