Todo Task Manager Demo

一个基于 React + TypeScript + Vite 开发的 Todo 任务管理 Demo。

这个项目的目标不是只做一个静态待办列表，而是尽量按真实前端业务场景去组织代码：包括异步数据加载、提交中状态控制、错误提示、任务筛选和基础组件拆分。项目目前适合作为前端初级阶段的练手作品，也适合用于展示自己对 React 基础开发流程的理解。

Project Highlights

• 使用 React + TypeScript 搭建任务管理页面
• 使用模拟接口抽离数据层，练习真实请求流程
• 支持任务新增、删除、完成状态切换
• 支持 All / Active / Done 三种筛选视图
• 区分页面初始化加载状态和用户操作提交状态
• 提供空状态和错误状态反馈
• 使用组件拆分保持页面结构清晰

Features

• 初始化加载任务列表
• 新增任务
• 删除任务
• 切换任务完成状态
• 根据任务状态筛选列表
• 显示任务总数、未完成数、已完成数
• 加载中禁用交互，避免重复提交
• 请求失败时显示错误信息

Tech Stack

• React 19
• TypeScript
• Vite
• ESLint

What I Practiced

这个项目主要用于练习以下前端能力：

• 使用 useState 管理输入值、任务列表、筛选状态和 UI 状态
• 使用 useEffect 处理页面初始化时的异步数据加载
• 使用 TypeScript 定义任务类型，减少状态和数据结构混乱
• 将任务列表渲染逻辑拆分到独立组件中
• 模拟接口延迟，理解前端处理异步请求的基本方式
• 在交互过程中处理 loading、saving、error 等常见状态
• 使用 Git 和 GitHub 管理项目版本

Implementation Notes

当前项目没有直接对接真实后端，而是通过 src/fakeTasksApi.ts 模拟请求过程，目的是先把前端最核心的交互和状态管理逻辑写清楚。这样做有两个好处：

• 可以先专注练习 React 组件和异步交互流程
• 后续如果接入真实 API，替换数据层会更容易

页面主逻辑主要集中在：

• src/App.tsx 负责页面状态管理、异步请求调用、筛选逻辑和整体 UI 组织
• src/TaskList.tsx 负责任务列表渲染、空状态展示和操作按钮触发
• src/fakeTasksApi.ts 负责模拟获取任务、新增任务、删除任务和切换任务状态

Project Structure

my-app/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ App.tsx
│  ├─ TaskList.tsx
│  ├─ UserCard.tsx
│  ├─ fakeTasksApi.ts
│  ├─ index.css
│  └─ main.tsx
├─ package.json
├─ package-lock.json
├─ vite.config.ts
└─ README.md

Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

3. Build for production

npm run build

4. Preview the production build

npm run preview

Interview Talking Points

如果在面试中介绍这个项目，我会重点说明这些点：

• 这个项目不是只做静态页面，而是刻意模拟了真实请求的加载和提交过程
• 我把任务数据操作抽到 fakeTasksApi.ts，是为了让 UI 层和数据层职责更清晰
• 我区分了 isLoading 和 isSaving，因为页面初始化加载和用户操作提交是两类不同状态
• 我通过筛选状态实现了 All / Active / Done 的条件渲染
• 我使用 TypeScript 明确约束了 Task 数据结构，减少了状态更新时的出错概率

Future Improvements

如果继续迭代，这个项目还可以继续完善为更接近真实业务的小型应用：

• 接入真实后端 API
• 增加任务编辑功能
• 增加本地持久化，例如 localStorage
• 支持清空已完成任务
• 增加拖拽排序
• 增加用户登录和多用户数据隔离
• 增加表单校验
• 增加单元测试和组件测试
• 完善移动端适配和可访问性

Preview

建议在这里补充项目页面截图，方便面试官快速了解项目效果。

示例：

![Project Screenshot](./public/preview.png)

如果后续部署到线上，也建议补上：

• Live Demo: 待补充
• GitHub Repository: 待补充

Author

• GitHub: 待补充