大家好！我是 luckySnail，今天想分享我和 Cursor 一起开发的我的第一个全栈应用，我叫它 「SVG 秀」，听名字就知道跟 SVG 沾边，那它是干什么的呢？简单来说，它是使用当下最强的大模型快速将你的内容转为 SVG 图片的工具，并且支持在线编辑，保存，下载。体验地址：www.svgshow.cn/，我为每个人提供了 5 次免费体验机会，如果你也想要快速把内容转为生动的图片需求，那我建议你试一下，下面给大家看一下生成的图
我仅仅是将内容上传上去，然后它就给我生成了这样的内容，真的很惊艳！下面看看我是如何结伴 Cursor 完成这个项目的吧！
前端开发
先看看技术栈：
- next.js 15.2
- Tailwindcss 4
- zod
- zustand
- highlight.js
- shadcn/ui
- ahooks
基本上都是主流的技术，刚好尝试了一下 next.js 最新版本，开发体验巨大提升，主要体现在：
- 更详细的报错信息
- 更快的启动速度和页面跳转速度
开发过 next.js 都知道我在说什么！
前端其实没有特别复杂的部分都是基础的页面开发，值得一提的有两点：
- 在 svg 生成完成转为 UI 渲染过程中，直接切换有点生硬，这里借住 AI 实现了流畅的过渡动画
- 由于 SVG 在线编辑器开发比较耗时，这里使用了开源的工具，借住 AI 快速进行汉化，然后通过 iframe 间通信的方式，实现 SVG 在线编辑能力，而且我发现社区目前没有比较好的现成的 SVG 编辑器
虽然开发过程中，绝大多数的代码都是由 AI 生成，但是代码质量应该还是可以的，通过 rules 和微调保证了代码的质量，最后，我将代码开源啦！如果你觉得不错，辛苦帮忙点个 star 吧！这对我是非常大的鼓励！
开源地址：github.com/chaseFunny/...
后端开发
作为一个前端开发者，后端肯定是要使用 node 来开发的，最近学完了 nest.js ，于是就刚好练手一下！我先在 github 上找到一个 star 比较多的 nest.js 模版：github.com/Saluki/nest...
让我先介绍一下这个项目基本情况：
- 基于Nest.js 10 的 Fastify（ HTTP 服务器），内置健康检查 API
- 完全的 TypeScript 支持，严格的代码规范校验
- 集成 Prisma ORM 的 REST API
- JWT（jsonwebtoken） 认证
- Swagger 文档集成
- Joi 参数校验、jest 测试
- Wiston 日志记录、Nodemon 的开发热重载
- 标准的开发目录结构
- Docker 集成
得到一个基建非常好的项目后，我的完整开发过程如下：
-
选择使用 PostgreSQL 作为数据库，
-
借住 AI 帮忙进行数据库设计
-
完成数据库设计后，编写 schema.prisma 进行数据库初始化
-
用户模块开发，用户的增删改查
-
注册登录逻辑开发，这里包含注册需要的邮箱服务，我使用了 nodemailer
-
全局 JWT 认证守卫开发
-
SVG 模块开发，我这里应该不是最佳实现，属于跟着 AI 摸石头过河了！
- 主要的接口有：svg 创建，生成，获取，或者指定 id 信息
- svg 生成：这里我使用了 vercel 开源的 ai-sdk ：github.com/vercel/ai 来快速进行数据的获取和处理，其实我自己写了一套获取数据，解析数据的代码，但是最后发现不支持并发，才去开源社区找到了 ai-sdk，下次分享一定是分享 ai-sdk 的源码阅读，看看人家是如何在 node 中处理大量请求的
- svg 更新：因为我提供了在线更新 SVG 的能力，所以我是新增了一个表来存 svg 信息和更新记录
到这里就结束了，如果你对开发细节和数据库设计感兴趣，可以查看源码：github.com/chaseFunny/...
上线
开发完成了！就要上线了，真的是瞎折腾还费钱，下面记录一下我使用的在线部署服务：
前端 next.js 和 后端 nest.js 其实都是 node 服务，这里最佳方式应该是通过容器化部署，然后再搞一个 CI/CD，但是小作坊还不知道这个项目是什么情况就一切从简吧！我使用的是服务器部署（结合宝塔）
数据库使用的是阿里云免费体验的 RDS 服务，数据库上线参考：www.yuque.com/asgas/bzyz7...
nest.js 服务上线也很简单，把源码弄到服务器，然后通过pm2 部署，这里需要写一个 ecosystem.config.js，详情参考上面的文档
最后就是前端的上线了，next.js 不用说肯定是要部署在 vercel 上呀！但是，我是在国内使用呀！还是老老实实部署在服务器上吧！部署方式也是把源码上传到服务器，然后进行 build 和启动，这里可以写一个脚本，然后通过宝塔面板的 node 部署来进行部署
部署完成后，如果你有自己的域名，你可以去域名配置解析，然后让用户通过域名访问
到这里还差一步就是ssl证书，这里我使用的是 腾讯云的免费三个月证书
完结撒花🎉
总结
虽然这个项目业务逻辑不复杂，但是真正开发到上线还是需要一段时间，下面分享一下我的项目开发收获吧！
- 对请求头，响应头理解更深，熟悉了 Restful 风格 API
- 熟悉了全栈项目开发流程，深刻感受到 后端 > 前端 😭，但是依然热爱前端🩷
- 数据结构真的很重要，好的数据库设计能够减少很多开发量
- AI 真的很强大，但是前提是在开发者本身就不差的情况，感觉 AI 在强者手中能够发挥更大的价值
- 不要造轮子（有这时间可以读别人的源码，个人觉得更有价值），多看看 github ，了解最新技术动态！
- 对面向对象编程和面向过程编程理解更加深入
对了，如果你对 Next.js 感兴趣可以看看冴羽的小册，如果你对 Nest.js 感兴趣可以看看神光的小册