KanaDojo: Khi dev làm app học tiếng Nhật đẹp như Monkeytype

Mình tình cờ lướt GitHub trending tuần trước và thấy một repo khá thú vị: KanaDojo một platform học tiếng Nhật open-source với 2.6k stars. Cái khiến mình dừng lại không phải vì mình đang học tiếng Nhật (thực ra cũng có hơi hơi), mà vì cái cách project này được xây dựng. Nó lấy cảm hứng từ hai thứ mà dân dev chúng ta rất quen thuộc: Duolingo cho gamification và Monkeytype cho cái vibe tối giản, aesthetic. Kết hợp lại thành một cái gì đó khá đặc biệt.

Nhìn vào repo, mình thấy 22,000+ commits, 330 pull requests đang mở, 56 issues, và hơn 2,200 forks. Những con số này nói lên một điều: đây không phải side project chết yểu. Nó đang sống, đang thở, và có một cộng đồng contributor thực sự đang hoạt động. Mình quyết định clone về, đọc code, chạy thử, và chia sẻ lại với anh em những gì mình thấy.

Tech stack và kiến trúc folder Feature-Sliced Design đúng chuẩn

Điều đầu tiên mình để ý khi mở repo là cấu trúc folder. Nó không theo kiểu truyền thống components/, pages/, utils/ mà nhiều Next.js project hay dùng. Thay vào đó, KanaDojo tổ chức theo kiểu Feature-Sliced Design (FSD) một architectural methodology khá phổ biến trong cộng đồng frontend Nga và Đông Âu, nhưng chưa được biết đến nhiều ở Việt Nam.

Nhìn vào root folder, bạn sẽ thấy:

• app/ Next.js App Router, chứa routing và layout
• features/ từng feature riêng biệt, self-contained
• entities/ business entities, domain logic
• shared/ shared utilities, UI components dùng chung
• widgets/ các widget lớn hơn, compose từ features và entities
• core/ core logic, configuration
• data/ data layer, có thể là static data hoặc data fetching

Theo kinh nghiệm của mình, kiểu tổ chức này scale rất tốt. Khi project lớn lên, bạn không bị cái cảnh mở folder components/ ra thấy 200 files nằm la liệt. Mỗi feature tự chứa logic của nó, import từ shared/ khi cần, và không depend lẫn nhau theo kiểu spaghetti. Nếu bạn đang tìm một ví dụ thực tế về FSD trong Next.js project, KanaDojo là một reference khá tốt để học hỏi.

Về tech stack cụ thể:

Mình thấy cái này hay ở chỗ: họ setup DX (Developer Experience) rất bài bản. Husky + lint-staged đảm bảo code được format trước khi commit. Có Docker cho cả dev và production. Có cả AGENTS.md, CLAUDE.md, GEMINI.md tức là họ đã chuẩn bị instruction files cho AI coding agents. Đây là trend mới mà mình thấy ngày càng nhiều project áp dụng: viết sẵn context cho AI tools để contributor có thể dùng Copilot, Claude, hay Gemini hiệu quả hơn khi làm việc với codebase.

Ba "Dojo" và bốn game mode Gamification làm đúng cách

KanaDojo chia việc học tiếng Nhật thành ba khu vực chính mà họ gọi là "Dojo" (đạo trường rất đúng tinh thần Nhật Bản):

Kana Dojo dành cho Hiragana và Katakana hai bảng chữ cái cơ bản. Kanji Dojo cover từ JLPT N5 đến N1, tức là từ beginner đến advanced. Và Vocabulary Dojo để luyện từ vựng. Mỗi dojo có bốn game mode:

Cái flow này thực ra rất giống spaced repetition nhưng được wrap lại dưới dạng game. Từ dễ đến khó: Pick → Reverse-Pick → Input → Reverse-Input. Bạn bắt đầu bằng việc nhận diện thụ động, rồi dần dần phải chủ động recall. Đây là cách học ngôn ngữ hiệu quả nhất theo nghiên cứu cognitive science, và họ implement nó một cách rất tự nhiên.

Điểm mình đánh giá cao là con số 100+ themes. Nghe có vẻ cosmetic, nhưng nếu bạn đã từng dùng Monkeytype, bạn biết rằng customization là một phần quan trọng của trải nghiệm. Khi bạn có thể chọn theme mình thích, bạn cảm thấy "own" cái tool đó hơn, và bạn quay lại dùng nó thường xuyên hơn. Đây là UX psychology cơ bản mà nhiều learning platform bỏ qua.

Đọc code: Những điều mình thấy ấn tượng (và chưa ấn tượng)

Mình dành khoảng một tiếng để đọc qua codebase, và có vài điểm đáng nói.

Điểm cộng lớn nhất là documentation. Họ có CONTRIBUTING.md rất chi tiết, có cả "Beginner's Contribution Guide" riêng cho người chưa bao giờ contribute open-source. Có CODE_OF_CONDUCT.md, SECURITY.md, CHANGELOG.md. Folder docs/ riêng cho documentation. Folder community/ cho cộng đồng. Đây là level documentation mà mình hiếm khi thấy ở project open-source, đặc biệt là project không phải từ big tech.

