🎬

Quadra Studio

Professional Quranic video maker for YouTube & TikTok with templates and famous reciter voices

Overview

Quadra Studio is a professional tool for creating high-quality Quranic videos tailored for YouTube and TikTok platforms. The app provides a library of carefully designed ready-made templates that suit different video styles. It features integration of famous reciter voices with automatic text animation for Quranic verses, producing attractive videos with minimal effort. It supports export in multiple formats suitable for each platform with comprehensive branding customization options. The backend relies on Python for video processing and generation.

Features

  • Library of ready-made video templates carefully designed to suit different display styles for YouTube and TikTok
  • Automatic integration of famous reciter voices with the ability to select the reciter, surah, and specific verses
  • Automatic text animation for Quranic verses that synchronizes text appearance with recitation professionally
  • Export in multiple formats suitable for different platforms with quality and dimension settings for each platform
  • Comprehensive branding customization options including colors, fonts, logo, and backgrounds

How It Works

The app relies on Next.js for the frontend and Python for backend video processing. The user selects the template, reciter, and verses, then the Python engine generates the video with audio-text synchronization. Templates are stored as customizable templates in Prisma, and export is done in different formats based on the target platform.

Challenges

The biggest challenge was achieving precise synchronization between audio recitation and on-screen text appearance, which required advanced audio processing. Generating high-quality video while maintaining processing speed also required continuous optimization. Supporting multiple export formats while preserving quality was an additional challenge.

Technologies Used

Next.jsReactTypeScriptTailwind CSSPrismaNextAuthshadcn/uiRadix UIFramer MotionZustandRechartsReact Hook FormZoddnd-kitSonnerEmbla CarouselLucideVercelGitNode.jsBunnext-intlnext-themesReact QuerySharpcmdkdate-fnsTanStack TableMDX EditorReact MarkdownRemotionESLint