之前接了一个套壳 API 的网站项目。
项目内容大概是使用音乐生成的 API 然后实现了一个积分账户的实现。
之前也做过不少的前端项目，基本上都是直接让用户写一个 API Key 然后就直接实现一个调用生成图像或者视频的功能。
但如果去做海外站的话，其实这样做的话是会很浪费流量的，所以就尝试着做一个独立的站，也就是包含了账户注册、积分充值、会员等级等功能。
做前端其实很简单，也是因为之前做过不少了，总的来说还是很简单的。
主要就是后端。我选型的是用的一个 Supabase 作为免费的数据库工具。
部署的话还是采用把项目文档放到 GitHub 然后自动部署到 Cloudflare，但是部署到 Cloudflare 的话遇到了一些小问题，后面我就改用部署到 Vercel。
虽然说 Vercel 会方便点，但是其实还是更改了很多东西的。
再说说 AI 编程工具，这次开发我基本上都是用的谷歌那个新的 AI 编辑器 - Antigravity，也就是反重力编辑器。
主要用的就是 Claude code 和 Gemini，写起来是真的方便。
然后下面就说说关于后端部分的吧，后端的其实我们要先梳理清一个流程。
我这次是用一个海外的注册账户的工具 Clerk ，这个也是在其他地方了解到的，是一个集成多方账户的工具，有 Google 账户、GitHub 账户，我主要用的还是谷歌账户注册的，这个给我省了很多事情。
然后支付渠道的话，是用的 Creem，这个其实也是比较简单的。
我们只需要把产品说明、价格写入到他的产品设置内，
写好之后我们只需要搞一个 API Key 和 Webhook ，WebHook 其实就是一个回调路径，用于接收支付完成后的通知，我也不太懂具体原理，毕竟基本上都是用 AI 写的。
最大的工作量其实还是在这个 Webhook 这一块，要是在线调试的话是我最开始采用的是 ngrok。
这个每次调试都很麻烦，因为它每次都会生成一个不固定的网址，然后我就需要每次在那个 Creem 内将对应的值填在对应的设置内，只有这样才会跑通整个流程。
但是本地的话就直接使用一个本地的固定地址，就比如 localhost:3000，这样的话其实会方便很多。
这次我在本地调用调试好之后，部署到线上就遇到了很多问题，第一个是遇到一个 Next.js 的一个安全漏洞，这个其实问题也不大，我根据报错日志修复一下就好了。
后面就是关于 Vercel 的一些限制问题，直接部署在上面如果有匹配的配置，它会给出提示，然后按照报错日志来修改就行了，这个还是挺简单的。
改完之后，剩下的话就其实就是数据库这边了，在 Superbuse 这部分的那个连接字符串的话，浪费我很长的时间。不过还好，后面理顺了就还好。
整个注册调用流程的话是这样的：用户先通过 Clerk 注册账户，登录之后信息会自动写入到 Supabase 数据库里面，然后数据库返回内容给前端页面，注册就完成了。
关于这部分的话，默认的话其实还是 Google 账户，Google 账户它其实默认就不需要改动太多东西，比如账户名、头像等，这个头像都是默认使用 Google 账户的头像，而且不能修改。
如果你是通过邮箱注册的话，其实我也默认设置了一个头像，不过这个头像生成是使用一个第三方开源工具 DiceBear ，我之前用的还顺手的，我比较喜欢 Notion 风格的头像。
注册完之后然后就是一个充值积分的，充值积分的话，用户从前端发起请求，然后会跳转到 Creem，会生成一个支付链接，支付完成后，就会通过 Webhook 发送通知到后端，只要付款成功，积分就会写入到数据库，数据库返回信息到前端页面。
会员等级和任务生成的流程也是类似的，会员等级目前设置的话是没有赠送积分的，但是后续是会优化的。
这个流程其实很简单，主要是麻烦在调试的那个地方，我卡在那个支付账户和数据库这一块的，调了挺久的。
不过最近也搞好了，这也算是第一个自己的全栈项目吧，我觉得搞得还是挺不错的。
后续的话，接下来计划用 AI 全程辅助开发一个微信小程序，先跑通流程。
