所有项目已暂停
Form Make
构建让人乐意表单
1 / 4
Моя роль创始人兼首席开发者
Период2025 – 2026
Категории
SaaSNext.jsHono
О проекте и концепция
Form Make 是一款现代 SaaS 服务，旨在快速启动交互式问卷、反馈表单、测验和潜在客户收集部件。它通过直观的视觉编辑器、灵活的品牌定制และ实时响应分析消除了繁琐的配置。
Ключевые возможности
- Bun Monorepo 架构：Next.js 16 (React 19) 前端与高性能 Hono API 后端
- 基于 SCSS 和 Style Dictionary 的设计 Token 系统，包含 16 种主题
- 结合 @hello-pangea/dnd 与 React Aria 的拖拽式表单构建器
- Socket.io 实时通信、PDF/Excel 数据导出、grammY Telegram 机器人与 Ollama AI 集成
Инженерные вызовы и решения
多阶段问卷架构与评分系统
Сложность / Проблема
传统的单页无限滚动容易带来极高跳出率。需要将问卷拆分为独立的阶段，并支持多维度的评分算法。
Решение
设计了基于“章节-阶段”的步骤化布局，支持在阶段节点进行动态跳转逻辑与统一的分数累加计算。
可视化拖拽构建器的渲染性能
Сложность / Проблема
在大规模 Schema 树形结构中，用户频繁的拖拽或配置修改会导致整个 React DOM 树发生昂贵的无效重绘。
Решение
运用 Zod 与 React Aria 构建了声明式表单渲染管线，并配合 Redux Toolkit 进行了字段更新状态隔离。
免代码的主题品牌定制
Сложность / Проблема
企业用户期望在不编写任何 CSS 的情况下，使问卷外观完全贴合企业的视觉规范。
Решение
引入 Style Dictionary 将设计 Token 转换为 CSS 变量，与 SCSS 模块深度结合，一键切换 16 种色彩方案。
Выводы и вынесенный опыт
- 构建可靠的 WYSIWYG 编辑器需要极致的状态隔离。
- 受访者的填写体验与编辑器的构建体验同样关键。
Использованный стек технологий
Next.js 16React 19TypeScriptSCSSHonoBunTanStack QueryReact AriaRedux ToolkitPostgreSQLDrizzle (ORM)Zod OpenAPISocket.iogrammYOllama AIDocker