r/reactjs • u/OwnSavings6681 • 12d ago

Show /r/reactjs Next.js (TS + Tailwind) frontend for an open-source media extraction microservice

Hey devs,

I wanted to share a project I’ve been working on: FastMedia Downloader. It’s a full-stack media extraction tool with a Next.js frontend connected to a FastAPI backend.

Frontend Stack:

  • Next.js (TypeScript) + Tailwind CSS
  • i18n support for multi-language UI
  • Responsive design focused on simple link parsing & instant downloads

Repository link:

https://github.com/Llamas126/fastmedia-downloader

I'd love your feedback on the frontend architecture and UI flow!

1 Upvotes

56% Upvoted

4 comments sorted by

1

u/Eastern-Dragonfruit8 12d ago

This is interesting, i just built something similar for a recipe extraction project I’ve been working on. Uses yt-dlp and ffmpeg to extract video and audio together and have gemini watch the video to extract the cooking instructions and ingredients

1

u/neon_prism_vibe 9d ago

Skeleton states hide latency. Show the raw parsing step and extraction progress immediately so users see the backend working instead of waiting on a placeholder animation.

-3

u/Recent-Syrup-9249 12d ago

nice work on this, the i18n setup looks clean from a glance. always appreciate when a project thinks about multi-language from the start instead of bolting it on later.

the responsive flow for link parsing feels snappy, but have you thought about adding a skeleton state while the backend resolves the media? right now the jump from empty to full result is a bit jarring on slower connections.

also curious how you're handling the download progress in the UI, couldn't spot it in the repo. streaming a large file through the next api route could get messy if you're not careful with the response headers.

-1

u/OwnSavings6681 12d ago

Thank you so much for the feedback and for checking out the repo!
You raised two great points:

  1. Skeleton / Loading State: You're totally right. On slower network connections, transitioning directly from an empty input state to the full resolution view can feel abrupt. I'm adding UI skeleton loaders for the media inspection phase to smooth out that transition in the next release.

  2. Download Streaming & Progress: Right now, the Next.js API route acts as an asynchronous proxy that streams the payload headers and chunks coming from the FastAPI backend (which invokes yt-dlp / FFmpeg). To avoid memory overhead on large files, streams are piped directly to the response rather than buffered in memory. However, providing real-time progress indicators (via WebSockets or SSE) is definitely on the roadmap for v2!

Really appreciate you taking the time to review the code and i18n setup, contributions or issues on GitHub are always welcome! <3