探索Next全栈开发 - 做一个问卷表单低码项目

为何做这个项目

赶上最近帮女朋友找工作搞点儿校招面试项目的心态，自己也好长时间没有写React项目了(长时间浸润在Vue的世界)，刚好趁着这个机会，回顾下React知识点，探索一下当前React开发的一些生态体系。

选择问卷低代码项目是因为我是主要工作是低代码编辑器开发，刚好最近有一些表单编辑器相关的探索，也看了看腾讯问卷做一个表单搭建的流程，想着还是自己做一个顺手。

为什么叫MORGanna问卷星?

最近刚玩儿了一个游戏叫做 “阿瓦隆”，里面的一个角色叫做"莫甘娜"，作为一个反方角色能够扮演正方主角形象出现，作为一个业余玩家，也希望自己的这个小项目能够像问卷星一样能够有用武之地。

项目用到了哪些技术栈?

• React 18
• Next.js v14
• Ant Design UI v5
• Typescript
• Tailwind CSS
• Ant Design Charts
• PostgreSQL
• Drizzle ORM
• TRPC
• Next-Auth
• Uppy

项目主要功能

登陆注册

项目接入Next-Auth，采用第三方OAuth授权登陆方案，接入了Github和Gitlab的OAuth登陆授权。配置简单方便，登录认证流程也完善. 关于Next-Auth的更多信息可以前往官网查看.
Next-Auth

表单编辑器

表单编辑器就是一个简化版的低代码编辑器，采用传统的流式布局搭建，使用 Redux + Immr 进行状态数据管理。同时自行实现了一个 JSON-Schema Form表单生成器的组件，帮助简化开发组件的Props和Style表单属性定义。

流程设计器

流程设计器主要用于实现表单页面元素的组件间动态联动的效果，通过流程设计器，构建起组件元素之间的关联。采用 React-Flow 进行流程设计实现，将组件转化为流程节点，通过前后关系构建起组件触发流。

AI 智能表单生成

接入了阿里千问的大模型，通过对大模型进行身份预设，以及告知编辑器的基础组件信息，让编辑器生成问卷题目信息的JSON数据，在将大模型的JSON数据转化为页面的组件Schema结构即可快速生成一个表单页面.

数据搜集统计

项目编辑发布后，可以生成表单的访问链接，用户填写表单提交后，即可在数据统计面板查看用户提交的数据。编辑器将每次发布进行版本拆分，用户的每次提交数据会被写入到不同的版本下，使得一个问卷项目可以进行多次编辑发布，搜集不同的用户数据。

表单中的部分字段(主要是可枚举的组件)，能够对用户的提交数据进行可视化统计展示，同时在用户提交时，针对用户设备生成一份用户指纹，尽可能让一个用户的一台设备只能提交一次，避免多次提交数据进行干扰，同时也会静默搜集一些用户设备信息，ip等基础信息进行提交上报，进行简单的统计.

项目管理

Dashboard面板，能够查看用户的所有的问卷项目，对项目进行标🌟，删除等操作，删除的项目也可从回收站找回。

结尾

如果你对这个项目感兴趣，可以前往Github查看项目的详细实现，目前项目已发布部署，项目域名备案中，后续完善后会贴上体验链接。感兴趣可以点个 Github Star，也欢迎参与共建，也可添加作者微信(bangtz)，了解关于项目更多.

Github - MorGanna-Form问卷星

补上项目体验预览链接: MorGanna-Form问卷星