How I built a free AI Video Watermark Remover using React & Firebase

#javascript #showdev #webdev #productivity

Hey fellow devs! 👋

I recently launched a side project that solves a personal pain point I've had for a while: removing watermarks and ending screens from CapCut/TikTok videos without jumping through hoops.

Most tools out there require a signup, payment, or they simply "blur" the watermark (which looks terrible). I wanted to build something cleaner, faster, and 100% free.

Here is the result: VideoWatermarkRemove.com

🛠 The Tech Stack

I wanted to keep it lightweight and fast, so I went with:

Frontend: React + Vite (for that instant HMR)
Styling: Tailwind CSS (Dark mode by default, obviously)
Auth: Firebase Authentication (Google Sign-in)
Hosting: Vercel
Core: AI Inpainting models for object removal

🐛 The "Struggle" (A Hard Lesson on Caching)

It wasn't all smooth sailing. I spent about 3 hours debugging a weird Firebase Auth 400 Error when deploying to production.

Locally, everything worked fine. In production? Broken.
I checked my API Keys, my Google Cloud OAuth redirect URIs, and my .env variables. Everything looked correct.

The culprit? Vercel deployments and Browser Cache.
I had updated the authDomain environment variable in Vercel settings but forgot to trigger a Redeploy. Even after I did, my Chrome browser was aggressively caching the old index.html which referenced the old config.

Lesson learned: Always hard refresh (Ctrl+Shift+R) and verify your build variables in the "Network" tab before losing your mind! 😅

🚀 How it works

Instead of a simple Gaussian blur, the tool uses an AI inpainting approach. It detects the watermark area (like the bouncing TikTok logo or the static CapCut ending) and attempts to "reconstruct" the background pixels based on the surrounding context.