Khám Phá Những Open Source GitHub Gems

Tại Sao Tôi Xây Dựng Tính Năng Này

Mỗi tuần tôi đều làm cùng một việc: nhảy qua lại giữa các tab GitHub search, bookmark repo vào các folder lung tung trên browser, rồi mất dấu cái thư viện hay ho mà tuần trước vừa thấy.

Tôi muốn có một nơi duy nhất để khám phá, đánh giá và lưu lại các dự án open source - đặc biệt trong lĩnh vực mobile và cross-platform. Vì vậy tôi đã xây dựng GitHub Repos Board ngay trong Dan Tech Academy.

Đây không chỉ là một cái wrapper cho GitHub search. Đây là một developer tool được thiết kế dựa trên cách tôi thực sự khám phá open source.

Bạn Có Thể Làm Gì

Lọc Theo Ecosystem

Năm bộ lọc topic bao phủ các ecosystem mà tôi viết nhiều nhất:

• Kotlin - Android libraries, KMP projects, Compose tooling
• Mobile - Cross-platform tools, SDKs, device APIs
• React Native - Navigation, state management, native modules
• Flutter - Widgets, plugins, state solutions
• Swift - iOS frameworks, SwiftUI components, Apple platform tools

Mỗi topic query GitHub Search API với topic: qualifier và ngưỡng tối thiểu 50 stars để lọc bớt những repo không chất lượng.

Repo Detail Sheet

Click vào bất kỳ card nào để mở panel chi tiết. Trên desktop nó trượt vào từ bên phải. Trên mobile nó nổi lên từ dưới.

Bên trong bạn sẽ thấy:

• README preview render với GitHub Flavored Markdown - tables, task lists, code blocks đều hoạt động
• Activity sparkline hiển thị 52 tuần commit history bằng biểu đồ SVG thuần
• Top contributors với hiển thị avatar
• Quick actions - yêu thích repo, copy URL git clone, hoặc nhảy sang GitHub

Dữ liệu chi tiết được fetch thông qua API route phía server, gộp 3 GitHub endpoints thành một cuộc gọi duy nhất. Nội dung README được cắt xuống 10KB để giữ tốc độ nhanh.

Hệ Thống Favorites

Nhấn icon trái tim trên bất kỳ card nào để lưu lại. Favorites của bạn được lưu trong localStorage với đầy đủ metadata - không chỉ là ID.

Mở favorites drawer để xem lại bộ sưu tập. Sắp xếp theo ngày thêm, số stars, hoặc tên. Xóa từng item hoặc xóa tất cả.

Khi bạn sẵn sàng chia sẻ, export theo 3 định dạng:

• Markdown - kiểu awesome-list, sẵn sàng paste vào README hoặc Gist
• JSON - dữ liệu có cấu trúc cho sử dụng programmatic
• Shareable URL - link được mã hóa hash chứa tối đa 50 repos

Keyboard Navigation

Board hỗ trợ điều khiển hoàn toàn bằng bàn phím:

Không cần chuột. Card đang focus sẽ có viền highlight và tự động scroll vào tầm nhìn.

Deep Links

Mọi trạng thái đều được mã hóa trong URL. Lọc theo topic, sắp xếp, tìm kiếm - URL tự động cập nhật. Mở detail sheet thì URL thêm ?repo=owner/name. Chia sẻ link đó và người nhận sẽ thấy chính xác những gì bạn thấy.

Bên Trong

Cho những ai quan tâm về kỹ thuật:

• Next.js 15 App Router với server-side API routes proxy GitHub Search API
• SWR cho client caching với keepPreviousData để tránh layout shift khi thay đổi filter
• Framer Motion cho animation enter/exit với hỗ trợ prefers-reduced-motion
• react-markdown + remark-gfm cho README rendering (dynamic import để giảm bundle ban đầu)
• Pure SVG sparkline - không phụ thuộc thư viện chart nào
• GitHub API aggregation - detail route fetch README, commit activity và contributors song song qua Promise.allSettled, xử lý response 202 "computing" của GitHub với auto-retry

Toàn bộ tính năng tuân theo hệ thống thiết kế zero-radius, zero-border của trang web. Phân cấp trực quan đến từ các lớp màu nền, không phải các yếu tố trang trí.

Thử Ngay

Truy cập /github-repos và bắt đầu khám phá.

Nếu bạn tìm thấy dự án đáng chia sẻ, sử dụng tính năng export để tạo danh sách được tuyển chọn. Tôi sử dụng công cụ này hàng ngày để cập nhật với hệ sinh thái open source mobile - hy vọng nó cũng hữu ích cho bạn.