Có một kiểu repo mà dev frontend hay lưu lại để tham khảo: bản dựng giao diện hoàn chỉnh từ một file Figma, chạy được thật, không phải mockup tĩnh. kargulstudio/calender-app-design là đúng kiểu đó. Nó là prototype của “Kargul Workspace”, một workspace people-ops, dựng lại từ design “Dashboard, calendar” trên Figma.
Trang chính là /time-off, route mặc định, được làm “pixel-for-pixel” theo design gốc. Các trang còn lại trong sidebar cũng dựng theo cùng ngôn ngữ thị giác đó. Toàn bộ chạy trên browser, không có backend, dữ liệu lưu vào localStorage. Nghe đơn giản nhưng cái đáng xem nằm ở phần tương tác.
Nó làm được gì cụ thể
Trang calendar có ba chế độ xem: week, day, month. Kéo trên vùng trống để tạo event, kéo event để dời sang ngày khác, kéo mép dưới để đổi độ dài. Event trùng giờ thì tự xếp cạnh nhau thay vì đè lên. Có lane riêng cho all-day kèm ngày lễ, có đường “now-line” chạy theo giờ hiện tại, và popover chi tiết biết event được mở từ hướng nào để hiển thị cho khớp.
Phần time off mới là chỗ đáng để ý về logic nghiệp vụ. Dialog request đếm số ngày làm việc, bỏ qua cuối tuần và ngày lễ, đồng thời hiện số dư còn lại sau khi gửi đơn. Bảng request có search, filter, sort, xem chi tiết, sửa, hủy, xóa, và một bản preview cho manager approve/decline. Mấy cái này nghe nhỏ nhưng dev nào từng làm app HR đều biết nó dễ sai thế nào.
Phần shell cũng không bỏ trống: workspace switcher, command palette ⌘K tìm xuyên pages, events, requests, documents, invoices, notification, help menu, dark mode, account menu. Có hệ thống phím tắt riêng: N tạo event, R request time-off, T về hôm nay, ←/→ lùi/tiến, D/W/M đổi view, ? mở danh sách phím tắt. Ngoài ra còn Dashboard, Analytics, Personal details, Documents, Time tracking, Benefits, Invoice, Withdrawal methods, Settings, nhưng mấy trang này chỉ dựng giao diện, không có logic sâu như hai trang chính.
Vì sao 533 sao trong một ngày
Repo tạo ngày 2026-10-26 và cập nhật cùng ngày. Tức là nó vừa xuất hiện và đã hút 533 sao gần như ngay lập tức. Lý do không khó đoán: dân frontend đang rất cần một mẫu tham khảo cho stack mới.
Nhìn stack là thấy: Next.js 16 với App Router và Turbopack, React 19, TypeScript, Tailwind CSS v4 với design tokens map thẳng từ biến Figma, shadcn/ui (Radix primitives) được theme lại, Zustand với middleware persist đẩy state vào localStorage, next-themes cho dark mode, Sonner cho toast, cmdk cho command palette. Đây gần như là bộ combo mà nhiều team đang cân nhắc khi làm app nội bộ năm 2026, mà tài liệu thực chiến cho Tailwind v4 với Next 16 thì vẫn còn mỏng.
Điểm khác biệt so với mấy repo “design clone” khác: nó không dừng ở giao diện. Mấy chỗ khó như tính ngày làm việc khi request nghỉ, xếp event chồng giờ, keyboard navigation đều được làm thật. Cộng thêm việc chạy được ngay trên Vercel, không cần setup gì, thành ra nó lan nhanh trên mấy nhóm chat dev.
Cài và chạy thử
Clone về rồi chạy hai lệnh quen thuộc:
npm install
npm run devMở http://localhost:3000. Nếu muốn quay về đúng trạng thái thiết kế ban đầu, vào Settings → Data → Reset demo data, hoặc xóa site data của trình duyệt.
Trạng thái seed sẵn trong src/lib/seed.ts chính là cái design thể hiện: tuần 8 đến 14 tháng 11 năm 2026, chọn thứ Ba ngày 10 tháng 11, số dư phép là 7 available, 2 pending, 3 upcoming. Muốn xem app xử lý số liệu thế nào thì cứ sửa file này.
Cấu trúc thư mục khá gọn, chia rõ app/ cho routes (mỗi folder ứng với một trang sidebar), components/ tách thành ui/, shell/, calendar/, time-off/, dialogs/, pages/, rồi stores/ cho Zustand, hooks/ cho mấy cái client-only như “today”/”now”, lib/ cho types, date helpers, leave rules và seed data. Ai muốn học cách tổ chức một app Next lớn thì đây là ví dụ đọc được.
Ai nên dùng và dùng vào việc gì
Dev frontend đang tuyển stack Next 16 + Tailwind v4 nên clone về đọc. Đây là cách nhanh nhất để thấy Tailwind v4 với design tokens từ Figma hoạt động ra sao trong thực tế, thay vì đọc changelog.
Team làm app HR, people-ops hoặc bất kỳ sản phẩm nào có module nghỉ phép. Phần tính working days, bỏ qua holiday, hiện balance sau request là thứ có thể bê gần nguyên xi, chỉ cần thay seed data và nối API. Tương tự với phần calendar: drag để tạo, kéo để dời, resize, xếp event chồng giờ, all-day lane. Mấy cái này tự viết từ đầu tốn cả tuần.
Designer muốn kiểm tra design Figma có khả thi không. Chạy lên là biết ngay chỗ nào đụng giới hạn của browser.
Người mới học React 19 và Zustand persist cũng có cái để đọc, vì store được tách gọn theo từng mảng (app data, calendar view, overlays) chứ không nhồi một cục.
Ưu và nhược
Ưu điểm rõ nhất là chất lượng tương tác. Mấy thao tác drag trên calendar không phải dễ làm cho mượt, mà ở đây làm được, kèm popover biết hướng mở. Phần time off có logic nghiệp vụ thật, không phải giao diện rỗng ruột. Stack hiện đại, license MIT thoáng, deploy sẵn trên Vercel nên ai cũng thử được trong vài phút.
Hạn chế thì phải nói thẳng: đây là prototype, không phải sản phẩm. Không có backend, không auth, không đồng bộ đa người dùng, dữ liệu nằm hết trong localStorage nên mất khi xóa site data. Mấy trang phụ như Dashboard, Analytics, Benefits, Invoice chủ yếu là giao diện, đừng kỳ vọng logic sâu. Repo mới tạo và cập nhật trong cùng một ngày, nên chưa có lịch sử issue, chưa có tài liệu ngoài README, chưa biết tác giả có duy trì tiếp không. License là MIT © 2026 Kargul Studio, dùng thương mại được, chỉ cần giữ copyright notice.
Cái đáng lưu ý thêm: seed data ghi tuần 8 đến 14 tháng 11 năm 2026, tức là app sẽ hiển thị tuần đó dù hôm nay là ngày nào, và đường “now-line” sẽ nằm ngoài vùng nhìn thấy nếu bạn đang ở tuần khác. Không phải lỗi, chỉ là chủ ý của bản demo. Ai fork về làm thật thì nhớ đổi chỗ này.
533 sao trong ngày đầu là con số đẹp, nhưng nó đo mức độ chú ý chứ chưa đo độ bền. Cứ clone về, sửa src/lib/seed.ts, rồi thử kéo một event từ thứ Ba sang thứ Năm xem code xử lý ra sao. Đó là cách nhanh nhất để biết repo này có đáng bỏ thời gian đọc tiếp hay không.
Câu hỏi thường gặp
kargulstudio/calender-app-design có cần backend hay database không?
Không. Toàn bộ app chạy trên browser, không có backend và không có auth, dữ liệu được lưu vào localStorage thông qua middleware persist của Zustand. Vì vậy dữ liệu sẽ mất khi bạn xóa site data của trình duyệt.
Làm sao để đưa app về đúng trạng thái thiết kế ban đầu?
Vào Settings → Data → Reset demo data, hoặc xóa site data của trình duyệt. Trạng thái seed nằm trong src/lib/seed.ts, mặc định là tuần 8 đến 14 tháng 11 năm 2026 với số dư phép 7 available, 2 pending, 3 upcoming.
Vì sao đường now-line không hiện đúng tuần hiện tại?
Vì seed data cố định ở tuần 8 đến 14 tháng 11 năm 2026, nên app luôn hiển thị tuần đó dù hôm nay là ngày nào, và đường “now-line” sẽ nằm ngoài vùng nhìn thấy nếu bạn đang ở tuần khác. Đây là chủ ý của bản demo, ai fork về làm thật thì nhớ đổi chỗ này trong src/lib/seed.ts.
