AI导哈

任务管理应用

一个基于React、TypeScript和AWS Amplify Gen2构建的全栈任务管理应用，提供用户认证、任务CRUD操作、优先级管理、进度跟踪等功能。

  • by Simone319
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Simone319/amplify-mcp-kiro-demo

使用说明

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（用于部署）

安装

  1. 克隆存储库并安装依赖项：
npm install
  1. 启动Amplify沙盒（这将把您的后端部署到AWS）：
npx ampx sandbox
  1. 在新终端中，启动开发服务器：
npm run dev
  1. 打开浏览器 http://localhost:5173

首次设置

  1. 应用程序将提示您创建帐户
  2. 使用您的电子邮件注册并验证您的帐户
  3. 开始添加待办事项！

项目结构

├── 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令牌进行保护

相关 MCP