借助 Cursor 做了第一个全栈项目，帮你将内容转为美观的图片

[chaseFunny]

大家好！我是 luckySnail，今天想分享我和 Cursor 一起开发的我的第一个全栈应用，我叫它 「SVG 秀」，听名字就知道跟 SVG 沾边，那它是干什么的呢？简单来说，它是使用当下最强的大模型快速将你的内容转为 SVG 图片的工具，并且支持在线编辑，保存，下载。体验地址：https://www.svgshow.cn/，我为每个人提供了 5 次免费体验机会，如果你也想要快速把内容转为生动的图片需求，那我建议你试一下，下面给大家看一下生成的图

我仅仅是将内容上传上去，然后它就给我生成了这样的内容，真的很惊艳！下面看看我是如何结伴 Cursor 完成这个项目的吧！

前端开发

先看看技术栈：

• next.js 15.2
• Tailwindcss 4
• zod
• zustand
• highlight.js
• shadcn/ui
• ahooks

基本上都是主流的技术，刚好尝试了一下 next.js 最新版本，开发体验巨大提升，主要体现在：

1. 更详细的报错信息
2. 更快的启动速度和页面跳转速度

开发过 next.js 都知道我在说什么！

前端其实没有特别复杂的部分都是基础的页面开发，值得一提的有两点：

1. 在 svg 生成完成转为 UI 渲染过程中，直接切换有点生硬，这里借住 AI 实现了流畅的过渡动画
2. 由于 SVG 在线编辑器开发比较耗时，这里使用了开源的工具，借住 AI 快速进行汉化，然后通过 iframe 间通信的方式，实现 SVG 在线编辑能力，而且我发现社区目前没有比较好的现成的 SVG 编辑器

虽然开发过程中，绝大多数的代码都是由 AI 生成，但是代码质量应该还是可以的，通过 rules 和微调保证了代码的质量，最后，我将代码开源啦！如果你觉得不错，辛苦帮忙点个 star 吧！这对我是非常大的鼓励！

开源地址：https://github.com/chaseFunny/svg-frontend

后端开发

作为一个前端开发者，后端肯定是要使用 node 来开发的，最近学完了 nest.js ，于是就刚好练手一下！我先在 github 上找到一个 star 比较多的 nest.js 模版：https://github.com/Saluki/nestjs-template

让我先介绍一下这个项目基本情况：

• 基于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 ：https://github.com/vercel/ai 来快速进行数据的获取和处理，其实我自己写了一套获取数据，解析数据的代码，但是最后发现不支持并发，才去开源社区找到了 ai-sdk，下次分享一定是分享 ai-sdk 的源码阅读，看看人家是如何在 node 中处理大量请求的
  • svg 更新：因为我提供了在线更新 SVG 的能力，所以我是新增了一个表来存 svg 信息和更新记录

到这里就结束了，如果你对开发细节和数据库设计感兴趣，可以查看源码：https://github.com/chaseFunny/svg-backend

上线

开发完成了！就要上线了，真的是瞎折腾还费钱，下面记录一下我使用的在线部署服务：

前端 next.js 和 后端 nest.js 其实都是 node 服务，这里最佳方式应该是通过容器化部署，然后再搞一个 CI/CD，但是小作坊还不知道这个项目是什么情况就一切从简吧！我使用的是服务器部署（结合宝塔）

数据库使用的是阿里云免费体验的 RDS 服务，数据库上线参考：https://www.yuque.com/asgas/bzyz7m/hl57otmtcfgr223q

nest.js 服务上线也很简单，把源码弄到服务器，然后通过pm2 部署，这里需要写一个 ecosystem.config.js，详情参考上面的文档

最后就是前端的上线了，next.js 不用说肯定是要部署在 vercel 上呀！但是，我是在国内使用呀！还是老老实实部署在服务器上吧！部署方式也是把源码上传到服务器，然后进行 build 和启动，这里可以写一个脚本，然后通过宝塔面板的 node 部署来进行部署

部署完成后，如果你有自己的域名，你可以去域名配置解析，然后让用户通过域名访问

到这里还差一步就是ssl证书，这里我使用的是 腾讯云的免费三个月证书

完结撒花🎉

总结

虽然这个项目业务逻辑不复杂，但是真正开发到上线还是需要一段时间，下面分享一下我的项目开发收获吧！

• 对请求头，响应头理解更深，熟悉了 Restful 风格 API
• 熟悉了全栈项目开发流程，深刻感受到 后端 > 前端 😭，但是依然热爱前端🩷
• 数据结构真的很重要，好的数据库设计能够减少很多开发量
• AI 真的很强大，但是前提是在开发者本身就不差的情况，感觉 AI 在强者手中能够发挥更大的价值
• 不要造轮子（有这时间可以读别人的源码，个人觉得更有价值），多看看 github ，了解最新技术动态！
• 对面向对象编程和面向过程编程理解更加深入