Tasket.
Ứng dụng quản lý dự án dạng Kanban mang phong cách Pop Art sáng tạo, hỗ trợ kéo thả trực quan, phân quyền cộng tác và nhập liệu thông minh bằng giọng nói.
Chi tiết dự án (START)
Câu chuyện dự án
Situation - Bối cảnh
Các công cụ quản lý công việc dạng danh sách (to-do list) thông thường không thể hiện trực quan tiến độ dự án, thiếu các cấp độ phân quyền chia sẻ và lịch sử nhật ký hoạt động chi tiết giữa các thành viên.
Task - Nhiệm vụ
Xây dựng không gian làm việc Kanban tương tác kéo thả mượt mà, hỗ trợ tạo nhanh thẻ việc bằng giọng nói (Voice-to-Task) kết hợp xử lý AI, phân quyền cộng tác và tự động gửi email nhắc việc sắp hết hạn.
Action - Quyết định & Thực thi
Tôi đã xây dựng hệ thống kéo thả bằng `@dnd-kit/core`, viết module nhận diện giọng nói Speech-to-Text để chuyển lời nói thành tiêu đề công việc. Thiết lập hệ thống lưu trữ nhật ký hoạt động (activity log) và cấu hình Cron Job gửi email nhắc nhở qua Nodemailer.
Result - Kết quả đạt được
Hệ thống kéo thả mượt mà ở tần số quét cao, tính năng Voice-to-Task hỗ trợ tạo việc nhanh trong vòng 3 giây và email nhắc nhở gửi chính xác theo múi giờ người dùng thiết lập.
Takeaway - Bài học kinh nghiệm
Làm chủ việc xây dựng giao diện kéo thả phức tạp, tích hợp nhập liệu giọng nói bằng AI và cơ chế gửi email thông báo tự động (reminder) theo thời gian thực.
Preview & Trải nghiệm thực tế
Mỗi màn hình đi kèm phần mô tả chi tiết để làm rõ luồng hoạt động và trải nghiệm người dùng thực tế.
trang chủ mobile viewport
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "trang chủ mobile viewport" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
giao diện các project
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "giao diện các project" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
màn hình chi tiết dự án
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "màn hình chi tiết dự án" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
kéo thả dự án
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "kéo thả dự án" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
thêm công việc desktop view port
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "thêm công việc desktop view port" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
thêm công việc bằng giọng nói
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "thêm công việc bằng giọng nói" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
processing
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "processing" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
output nhập liệu bằng giọng nói
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "output nhập liệu bằng giọng nói" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
chia sẻ nhiệm vụ
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "chia sẻ nhiệm vụ" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
share project cho thành viên khác
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "share project cho thành viên khác" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
chỉnh sửa quyền trên nhiệm vụ
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "chỉnh sửa quyền trên nhiệm vụ" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
nhiệm vụ được chia sẻ ở chế độ chỉ xem
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "nhiệm vụ được chia sẻ ở chế độ chỉ xem" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
co work comment trên task
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "co work comment trên task" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
công việc sắp hết hạn
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "công việc sắp hết hạn" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
gmail gửi nhắc công việc hết hạn
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "gmail gửi nhắc công việc hết hạn" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
trang nhật kí hoạt động
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "trang nhật kí hoạt động" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
trang cài đặt
Ảnh này dùng làm bằng chứng cho flow Tasket. Màn hình "trang cài đặt" giúp giải thích rõ trạng thái UI, dữ liệu hiển thị và thao tác người dùng ở bước đó.
Trải nghiệm dự án
Source Code & Demo
Xem toàn bộ mã nguồn trên GitHub hoặc mở bản demo hoạt động thực tế.