likes
comments
collection
share

从 0 到 1 设计、编码、搭建个人知识付费应用(Remix 全栈框架、集成支付)

作者站长头像
站长
· 阅读数 24

感兴趣或者喜欢的请点赞关注我,本文超过 100 个赞正式动工。

变更记录

  • 2022-07-30 初稿,设想提出
  • 2022-07-31 添加需求草稿

系统概述

类似于个人博客系统,可以发布文章、页面及代码片段。

设置付费粒度:

  • 付费 VIP,享受所有资源免费访问(有效周期内)
  • 单篇付费,对于设置付费的资源进行购买并获得访问权限(买断)

类似的应用

  • CodeHike: 一个开源代码高亮库,网站上部分示例需要 Github 赞助可见。
  • Framer book: 知名动画库 Framer Motion 的配套教程,年费制会员。
  • DesignCode: 免费限制 5 个视频课程,付费订阅解锁全部。

涉及的技术栈及云服务

技术栈:

  • Remix :下一代全栈框架,前端部分是 React
  • TailwindCSS、 Daisy UI: 下一代设计、样式框架
  • Prisma:下一代数据库 ORM

云服务:

  • Vercel: 免费的服务应用托管 + 边缘网络 + CDN
  • PlanetScale: 免费云端 MySQL 数据库
  • Sanity: Headless CMS 内容管理,提供免费的云托管

关于开源

该项目涉及的设计文档将放置于 CSDN 专栏,代码开源于 Github。

也可以提前关注我的 Github: https://github.com/willin


需求设计

基础需求

  • 个人知识付费博客应用系统

    • 图文内容

      • 文章
      • 代码片段 (动态可交互内容)
      • 页面(如关于、赞助商、友链、开源项目等)
    • 资源/附件

      • 如源码压缩包等文件
      • 开源项目 URL 等信息卡片
    • VIP 会员

      • 订阅制,可以访问付费图文内容
      • 但付费资源仍需要额外购买才能下载,享受 6 折优惠(可配置,0 折表示也免费下载)
graph LR
     visitor[访客]
     visitor --免费访问--> freeContent[免费图文内容] --付费下载 --> paidAttach[付费资源]
     visitor --付费访问--> paidContent[付费图文内容]--付费下载 --> paidAttach
     vip[VIP 会员] --免费访问--> content[免费+付费图文内容] --优惠购买下载 --> paidAttach

图文内容

Sanity

使用 Headless CMS 进行内容(文章、页面、代码片段、资源/附件)的管理。

MDX

使用 MDX 动态组件内容,以提升页面的交互性。

为什么不用数据库

首先,该系统基本都以免费的服务为依托。比如 MySQL 的云端服务商 PlanetScale 对于免费套餐是有每月请求数限制的。所以数据库仅用于存放文章阅读数、下载统计、用户付费账单等信息。

支付集成

  • 微信支付 (个人开发者 不支持)
  • 支付宝 当面付

当面付签约

打开支付宝手机 App,搜索【签约助手】。

从 0 到 1 设计、编码、搭建个人知识付费应用(Remix 全栈框架、集成支付)选择【当面付】进行签约

从 0 到 1 设计、编码、搭建个人知识付费应用(Remix 全栈框架、集成支付)营业执照是选填项,所以如果没有,个人也是可以签约的。(单笔 1,000 元,每月 50,000 元限制)

支付需求

普通用户

  • 需付费购买标记为付费的图文内容
  • 原价购买标记为付费的资源附件
  • 升级为订阅制 VIP 会员

VIP 会员

  • 免费访问标记为付费的图文内容
  • 优惠价(可配置折扣或免费)购买标记为付费的资源附件