Code & CraftLoading

正在整理这一页的内容…

Code & CraftPersonal Journal

Projects / Workbench

项目作品

这里整理我正在构建和持续打磨的作品：从个人网站、内容系统到交互实验。首页展示的是精选片段，这里则更适合作为完整的项目索引。

定位

作品索引

状态

持续更新

方向

Web / Full Stack

Featured

精选作品

用 React 模仿网易云音乐：从 API 调用到播放器状态管理

01Featured

用 React 模仿网易云音乐：从 API 调用到播放器状态管理

这篇笔记记录一下我用 React 模仿网易云音乐页面的过程。这个项目的起点比较简单。网上已经有开源的网易云音乐 API 反向代理项目，可以获取歌曲、歌单、搜索结果、歌词和播放地址等数据。所以我不需要从头研究音乐平台的接口，也不需要自己写一套完整后端。我主要做的是前端：一开始我以为这个项目主要是还原页面。比如

用 Phaser.js 写坦克大战：从儿时梦想到设计模式实践

02Featured

用 Phaser.js 写坦克大战：从儿时梦想到设计模式实践

这篇笔记记录一下我用 Phaser.js 开发坦克大战游戏的想法和过程。我想做这个项目，主要有两个原因。第一个原因比较实际：以前看设计模式时，经常会看到这些名字：状态模式。策略模式。工厂模式。观察者模式。对象池模式。单例模式。每个概念单独看都能理解，示例代码也不难。但回到实际项目里，我还是会有疑问

All Projects

完整列表

每个项目都可以进入详情页，展示背景、功能设计、图片记录、视频演示和阶段复盘。

01

用 React 模仿网易云音乐：从 API 调用到播放器状态管理

精选

这篇笔记记录一下我用 React 模仿网易云音乐页面的过程。这个项目的起点比较简单。网上已经有开源的网易云音乐 API 反向代理项目，可以获取歌曲、歌单、搜索结果、歌词和播放地址等数据。所以我不需要从头研究音乐平台的接口，也不需要自己写一套完整后端。我主要做的是前端：一开始我以为这个项目主要是还原页面。比如

02

用 Phaser.js 写坦克大战：从儿时梦想到设计模式实践

精选

这篇笔记记录一下我用 Phaser.js 开发坦克大战游戏的想法和过程。我想做这个项目，主要有两个原因。第一个原因比较实际：以前看设计模式时，经常会看到这些名字：状态模式。策略模式。工厂模式。观察者模式。对象池模式。单例模式。每个概念单独看都能理解，示例代码也不难。但回到实际项目里，我还是会有疑问

Build Stack

项目会围绕稳定、可维护和可部署展开。

Next.jsTypeScriptTailwind CSSPrismaPostgreSQL