挑战
构建一个可靠的辅导市场需要解决多个集成挑战:
- 日程安排复杂性 — 协调导师的可用时间与学生的预订需要实时日历同步
- 支付流程 — 通过单一支付系统管理订阅、一次性支付和导师支出
- 身份验证 — 为学生、导师和管理员提供安全的多元角色访问
- 表单可靠性 — 复杂的预订和入职表单需要强大的验证以防止错误并确保数据质量
- 实时更新 — 学生和导师需要关于预订变更和平台事件的即时反馈
我们的解决方案
我们构建了一个全栈辅导平台,使用 Supabase 进行身份验证和实时数据,Stripe 用于订阅计费和导师支出,Calendly 用于日程安排——所有这些都封装在一个现代的 React/TypeScript 前端中。
架构
- 前端: 使用 TypeScript、TailwindCSS 和 Shadcn/UI 组件库的 React
- 构建工具: Vite 用于快速开发和优化的生产构建
- 后端: Supabase Edge Functions 用于处理预订、支付和入职的安全 API 端点
- 数据库: Supabase (PostgreSQL) 带有实时订阅以实现即时更新
- 身份验证: Supabase Auth 带有基于角色的访问
- 日程安排: Calendly 集成用于实时预订同步
- 支付: Stripe 用于订阅、一次性支付和导师支出
- 状态管理: Redux Toolkit 用于全局状态,React Query 用于服务器状态
- 表单验证: React Hook Form 带有 Zod 模式验证
- 动画: Framer Motion 用于过渡、加载器和模态框
主要功能
- 订阅系统 — Stripe 支持的计划,具有循环计费和免费层支持
- 实时日程安排 — Calendly 集成用于学生和导师之间的预订同步
- Supabase Edge Functions — 用于预订、支付和入职逻辑的无服务器 API 端点
- 表单验证 — React Hook Form 带有 Zod 模式,可防止提交错误
- 导师支出 — 通过 Stripe Connect 自动处理支出
- 实时更新 — Supabase 实时订阅,用于即时预订和状态变更
- 响应式设计 — 带有 Framer Motion 动画和可访问模态框的移动友好 UI
- 自动化部署 — CI/CD 流水线,用于稳定一致的发布
成果
技术栈
常见问题
MicrocosmWorks 构建了调度引擎,将所有可用时间存储为 UTC,并使用 IANA timezone database 在用户的本地时区进行渲染。系统还自动处理夏令时转换,并在一个时区的学生搜索另一个时区的导师时显示重叠时间窗口。
MicrocosmWorks 设计了一个自动重新安排课程的工作流程,该流程会立即通知学生,提供具有匹配学科专长的可用替代导师,并且如果在没有找到合适的替代方案的情况下,会将课程额度退还。反复取消课程的导师会在可靠性评分系统中被标记。
MicrocosmWorks 实施了一个灵活的、基于额度的订阅系统,学生可以购买每月小时套餐,这些套餐最长可结转60天。该平台支持周期内的升级和降级,并由 Stripe 的订阅计划 API 处理按比例计费。
是的,MicrocosmWorks 使用 WebRTC 构建了视频基础设施,采用了 SFU (Selective Forwarding Unit) 架构,该架构可以从一对一会话扩展到最多 8 名参与者的小组会话。小组课程每名学生消耗的积分更少,从而鼓励协作学习,同时保持导师的收入。
MicrocosmWorks 通常以 $15-$40/小时的开发费率交付辅导平台,完整范围(包括视频集成、排课、支付和导师匹配)需要 600-900 小时。WebRTC 基础设施可以部署在经济高效的云实例上,从而保持持续运营成本低廉。
