A global short-drama membership MVP spanning acquisition, discovery, playback, account state, and content operations.
The public Vercel deployment is currently paused. The screenshot and verification results below come from the repository's successful production build, served locally with
next start.
Dramalio explores a product question, not just a visual clone: what is the smallest credible system for acquiring international short-drama viewers, helping them discover a story, resuming progress, and converting interest into membership without pretending unfinished payment or video infrastructure is live?
The result is a full-stack MVP with real navigable UI, localized acquisition surfaces, content and account models, an operations backend, and explicit provider boundaries for the capabilities that still require business decisions.
| Decision | Product reasoning |
|---|---|
| Localize entry pages before every deep route | Validate international positioning and SEO architecture without multiplying all content operations at once. |
| Keep payment in a provider-pending state | Do not imply users can be charged before a provider and legal flow are selected. |
| Model Stream IDs without shipping fake playback | Preserve the integration boundary while real episode assets are still in production. |
| Separate Vercel web concerns from Cloudflare stateful services | Keep SEO and product pages fast while giving sessions, content, progress, and operations an owned backend path. |
| Build real responsive DOM surfaces | Maintain accessibility and product behavior instead of using a screenshot replica. |
- No real customer charge while the payment provider is pending.
- No claim that demo episode metadata represents licensed production content.
- No fake Cloudflare Stream playback when final video assets are unavailable.
- No claim that all deep routes are fully translated; the first localization phase focuses on entry pages and discovery.
- Home, search, series, episode, genre, membership, account, admin, blog, and legal journeys.
- English plus 12 localized entry routes with hreflang and sitemap coverage.
- Continue-watching, favorites, progress, membership, and content-operation data models.
- Magic-link authentication flow with email-outbox fallback.
- Cloudflare Worker API, D1 schema, KV session binding, cron surface, and Stream authorization boundary.
- Vercel/Next.js frontend and API proxy layer.
- Responsive and SEO QA scripts plus unit, integration, and worker tests.
- Provider-pending states for payment, video, email, and analytics gaps.
Coding agents were used as collaborators for product decomposition, route and
data-model implementation, internationalization expansion, visual comparison,
regression coverage, and readiness audits. The repository keeps the durable
artifacts—design-qa.md, readiness notes, scripts, tests, and
commit history—so another contributor can inspect the reasoning rather than
trusting a generated demo.
I owned the MVP's product framing, staged scope, system boundaries, user journeys, internationalization strategy, provider-gap decisions, implementation coordination, and verification. The work demonstrates how I collaborate with engineering-level tools while remaining accountable for what is safe and useful to ship.
| Check | Current result |
|---|---|
| Vitest suite | 31 passing tests across 8 files |
| ESLint | Passing |
| Next.js production build | Passing; 505 static-page generation steps |
| Cloudflare Worker typecheck | Passing |
| Repository reproducibility guard | Pins pnpm 9.15.9 and validates workspace configuration |
| Product visual | Captured from the verified local production build |
Run the same checks:
corepack pnpm install --frozen-lockfile
corepack pnpm test
corepack pnpm lint
corepack pnpm build
corepack pnpm worker:typecheckGlobal visitor
│
▼
Next.js on Vercel
├── SEO / localized acquisition / product UI
├── account and content API proxies
└── provider-pending payment and playback states
│
▼
Cloudflare Worker
├── D1: users, series, episodes, progress, memberships, audit data
├── KV: session state
├── Cron: hourly operations
└── Stream / email / payment adapters: explicit integration boundaries
Repository map:
src/app/: product routes and Next.js API layer.src/components/: real responsive product surfaces.src/lib/: content, localization, infrastructure, and domain logic.cloudflare/worker/: owned backend API.cloudflare/d1/: relational schema and seed data.scripts/: API, infrastructure, SEO, stack, and responsive QA.tests/: product behavior and repository reproducibility checks.docs/: product decisions and full-stack readiness evidence.
Requirements: Node.js 22 and Corepack.
git clone https://github.com/lisir202446/dramalio.git
cd dramalio
corepack enable
corepack pnpm install --frozen-lockfile
corepack pnpm devCopy the documented environment template only when connecting external services. The UI and test suite intentionally work without production secrets.
- The Vercel deployment is paused and should not be treated as a working demo link.
- Final episodes, poster rights, and Stream assets are not connected.
- Payment remains intentionally pending until a provider and operating flow are selected.
- Deep-route translation requires a CMS/content localization strategy.
- Production email, analytics, search-console verification, and the custom domain remain unbound.
The next useful milestone is not “more pages.” It is one end-to-end validated market loop: licensed episode assets, a selected payment provider, localized content operations, and measurable acquisition-to-trial behavior.
Dramalio 是一个面向全球短剧场景的会员产品 MVP，覆盖获客、内容发现、观看进度、会员、账户和运营后台。我在项目中重点展示的是产品判断与分阶段落地：先搭建可验证的国际化和全栈边界，对尚未确定的支付、视频和邮件能力保持真实的 pending 状态，而不是用假数据包装成已上线业务。