Mobile Development 11 min read

Create a Free Open‑Source Short‑Drama App that Generates Revenue and Supports Mini‑Program & Web

The article presents a comprehensive guide to building a free open‑source short‑drama mobile app, detailing functional modules, immersive player, personalized recommendations, social interactions, monetization models, and a full tech stack—including Flutter or React Native for the front‑end, micro‑services backend, CDN, and DRM—while addressing high‑concurrency and cross‑platform challenges.

SpringMeng
SpringMeng
SpringMeng
Create a Free Open‑Source Short‑Drama App that Generates Revenue and Supports Mini‑Program & Web

Short dramas have become a hot segment of mobile internet, attracting massive traffic and revenue from view counts. The author shares an open‑source scaffold for developing a short‑drama app that runs on iOS, Android, and WeChat mini‑programs.

System Functional Requirements

Short‑Drama Resource Library

Massive collection of licensed vertical‑format videos (1‑10 min per episode).

Clear categorization by popular genres such as romance, revenge, time‑travel, etc.

Support for multiple resolutions (720p/1080p).

Immersive Player

Gesture controls for progress, volume, and brightness.

Variable playback speed (0.5×‑3.0×).

Real‑time danmaku/comments.

Auto‑play next episode with pre‑loading.

User Experience & Interaction

Personalized recommendation: infinite‑scroll home page (TikTok‑like), algorithm based on watch history and preferences, and "follow‑up" update reminders.

Multiple viewing modes: single‑episode playback and whole‑series continuous play with automatic skip of intros/outros.

Social features: like, favorite, share to social media; episode‑level discussion area; UGC comments and reviews.

User & Social System

One‑click login via phone number or third‑party (WeChat/Weibo).

User level and achievement system.

Social interactions: follow other viewers, private chat, watch ranking lists.

Planned UGC incentives: user‑uploaded short dramas and creator‑side management tools.

Monetization Features

Pay‑per‑episode, subscription, virtual currency (coins/diamonds) with recharge.

First few episodes free, later episodes locked behind payment.

Advertising: pre‑roll ("watch ad to unlock"), feed ads, brand‑customized short dramas.

Points & tasks: daily sign‑in, watch tasks, points redeemable for coupons or free episodes.

Technical Stack

Front‑End (iOS/Android/Mini‑Program)

Immersive player implementation:

Android – ExoPlayer iOS – AVPlayer Cross‑platform – react-native-video or Flutter video ecosystem.

Mini‑program – native <video> component with custom overlay for gestures.

Seamless browsing (infinite scroll) using:

React Native – FlatList Android – RecyclerView iOS – UICollectionView with state preservation for progress, volume, and brightness.

Payment & unlocking:

App stores – Apple IAP, Google Play Billing.

Mini‑program – WeChat Pay, Alipay.

Virtual‑currency system with local balance and server‑side verification.

Offline caching: intelligent Wi‑Fi‑only pre‑cache of upcoming episodes, cache‑clear settings, and encrypted storage for DRM.

Back‑End

Video Service:

CDN integration (Alibaba Cloud, Tencent Cloud, AWS CloudFront) for chunked delivery and adaptive bitrate.

FFmpeg for transcoding, thumbnail generation, and watermarking.

Anti‑hotlink: URL token, referer whitelist/blacklist, IP restriction.

Business & API:

Micro‑service architecture (Spring Cloud, Go‑Micro) separating user, order, video, and interaction services.

RESTful APIs + WebSocket for real‑time danmaku and comments.

Core logic for episode unlock verification, subscription validation, and watch‑progress sync.

API gateway for unified management, rate‑limiting, and authentication.

Data & Recommendation:

User profiling (watch duration, drop points, payment points).

Initial collaborative‑filtering recommendation, later upgrade to deep‑learning models similar to YouTube DNN.

Real‑time analytics with Flink/Spark for hot‑ranking; ELK stack for operational dashboards.

Cold‑start handled by "hot list" and editorial picks.

Payment & Order:

Unified payment gateway abstracting WeChat, Alipay, Apple, Google.

Scheduled reconciliation tasks to ensure callback‑order consistency.

Anti‑fraud: abnormal IP/device detection, idempotent processing to avoid duplicate unlocks.

Content Management Backend:

Admin UI built with Ant Design Pro or Element UI.

Content safety via third‑party moderation APIs (Alibaba Cloud, Tencent Cloud) with AI review plus manual audit.

Features: batch upload, episode management, statistics, and approval workflow.

Core Technical Challenges & Solutions

High Concurrency – peak‑hour surge of video requests solved by CDN + edge computing and stateless horizontally scalable API services.

Playback Smoothness & First‑Frame Time – video pre‑loading combined with multi‑bitrate adaptive streaming; special optimization for mini‑program first‑frame rendering.

Copyright Protection & Anti‑Piracy – HLS encryption, DRM, front‑end anti‑screen‑capture warnings, digital watermarking, and clear user agreements.

Cross‑Platform Data & State Sync – unified user‑ID system stored centrally; watch progress, favorites, and other states synchronized between app and mini‑program.

Mini‑Program Limitations – limited pre‑load size, package size, and payment channels; positioned as acquisition/light‑experience channel while directing complex features to the native app.

Demonstration

The following screenshots show the scaffold UI, playback page, recommendation feed, and admin console.

Demo screenshot 1
Demo screenshot 1
Demo screenshot 2
Demo screenshot 2
Demo screenshot 3
Demo screenshot 3
Demo screenshot 4
Demo screenshot 4
Demo screenshot 5
Demo screenshot 5
Demo screenshot 6
Demo screenshot 6
Demo screenshot 7
Demo screenshot 7

To obtain the scaffold, follow the public account mentioned in the original article and reply with the keyword "私活脚手架".

FlutterCDNmobile appshort videoReact NativeDRMmonetizationmicro‑services
SpringMeng
Written by

SpringMeng

Focused on software development, sharing source code and tutorials for various systems.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.