跳过正文
Background Image
  1. 博客/

Vibe Coding 一个二维码生成工具

·41 字·1 分钟
Cayden
作者
Cayden
独立开发者,分享产品开发过程中的日常体验、挑战与成长
目录

大家好,我是 Cayden,今天给大家分享一个我刚上线的二维码生成工具:QrCay,市面上二维码工具其实已经很多了,我使用下来发现,虽然生成二维码的功能大家都做的很好,但是我每次生成完二维码,等我下次重新进来,发现我上次生成的二维码已经不见了,我需要重新生成,非常麻烦。

很多工具都没有提供二维码生成记录保存的功能,主要是我平常工作中需要在多个二维码中来回切换,每次都要重新生成,非常麻烦。并且这些二维码其实是比较常用的,但是我又不想下载下来,我希望有个地方能维护着我的这个二维码,并且可以随时随地访问。

所以我就开发了这个工具,可以生成二维码,并且可以保存二维码生成记录,并且可以随时随地访问。

qrcay网站首屏

网站保存二维码的记录,不过因为目前没有接登录,所以二维码的记录是保存在浏览器的本地存储中的,所以如果浏览器清除缓存,那么二维码的记录就会消失。记录支持删除和二维码的下载

qrcay网站首屏

网站名字
#

网站名字叫 QrCay,是因为我名字叫 Cayden,Qr 是二维码的缩写,所以网站名字就叫 QrCay。Cayden 有小岛的意思,寓意就是“二维码小岛”

怎么实现的
#

我是通过Cursor AI 帮我实现的,我只需要告诉他我想要实现什么功能,他就会帮我实现,并且我还可以根据他的实现方式,进行修改,非常方便。不过一些网站的内容和细节的UI还是需要自己调整的

生成二维码的技术主要使用的 qrcode.react 这个库,因为我使用的是react + vite 的组合,所以直接使用 npm 安装即可。

网站的UI设计主要使用的 tailwindcss 这个库,这个库是基于 react 的,所以我在使用的时候,需要先安装 react,然后使用 react 的语法来实现。 目前这版样式还是比较简单的,后续会继续优化。

网站支持多语言切换,主要面向的是国外的用户,但是中文用户也支持使用,不过可能打开会慢一些,因为网站是部署在 CF 上的,所以可能需要一些时间来加载。

最后
#

这是个很简单的网站,刚上线没多久,整体还是比较粗糙的,后续会继续优化网站体验,并且会添加一些其他的功能,比如二维码的分享,二维码的下载,二维码的打印等等功能,欢迎大家使用,并且提出建议。