Anh em lưu ý: nếu bạn đang maintain một open-source project và muốn thu hút contributor, hãy nhìn vào cách KanaDojo làm. 330 PRs đang mở không phải tự nhiên mà có nó đến từ việc họ tạo ra một môi trường mà người mới cảm thấy an toàn để contribute.

Về code quality, mình thấy họ dùng TypeScript khá nghiêm ngặt. Có folder types/ riêng cho type definitions. Có global.d.ts, canvas-confetti.d.ts, kuroshiro.d.ts, sql.js.d.ts tức là họ viết custom type declarations cho các library không có types sẵn. Điều này cho thấy team khá serious về type safety.

File instrumentation-client.ts cho thấy họ có setup monitoring/observability ở client side. next-sitemap.config.js và SEO_IMPROVEMENTS_SUMMARY.md cho thấy họ quan tâm đến SEO điều hợp lý vì đây là web app public, cần organic traffic.

Tuy nhiên, mình cũng có vài concern. File errors.log nằm trong repo đây thường là thứ nên nằm trong .gitignore. Có thể là oversight nhỏ, nhưng nó cho thấy không phải mọi thứ đều perfect. File proxy.ts ở root cũng khiến mình tò mò không rõ nó serve mục đích gì mà lại nằm ở top level thay vì trong core/ hay shared/.

330 PRs đang mở cũng là con dao hai lưỡi. Một mặt, nó cho thấy project thu hút nhiều contributor. Mặt khác, nó có thể là dấu hiệu của review bottleneck maintainer không review kịp. Nếu bạn submit PR, có thể phải chờ khá lâu.

Docker setup và local development

Mình thích cách họ cung cấp hai Dockerfile riêng biệt: Dockerfile cho production và Dockerfile.dev cho development, kèm theo docker-compose.yml. Điều này có nghĩa là bạn có thể spin up môi trường dev chỉ với một lệnh docker-compose up mà không cần lo về Node.js version, dependency conflicts, hay bất kỳ setup nào khác.

Với project Next.js, việc có Docker setup sẵn là một plus lớn, đặc biệt khi bạn muốn onboard contributor mới. Thay vì phải viết một đống instruction "cài Node 18+, chạy npm install, setup env variables...", bạn chỉ cần nói "chạy docker-compose up". Done.

Cấu hình vercel.json ở root cho thấy production deploy trên Vercel điều không bất ngờ vì project được Vercel sponsor. Đây cũng là lý do họ dùng Next.js App Router thay vì Pages Router Vercel luôn push cho adoption của App Router và các tính năng mới nhất.

Ai nên quan tâm đến project này?

Mình nghĩ KanaDojo relevant với ít nhất ba nhóm developer:

Nhóm 1: Người muốn học contribute open-source. Đây gần như là project lý tưởng để bắt đầu. Documentation đầy đủ, có beginner guide, có "good first issues", community active. Nếu bạn chưa bao giờ mở PR cho một open-source project và đang tìm chỗ để thử, đây là lựa chọn rất tốt.

Nhóm 2: Frontend developer muốn học kiến trúc. Feature-Sliced Design, Next.js App Router, TypeScript strict mode, Vitest testing, Husky + lint-staged đây là một boilerplate thực tế cho cách tổ chức một Next.js project ở production level. Thay vì đọc documentation trừu tượng, bạn có thể đọc code thực tế và thấy cách các pattern được áp dụng.

Nhóm 3: Người đang học tiếng Nhật. Obvious, nhưng đáng nói. Nếu bạn là dev đang học tiếng Nhật (mình biết khá nhiều anh em trong cộng đồng tech Việt Nam có sở thích này), thì KanaDojo vừa là tool học, vừa là cơ hội contribute vào chính tool mình đang dùng. Cái feeling contribute feature cho một app mình thực sự sử dụng hàng ngày nó khác hoàn toàn so với contribute vào một project mình không care.

Vài điều mình muốn thấy cải thiện

Không có project nào perfect, và KanaDojo cũng vậy. Mình có vài điểm muốn nêu ra:

Thứ nhất, thiếu backend rõ ràng. Từ codebase, mình thấy data có vẻ chủ yếu là static (folder data/), và có reference đến sql.js (SQLite chạy trên browser). Điều này có nghĩa là progress của user có thể không persist across devices. Đối với một learning platform, đây là limitation khá lớn bạn muốn học trên laptop ở nhà rồi tiếp tục trên điện thoại khi đi xe buýt.

Thứ hai, 330 open PRs là quá nhiều. Mình hiểu project open-source khó maintain, nhưng con số này có thể discourage contributor mới. Ai muốn bỏ công sức viết code rồi PR nằm đó hàng tháng không ai review?

Thứ ba, thiếu mobile app. Với Next.js, họ có thể build PWA khá dễ dàng, nhưng mình chưa thấy evidence rõ ràng về PWA support trong codebase. Learning app mà không có mobile experience tốt thì mất đi một phần lớn use case.

Dù vậy, nhìn tổng thể, KanaDojo là một project open-source chất lượng cao, có codebase sạch, DX tốt, và community đang phát triển. Nếu bạn đang tìm một Next.js project thực tế để học hỏi hoặc contribute, mình recommend cho vào watchlist. Clone về, đọc code, thử submit một PR nhỏ bạn sẽ học được khá nhiều từ cách project này được tổ chức.