Building VidDrop. What I learned about performance and user experience.

typescript dev.to

I just finished building VidDrop. A video downloader tool that supports YouTube, Shorts, Vimeo, and Facebook videos.

No registration. No premium tier. No hidden catches. Just a tool that works.

The idea came from a simple frustration. Every video downloader website I found was full of pop ups, fake download buttons, and questionable security. Some would work. Most would not. The ones that worked looked like they were designed in 2005.

So I decided to build my own.

I wanted something clean. Something fast. Something that respects the user.

This is what I built.

The core feature is straightforward. You paste a link. The app detects the platform. You choose the format and quality. You download. But the simplicity on the surface took a lot of work underneath.

Let me break down what actually went into this.

First I needed a reliable backend for video processing. I chose yt-dlp. It is powerful. It supports almost every platform. But integrating it with Next.js was not trivial. I had to handle streaming responses, manage timeouts, and deal with rate limiting from video platforms.

The biggest challenge was progress tracking. When someone downloads a large video file they want to know how much time is left. I implemented real time download progress with speed calculation and estimated time of arrival. Watching the numbers update in real time is surprisingly satisfying.

Then I added smart format detection. The app reads metadata from the video and presents only the formats that actually work. No guesswork. No error messages saying format not available after waiting thirty seconds.

The download history feature came later. I realized users often download multiple videos from the same channel or playlist. Saving the history locally means they can revisit past downloads without repasting links. Everything stays in the browser. Nothing gets sent to any server.

For the visual side I went with glass morphism effects. A blurred background with subtle borders and soft shadows. It looks premium without being distracting. The user is here to download videos not admire animations.

Dark and light theme support was a must. I respect system preferences but also provide a manual toggle. Some people want dark mode at noon. Some want light mode at midnight. I do not judge.

I added canvas confetti for the moment a download completes. It sounds silly but it works. That little burst of celebration makes the process feel rewarding. Users have told me they intentionally download extra videos just to see the confetti.

Everything is typed with TypeScript. The components. The API routes. The utility functions. No any types. No escape hatches. The type safety caught dozens of bugs before they reached production.

The tech stack includes Next.js fourteen with the App Router. Tailwind CSS for styling. Yt-dlp for video processing. And canvas confetti for joy.

The app is completely free. I am not collecting emails. I am not showing ads. I am not analyzing user behaviour. You paste a link. You click download. You leave. No strings attached.

Now let me share what I learned.

The first lesson is that performance matters more than features. Users do not care about fancy functionality if the page takes three seconds to load. I optimized the initial bundle. I deferred non critical scripts. I measured everything with Lighthouse. The result is a near perfect score on all metrics.

The second lesson is that error messages need to be human readable. Instead of saying something went wrong I tell the user exactly what happened. Video not found. Unsupported platform. Network issue. Please try again. Specific errors help users fix their own problems.

The third lesson is that local storage is underrated. I saved download history, user preferences, and recently used formats. No backend needed. No database. No privacy concerns. The data belongs to the user and stays with the user.

The fourth lesson is that building for yourself first leads to better products. I built VidDrop because I wanted something that did not exist. I became my own first user. Every feature was something I personally wanted. That alignment kept the project focused and honest.

The fifth lesson is that open source is powerful. The code is available on GitHub. Others have already contributed improvements. A better format detection algorithm. A fix for a broken platform. A performance optimization I did not think of. The community makes the project better than I ever could alone.

I am not saying VidDrop is perfect. There are limitations. Some platforms change their APIs without warning. Occasionally a video fails to process. I fix issues as they come but I cannot guarantee twenty four seven uptime.

Still I am proud of what I built.

If you want to try it the link is in the comments.

If you want to see the code the GitHub repo is also in the comments.

I would love to hear your feedback. What features would you add. What platforms should I support next. What would make this tool useful for your workflow.

Thank you for reading.

Source: dev.to

arrow_back Back to Tutorials