基于 Next.js 和 Supabase 构建的虚拟身份生成与管理平台
特性 · 演示 · 本地开发 · 技术栈 · 部署 · 项目结构
🔐 虚拟身份生成
- 支持生成符合中国身份证规则的身份信息
- 可自定义性别、年龄范围、地区等参数
- 支持批量生成和管理多个身份信息
🛡️ 用户认证与管理
- 基于 Supabase Auth 的完整用户认证系统
- 支持邮箱注册、登录、密码重置
- 用户账户管理与个人资料设置
🎨 现代化界面
- 使用 Tailwind CSS 和 shadcn/ui 构建的美观界面
- 响应式设计,适配各种设备尺寸
- 支持深色/浅色主题切换
🔄 数据持久化
- 使用 Supabase 存储生成的身份信息
- 用户可以保存、编辑和删除自己的虚拟身份
- 支持设置收藏标记,方便快速访问
访问 https://fauxid.vercel.app 查看在线演示。
- 克隆仓库
git clone https://github.com/h7ml/fauxid.git
cd fauxid
- 安装依赖
# 使用 pnpm
pnpm install
# 或使用 npm
npm install
# 或使用 yarn
yarn
- 配置环境变量
复制 .env.example
到 .env.local
并填写必要的环境变量:
NEXT_PUBLIC_SUPABASE_URL=你的Supabase项目URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的Supabase项目匿名密钥
- 运行开发服务器
pnpm dev
应用将在 http://localhost:3000 运行。
- 前端框架: Next.js - React 框架,支持服务端渲染和静态生成
- 后端服务: Supabase - 开源的 Firebase 替代品,提供数据库、认证和存储服务
- 样式解决方案: Tailwind CSS - 实用优先的 CSS 框架
- UI 组件: shadcn/ui - 基于 Radix UI 的可复用组件集合
- 类型检查: TypeScript - JavaScript 的超集,提供静态类型检查
- 表单处理: React Hook Form - 高性能、灵活且可扩展的表单
- 验证: Zod - TypeScript 优先的模式验证库
- Fork 此仓库到你的 GitHub 账户
- 在 Vercel 控制台创建新项目并导入 GitHub 仓库
- 配置必要的环境变量
- 点击部署
- 在 Supabase 创建新项目
- 启用邮箱认证
- 创建必要的数据表和存储桶
- 将项目 URL 和匿名密钥添加到环境变量
fauxid/
├── app/ # Next.js App Router 目录
│ ├── (auth-pages)/ # 认证相关页面(登录、注册等)
│ ├── actions/ # 服务器端 Actions
│ ├── protected/ # 需登录访问的页面
│ └── ...
├── components/ # 可复用组件
│ ├── identity/ # 身份相关组件
│ ├── ui/ # UI 组件
│ └── ...
├── lib/ # 工具函数和库
├── supabase/ # Supabase 相关配置
├── utils/ # 实用工具
└── ...
- Fork 仓库
- 创建特性分支 (
git checkout -b feature/amazing-feature
) - 提交你的更改 (
git commit -m 'Add some amazing feature'
) - 推送到分支 (
git push origin feature/amazing-feature
) - 开启一个 Pull Request
该项目采用 MIT 许可证 - 详情见 LICENSE 文件