DeenStudio

• 

  Image of Page 3 Generating the AI visuals and social caption content.

• 

  Image of Page 3, Generate AI visuals and social caption content.

• 

  Image of Page 2, Choose visual and motion style.

• 

  Image of Home Page, Choose a verse or ask Habibi AI for verse guidance.

• 

  Image of Page 4, Preview and export a vertical short with recitation audio.

Inspiration

Everyday, Muslim creators spend hours in CapCut manually typing Arabic that renders backwards, hunting for respectful backgrounds, and writing captions from scratch, just to share one ayah. We built DeenStudio because spreading beneficial knowledge should be easy, not a 45-minute editing session. Inspired by Surah An-Nahl 16:125 - "Call to the way of your Lord with wisdom and good instruction", we wanted to give the Ummah a tool that makes that instruction beautiful. We wanted one workflow that turns a real emotion or life moment into respectful, shareable content quickly, without compromising quality, or authenticity.

What it does

DeenStudio turns a Quran verse into a shareable short-form video in under 30 seconds. You describe how you're feeling to Habibi AI and it suggests a relevant Surah and Ayah. You pick a curated halal-safe template, hit Generate, and the app produces a DALL-E 3 background, renders a 9:16 canvas with correct RTL Arabic text, generates a GPT-4o written TikTok hook and caption, and exports a .webm video with recitation audio synced to verse transitions, all in one flow.

How we built it

1. React and Vite power the 4-step wizard UI.
2. HTML5 Canvas handles all video compositing and RTL Arabic rendering using the Amiri font.
3. MediaRecorder exports the canvas as a .webm video with recitation audio mixed in via the Web Audio API.
4. DALL-E 3 generates the background images and GPT-4o writes the social copy, both called through Vercel serverless functions so API keys never touch the browser.
5. The Quran API provides verified ayah text and per-reciter audio URLs.

Challenges we ran into

1. Production reliability was different from local behavior, especially around "Habibi" suggestions and export planning.
2. External API/network delays could stall playback planning or make responses feel inconsistent.
3. Prompt variability caused repetitive fallback behavior when semantic matching was too narrow.
4. Security and deployment procedure required careful handling of API keys and server/client boundaries.

Accomplishments that we're proud of

We shipped a complete end-to-end creator workflow, from typing a feeling into Habibi AI to downloading a branded vertical video, in a single hackathon. The Arabic rendering is pixel-accurate with proper ligatures. The export pipeline handles audio sync, verse transitions, and graceful silent fallback when audio is blocked by the browser. And the entire thing runs on a free Vercel deployment with no database.

What we learned

1. Reliability and fallback design matter as much as model quality in real-world AI apps.
2. Server-side key handling is essential for production safety and trust.
3. Small UX details (status feedback, timing, transitions) dramatically improve user confidence.
4. Building for faith-centered content requires balancing technical speed with respectful presentation.

What's next for DeenStudio

Direct TikTok and Instagram Reels upload integration. More reciters and language support for non-English speaking Muslim communities. A mosque and Islamic organization plan where teams can co-create and schedule content. And a Habibi AI upgrade that understands richer emotional and contextual input to suggest more nuanced verse pairings.

Built With

• html5
• openai
• quranapi
• react
• tailwind
• vite