Todo应用程序
使用React、TypeScript和AWS Amplify Gen2构建的全栈TODO应用程序。
特性
- ✅ 用户认证 -通过AWS Cognito通过电子邮件安全注册/登录
- ✅ CRUD操作 -轻松创建、阅读、更新、删除待办事项
- ✅ 任务完成 -用时间戳将待办事项标记为已完成
- ✅ 优先级 -按优先级组织任务(🔥 高，⚡ 中等，🌱 低）
- ✅ 智能时间戳 -查看任务创建和完成的时间
- ✅ 用户隔离 -每个用户只看到自己的待办事项（设计安全）
- ✅ 漂亮的UI -现代、灵敏的设计，动画流畅
- ✅ 智能分拣 -按完成状态、优先级和日期自动排序
- ✅ 进度跟踪 -可视化进度指标和完成统计
- ✅ 暗/亮模式 -基于系统偏好的自动主题切换
技术栈
- 前端：React 18、TypeScript、Vite
- 后端：AWS Amplify Gen2
- 认证：亚马逊干邑
- 数据库：亚马逊DynamoDB
- API：AWS AppSync（GraphQL）
入门指南
先决条件
- Node.js 18+和npm
- 已配置AWS CLI（用于部署）
安装
- 克隆存储库并安装依赖项：
npm install- 启动Amplify沙盒（这将把您的后端部署到AWS）：
npx ampx sandbox- 在新终端中，启动开发服务器：
npm run dev- 打开浏览器
http://localhost:5173
首次设置
- 应用程序将提示您创建帐户
- 使用您的电子邮件注册并验证您的帐户
- 开始添加待办事项！
项目结构
├── amplify/ # Amplify backend configuration
│ ├── backend.ts # Main backend definition
│ ├── auth/ # Authentication configuration
│ └── data/ # GraphQL schema and data models
├── src/
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ └── App.tsx # Main app component
└── package.json可用脚本
npm run dev-启动开发服务器npm run build-为生产而建npm run preview-预览生产构建npx ampx sandbox-启动Amplify沙盒环境
部署
要部署到生产环境：
npx ampx deploy这将在AWS中创建一个生产环境，并为您提供一个托管URL。
安全
- 所有待办事项都会自动限定在经过身份验证的用户范围内
- 用户只能访问自己的数据
- 身份验证由Amazon Cognito处理
- API访问使用JWT令牌进行保护