个人工作流 | UonIra‘s Blog

技术栈

## 前端

基础	HTML、CSS、JavaScript、TypeScript strict、浏览器原理、HTTP
主框架	React + Next.js App Router
次框架	Vue 3；Vue 2 仅用于存量维护
SPA 工具链	Vite + React Router
本地状态	`useState`、`useReducer`、Zustand
依赖传递	Context API
服务端状态	TanStack Query，用于客户端请求、缓存、分页、Mutation
URL 状态	`URLSearchParams` 或 `nuqs`
本地持久化	localStorage、sessionStorage、IndexedDB
请求	原生 fetch 为主；axios 达到能维护现有项目的程度
表单	React Hook Form + Zod
样式	CSS、Tailwind CSS、shadcn/ui
企业 UI	MUI 二选一；建议优先 Ant Design
图标	Lucide
可视化	ECharts，Recharts
动效	Motion，GSAP,Lenis
组件工程	Storybook、设计 token、响应式组件
前端测试	Vitest、Testing Library、MSW、Playwright
UX	Accessibility、键盘操作、焦点管理
性能	Web Vitals、代码分割、图片优化、虚拟列表、Bundle 分析

后端技术栈 *

语言与托管	TypeScript + Node.js
服务端	Next.js Route Handlers、Server Actions
独立后端框架	NestJS
API	REST、HTTP 状态码、统一错误结构、分页与版本控制
API 约定	OpenAPI/Swagger、类型生成
参数校验	Zod；NestJS 项目 class-validator
数据库	PostgreSQL
数据能力	SQL、关系建模、索引、事务、查询计划、数据迁移
ORM	Drizzle
缓存与限流	Redis
后台队列	自建 Node 服务使用 BullMQ
Serverless 队列	Vercel 场景使用 Inngest 或 Upstash QStash
认证	Clerk 或 Auth.js；底层掌握 Cookie、Session、OAuth/OIDC
权限	RBAC、资源归属校验、组织/团队权限
文件存储	S3、Cloudflare R2 或 Appwrite Storage
实时通信	WebSocket、Convex
安全	CORS、CSRF、XSS、CSP、限流、密码散列、Secret 管理
后端测试	Vitest、API 集成测试、数据库测试
数据可靠性	Migration、备份恢复、幂等、审计日志

交付

包管理	pnpm，npm
代码管理	Git、GitHub、Feature Branch、Pull Request
代码检查	TypeScript、ESLint、Prettier；
CI/CD	GitHub Actions
容器	Docker、Docker Compose
部署	Vercel；独立 Node 服务可用 Railway、Fly.io 或云服务器
错误监控	Sentry
性能监控	Web Vitals、结构化日志
数据监控	慢查询、队列失败、Redis 命中率
配置安全	环境变量、密钥隔离、不同环境配置
发布	数据迁移、健康检查、回滚策略

项目初始化

创建 Git 仓库

初始化 Next.js 或 Vite

启用 TypeScript strict

配置 ESLint

配置 Prettier

根据需要加入 Oxlint

配置环境变量

添加基础 npm scripts

配置 GitHub Actions

框架设计

Next.js 项目：

Vite + React 项目:

边界约定：

components/ui：通用 UI 组件

components/business：业务组件

features：按业务领域组织功能

services：API 请求和外部服务

schemas：Zod 校验规则

stores：Zustand 状态

types：TypeScript 类型

lib：基础工具、认证、权限、格式化方法

数据接口

Convex 项目

Schema

Query

Mutation

Action

Index

Pagination

Realtime subscription

Appwrite 项目

Database

Collection

Attribute

Row-level Permissions

Storage

Functions

Authentication

UI

组件库

Tailwind + shadcn/ui

Ant Design / Element Plus

图标库

Lucide

状态与数据流

状态类型	方案
服务端数据、缓存、分页	TanStack Query
全局客户端状态	Zustand
局部页面状态	`useState`
表单状态	React Hook Form
简单跨组件状态	Context API
URL 筛选和排序	URL Search Params
草稿和轻量持久化	localStorage