Việc Của Tôi — Personal Task Manager

Phần mềm quản lý công việc cá nhân hiện đại, hoàn toàn miễn phí, chạy trên trình duyệt. Hỗ trợ song ngữ Việt/Anh, dark mode, drag & drop Kanban, lịch, dashboard thống kê. Dữ liệu lưu local hoặc đồng bộ cloud miễn phí qua Supabase.

A free, modern personal task manager (Vietnamese/English). Local-first with optional Supabase cloud sync. Deploy free on Vercel/Netlify/Cloudflare Pages.

Tính năng

• Tasks: thêm/sửa/xóa, mức ưu tiên (low → urgent), hạn chót, reminder browser notification, subtasks, mô tả Markdown-friendly.
• Phân loại: theo dự án (có màu) và thẻ (tags).
• 3 chế độ xem:
  • List view với filter & search.
  • Kanban board kéo thả (To Do / In Progress / Done).
  • Calendar view theo tháng.
• Dashboard với biểu đồ recharts: tổng số việc, tỉ lệ hoàn thành, theo dự án, theo mức ưu tiên, hoạt động 7 ngày gần đây.
• Dark mode + theo system theme.
• Tiếng Việt / English (chuyển trong Settings).
• Lưu trữ pluggable:
  • Local: localStorage (mặc định, không cần đăng ký).
  • Cloud: Supabase (auth + đồng bộ nhiều thiết bị, free tier dùng thoải mái).
• Export / Import dữ liệu dạng JSON.

Stack

• Vite + React 18 + TypeScript
• Tailwind CSS (custom theme với CSS variables để dark mode mượt)
• @dnd-kit cho Kanban drag & drop
• recharts cho biểu đồ
• @supabase/supabase-js cho cloud backend (opt-in)
• lucide-react cho icon

Chạy local

npm install
npm run dev      # http://localhost:5173
npm run build    # tạo bản production trong dist/
npm run lint

Kết nối Supabase (đồng bộ cloud — tùy chọn)

1. Tạo project miễn phí tại https://supabase.com.
2. Trong Supabase Dashboard mở SQL Editor → New query, dán nội dung supabase/schema.sql và Run. Lệnh này tạo projects, tags, tasks cùng Row Level Security để mỗi user chỉ thấy dữ liệu của mình.
3. Vào Settings → API, copy:
   • Project URL
   • anon public key
4. Mở app, vào Cài đặt → Lưu trữ → Cloud (Supabase), dán URL và key, bấm Kiểm tra kết nối, rồi Lưu cấu hình.
5. Đăng ký / đăng nhập trong app — task của bạn sẽ tự sync giữa các thiết bị.

Bạn không cần đặt URL/key vào file .env: app cho phép nhập trực tiếp trong giao diện Settings và lưu vào trình duyệt. Phù hợp để deploy 1 lần rồi nhiều người dùng chung mỗi người 1 Supabase project riêng.

Deploy miễn phí

Vercel

npm i -g vercel
vercel        # follow prompts, framework = Vite

Netlify

• Push repo lên GitHub.
• New site from Git → chọn repo → build command npm run build → publish directory dist.

Cloudflare Pages / GitHub Pages

Tương tự — chỉ cần serve thư mục dist/ sau khi npm run build.

Cấu trúc thư mục

src/
  App.tsx                main app + router
  lib/
    types.ts             TypeScript types
    i18n.ts              translations (vi/en)
    storage.ts           localStorage + Supabase backends
    supabase.ts          Supabase client factory
    store.tsx            React context store
    theme.ts             dark mode helpers
    notifications.ts     browser reminder notifications
    utils.ts             date / id / format helpers
  components/
    ui.tsx               UI primitives (Button, Input, Modal, ...)
    Sidebar.tsx, TopBar.tsx
    Dashboard.tsx
    TaskCard.tsx, TaskDialog.tsx, TaskListView.tsx
    KanbanView.tsx, CalendarView.tsx
    ProjectsView.tsx     (also exports TagsView)
    SettingsView.tsx, AuthDialog.tsx
supabase/
  schema.sql             chạy 1 lần khi setup Supabase

License

MIT — miễn phí dùng cho cá nhân lẫn thương mại.