Một ứng dụng quản lý công việc hiện đại, đáp ứng trên web được xây dựng với React và Vite. Ứng dụng này cho phép người dùng quản lý các nhiệm vụ với các tính năng như phân loại, lọc, tìm kiếm và đánh dấu ưu tiên.
- ✅ Thêm, chỉnh sửa và xóa nhiệm vụ
- 📂 Tổ chức nhiệm vụ theo danh mục
- 🔍 Tìm kiếm và lọc nhiệm vụ
- ⭐ Đánh dấu nhiệm vụ quan trọng
- 📊 Theo dõi trạng thái hoàn thành
- 🎨 Giao diện hiện đại với Tailwind CSS
- 📱 Thiết kế đáp ứng
- ⚡ Phát triển nhanh với Vite HMR
- Framework Frontend: React 18
- Công Cụ Build: Vite
- Styling: Tailwind CSS
- Icons: FontAwesome
- Ngôn Ngữ: JavaScript (ES6+)
- Linting: ESLint
- Định Dạng Code: Prettier
- Clone repository:
git clone <repository-url>
cd web-todo-app- Cài đặt dependencies:
pnpm install- Khởi động server phát triển:
pnpm dev- Mở http://localhost:5173 trong trình duyệt.
pnpm dev- Khởi động server phát triểnpnpm build- Build cho productionpnpm preview- Xem trước build productionpnpm lint- Chạy ESLint
src/
├── components/ # Các component UI có thể tái sử dụng
│ ├── Categories.jsx # Quản lý danh mục
│ ├── TodoItem.jsx # Item todo cá nhân
│ ├── TodoList.jsx # Container danh sách todo
│ ├── TaskInput.jsx # Form nhập nhiệm vụ mới
│ ├── FilterPanel.jsx # Điều khiển lọc
│ └── ...
├── contexts/ # React contexts cho quản lý state
├── constant.js # Hằng số của ứng dụng
├── App.jsx # Component chính của ứng dụng
└── main.jsx # Điểm vào của ứng dụng
- Thêm Nhiệm Vụ: Sử dụng trường nhập ở trên cùng để thêm nhiệm vụ mới
- Phân Loại: Gán nhiệm vụ vào các danh mục khác nhau
- Lọc: Sử dụng bảng điều khiển lọc để xem nhiệm vụ theo trạng thái hoặc danh mục
- Tìm Kiếm: Sử dụng thanh tìm kiếm để tìm nhiệm vụ cụ thể
- Đánh Dấu Quan Trọng: Nhấp vào biểu tượng ngôi sao để đánh dấu nhiệm vụ quan trọng
- Hoàn Thành Nhiệm Vụ: Đánh dấu vào checkbox để đánh dấu nhiệm vụ đã hoàn thành