DEV Community

WaseemAnjum
WaseemAnjum

Posted on

1

πŸŽ₯ Building a Scalable Social Media Video Downloader: Open Source NestJS + Next.js Project

πŸš€ Introducing Social Media Video Downloader

Hey DEV community! πŸ‘‹ I'm excited to share my latest open-source project: a full-stack video downloader solution that lets you download videos from major social media platforms with enterprise-grade features.

🎯 What's Special About This Project?

Unlike typical video downloaders, this project offers:

  • Enterprise-Grade Security: API key authentication, rate limiting, IP whitelisting
  • Multiple Platform Support: YouTube, Facebook, Instagram, TikTok, Twitter
  • Modern Stack: NestJS backend + Next.js 14 frontend
  • Real-Time Progress: Live download progress tracking
  • Type Safety: Full TypeScript support
  • Automatic Dependencies: Self-managing binary dependencies

πŸ› οΈ Tech Stack

Backend (NestJS)

  • TypeScript
  • PostgreSQL with Prisma
  • yt-dlp integration
  • Swagger API docs
  • Rate limiting
  • CORS protection

Frontend (Next.js 14)

  • Modern UI with dark/light theme
  • Server-side rendering
  • Real-time progress updates
  • Responsive design
  • TypeScript

✨ Features Breakdown

Video Platforms Support

  • YouTube: Videos, playlists, shorts
  • Facebook: Public/private videos, stories
  • Instagram: Posts, reels, IGTV
  • TikTok: Videos without watermark
  • Twitter: Tweets, spaces recordings

Download Options

  • Quality selection (up to 4K)
  • Format conversion
  • Audio extraction
  • Custom output paths
  • Progress tracking

Security Features

  • API key authentication
  • Rate limiting
  • IP whitelisting
  • Download duration limits
  • Usage analytics

πŸš€ Quick Start

Backend Setup

# Clone the backend
git clone https://github.com/your-username/social-media-video-downloader-api
cd social-media-video-downloader-api

# Install dependencies
pnpm install

# Setup environment
cp .env.example .env

# Start development server
pnpm run start:dev
Enter fullscreen mode Exit fullscreen mode

Frontend Setup

# Clone the frontend
git clone https://github.com/fabwaseem/Social-Media-Video-Downloader
cd Social-Media-Video-Downloader

# Install dependencies
pnpm install

# Setup environment
echo "NEXT_PUBLIC_API_URL=http://localhost:3001" > .env.local

# Start development server
pnpm dev
Enter fullscreen mode Exit fullscreen mode

🎨 Screenshots

[Add your application screenshots here]

πŸ”§ Architecture Overview

The project follows a clean, modular architecture:

Backend                          Frontend
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”                β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚   API Layer │◄───REST API────│    Next.js  β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€                β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚  Services   β”‚                β”‚    React    β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€                β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚   Prisma    β”‚                β”‚    State    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜                β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
Enter fullscreen mode Exit fullscreen mode

🀝 Contributing

This project is open source and welcomes contributions! Here's how you can help:

  1. 🍴 Fork the repositories
  2. πŸ”§ Create your feature branch
  3. πŸ’» Add your features
  4. πŸ” Test your changes
  5. πŸ“€ Create a Pull Request

🎯 Future Plans

  • [ ] Add more platform support
  • [ ] Implement batch downloading
  • [ ] Add download scheduling
  • [ ] Create browser extension
  • [ ] Add more output formats
  • [ ] Implement user dashboard

πŸ”— Links

πŸ’‘ Why I Built This

I created this project to provide a robust, enterprise-grade solution for video downloading that's both secure and scalable. The existing solutions either lacked security features or weren't suitable for production use.

🌟 Show Your Support

If you find this project useful, please consider:

  • ⭐ Starring the repositories
  • πŸ”„ Sharing with your network
  • πŸ› Reporting issues
  • πŸ’‘ Suggesting features
  • 🀝 Contributing code

πŸ“¬ Get in Touch

Have questions or suggestions? Feel free to:

  • Open an issue
  • Create a pull request
  • Find me on Github
  • Follow me here on DEV

Let's make video downloading better, together! πŸš€

opensource #typescript #nodejs #webdev

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post β†’

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️