Skip to content
Sercan — Hüseyin Sercan Gündoğan

Case study

AI Video Transformer

A full-stack AI video-to-video app: upload a clip, choose Magic Hour style parameters, and browse async history until the generated video is ready.

End-to-end ownership
AI Video Transformer architecture overview with Uploadcare, Cloudinary, Magic Hour, and MongoDB
Placeholder asset — Architecture overview

Overview

AI Video Transformer is a full-stack Next.js application for Magic Hour video-to-video transformations. Users upload a source clip, submit style parameters, and follow async job status in a history view until a durable generated video is available.

Context

I built this as a solo full-stack project to demonstrate upload pipelines, third-party AI APIs, webhook-driven async work, and durable media storage on a serverless Next.js/Vercel stack.

My role

I owned architecture, API routes, provider integrations, UI, validation, tests, documentation, and deployment as creator and full-stack developer.

Ownership

End-to-end ownership of the application: Uploadcare → Cloudinary → Magic Hour → MongoDB → Vercel webhook surface, plus the React history/polling UX.

Problem

Video-to-video renders take minutes and provider download URLs expire. Large binaries should not transit through serverless functions, and the browser must not be the source of truth for job state.

Contribution

  • Designed a UUID-only upload registration path that verifies Uploadcare metadata server-side before Cloudinary remote-fetch.
  • Implemented transform + webhook APIs with trusted transformation IDs (clients cannot override asset URLs).
  • Copied completed Magic Hour outputs into Cloudinary with deterministic public IDs for idempotent webhook handling.
  • Built adaptive history polling that runs only while jobs are queued or processing.
  • Documented architecture, env setup, and live webhook configuration; shipped a public Vercel demo.

Technical decisions

  • Browser → Uploadcare for uploads; Next.js never proxies large video bodies.
  • MongoDB as lifecycle source of truth shared by UI polling and webhook updates.
  • Dashboard-registered Magic Hour webhooks (current provider API) with HMAC-SHA256 verification.
  • TanStack Query adaptive polling instead of WebSockets/SSE for this scope.

Challenges

  • Aligning with Magic Hour’s current webhook model versus older callback-URL assignment text.
  • Keeping upload/webhook paths within serverless duration limits for large media.
  • Preventing duplicate transform jobs with atomic claim / reclaim logic.
  • Securing webhooks (signature + timestamp skew) while remaining idempotent on retries.

Outcome

  • A live demo at ai-video-transformer-one.vercel.app covering upload → transform → webhook → history.
  • Clear evidence of full-stack ownership across media upload, AI providers, async webhooks, and serverless deployment.

Visuals

AI Video Transformer user flow — upload, transform, webhook, history
Placeholder asset — User flow

Technologies

  • Next.js
  • TypeScript
  • React
  • MongoDB
  • Uploadcare
  • Cloudinary
  • Magic Hour API
  • TanStack Query
  • Zod
  • Vercel
  • Tailwind CSS

Links