Tôi đã thử vibe coding một ứng dụng nấu ăn 35.000 dòng

• Một nhà đầu tư từng là nhà sáng lập đã phát triển một ứng dụng nấu ăn bằng vibe coding trong 20 giờ
• Tính năng cốt lõi là trợ lý giọng nói có thể điều khiển trong lúc nấu mà không cần dùng tay
• Backend API Rails 8 + frontend React + API giọng nói thời gian thực của OpenAI
• Tận dụng tính năng function calling của OpenAI để điều hướng theo thời gian thực trong trang
• Dùng Claude Code và Gemini 2.5 Pro để bổ sung các tính năng phức tạp
• Tổng quy mô mã nguồn khoảng 35.000 dòng
• Người dùng có thể khám phá nhiều công thức khác nhau qua lệnh thoại mà không cần chạm tay trực tiếp
• Cung cấp giao diện hội thoại tự nhiên
• Khởi đầu là dự án sở thích, nhưng kết quả cuối cùng đạt chất lượng cao với tính năng hữu ích và trải nghiệm người dùng thực sự tốt

Hoàn thiện ứng dụng nấu ăn bằng vibecoding

• Ứng dụng nấu ăn recipeninja.ai do chính tác giả lên ý tưởng và tạo ra chỉ trong 20 giờ
• Tác giả là cựu nhà sáng lập startup, hiện là nhà đầu tư tại Y Combinator, và là một "lập trình viên đã rỉ sét" vì gần như không dùng Ruby từ sau năm 2015
• Tác giả vốn thích nấu ăn và đã giữ ý tưởng về một “ứng dụng nấu ăn hands-free” trong thời gian dài
• Các website nấu ăn hiện có quá tập trung vào SEO, còn các ứng dụng thì UX đã lỗi thời; những app như Paprika vẫn cho cảm giác của năm 2009

Chọn công cụ và bắt đầu dự án

• Ban đầu tác giả thử làm một ứng dụng trò chơi chữ với Lovable nhưng sớm chạm tới giới hạn
• Sau đó chuyển sang dùng Windsurf để dựng backend API Rails 8 + frontend React
• Tự động hóa cả Homebrew, npm, cấu hình phiên bản Ruby, SSH key và thiết lập Heroku
• Rails migration cũng được xử lý tự động theo đúng quy ước chuẩn

Phát triển các tính năng cơ bản

• Chỉ với đầu vào đơn giản như “Lasagne” là có thể tạo ra toàn bộ công thức
• Sinh văn bản công thức qua OpenAI, tạo giọng nói qua ElevenLabs
• Tích hợp hướng dẫn bằng giọng nói theo từng bước và tính năng hiển thị hình ảnh
• Cũng rất ấn tượng khi Windsurf phát hiện rủi ro bảo mật và yêu cầu mạnh mẽ việc ngăn lộ API key

Mở rộng tính năng và quy trình phát triển lặp đi lặp lại

• Tính năng “nhập công thức nâng cao” bằng ảnh được triển khai chỉ trong vài phút
• Chỉ cần copy-paste log console hoặc thông báo lỗi là Windsurf tự sửa
• Khi tích hợp Google OAuth, chỉ cần dán ảnh chụp màn hình cấu hình là nó nhận ra chỗ sai ngay lập tức
• Việc bổ sung các tính năng như lưu công thức theo người dùng, thiết lập công khai/riêng tư cũng gần như được tự động hóa hoàn toàn

Triển khai và cấu hình DNS

• Tự động hóa triển khai lên Heroku; một số vấn đề dùng API phiên bản cũ được giải quyết bằng link tài liệu
• Việc kết nối domain GoDaddy cũng rất dễ khi công cụ chỉ rõ phải bấm nút nào và điền giá trị gì

Trải nghiệm dùng Windsurf như một công cụ AI

• Một số tính năng vẫn được tác giả tự kiểm thử bằng cách chạy yêu cầu curl hoặc xem web preview
• Git commit và deploy Heroku cũng được xử lý tự động trong terminal tích hợp
• Tuy vậy, các thay đổi quá mức hoặc commit không xác nhận vẫn cần người dùng can thiệp
• Khi được yêu cầu thêm chức năng analytics, nó phản ứng quá tay đến mức tạo hơn 100 sự kiện

Điểm chưa hài lòng và phần cần cải thiện

• Không có tính năng kiểm thử tự động nên sau mỗi lần đổi code vẫn phải tự test
• Không có chức năng tail log nên phải copy log thủ công mới phát hiện được những vấn đề như truy vấn N+1
• Refactor mã trùng lặp hoạt động không tốt — nếu muốn chỉ module hóa code mà vẫn giữ nguyên chức năng thì phải đưa chỉ dẫn thật cụ thể
• Định dạng phản hồi API thay đổi thường xuyên khiến frontend bị hỏng
• Việc tích hợp phân tích bằng Posthog thất bại, và lệnh thoại cũng gặp xung đột với âm thanh hiện có

Tối ưu hiệu năng và giảm chi phí

• Vấn đề ảnh độ phân giải cao → tự động tạo thumbnail và bản độ phân giải trung gian
• Tự động sửa vấn đề N+1
• Chuyển API key của ElevenLabs về backend và thêm tính năng cache giọng nói để giảm chi phí

Năng suất tăng vọt

• Mỗi phiên làm việc đều liệt kê ra 10~15 ý tưởng tính năng và triển khai hết trong vòng 30 phút
• Những việc trước đây mất hàng giờ thì nay được làm xong trong 1~2 phút
• Việc cải thiện thiết kế cũng chỉ cần ra lệnh bằng ảnh chụp màn hình là có thể tạo ra UI hoàn thiện cao về mặt thị giác
• Tham khảo carousel của ứng dụng DoorDash để làm thiết kế tương tự — thậm chí còn được đánh giá là đẹp hơn

Hoàn thiện cuối cùng và vấn đề bảo mật

• Cả việc thiết lập favicon cũng được tự động hóa bằng Bash script
• Sau khi đăng lên Twitter, có hàng trăm người dùng ghé thăm và tạo khoảng 1.000 công thức
• Tuy nhiên, người dùng lạm dụng đã khiến phát sinh 700 USD phí OpenAI
• Windsurf đề xuất 15 chiến lược phòng thủ, và hầu hết đã được áp dụng trong 10 phút để giải quyết vấn đề

Kế hoạch sắp tới và triển vọng kỹ thuật

• Dự kiến bổ sung tính năng tạo công thức dạng streaming dựa trên WebSocket
  • Ví dụ: phản ánh theo thời gian thực các chỉ dẫn như “thêm hạt”, “đổi thành 8 phần”, “chuyển sang hệ mét”
• Cũng dự kiến xây dựng giao diện voice agent — có thể đặt câu hỏi trong lúc nấu mà không cần chạm màn hình
  • Ví dụ: “Không có rau mùi thì có nguyên liệu nào thay thế không?”, “Đặt giúp tôi hẹn giờ 30 phút”
• Với người dùng có nền tảng kỹ thuật, các công cụ AI là một siêu năng lực
• Hướng phát triển cũng đang mở rộng để cả người không phải lập trình viên có thể dùng được: dự kiến hỗ trợ log tailing, kiểm thử tự động và tích hợp quản lý phiên bản
• Tác giả cho rằng trong tương lai gần, 95% việc viết code có thể sẽ do AI đảm nhiệm

---

Tóm tắt các tính năng chính của RecipeNinja

• Khái niệm cốt lõi: đây là ứng dụng hỗ trợ nấu ăn cung cấp hướng dẫn bằng giọng nói theo từng bước, giúp người dùng nấu ăn mà không cần dùng tay

Tính năng backend (dựa trên Rails API)

• Xác thực người dùng và quản lý quyền hạn

  • Chức năng đăng nhập thông qua tích hợp Google OAuth
  • Quản lý tài khoản người dùng với bảo mật được tăng cường
  • Người dùng chỉ có thể truy cập công thức riêng tư của chính mình, còn công thức công khai mới có thể chia sẻ với người khác

• Tính năng quản lý công thức

  • Cấu trúc model công thức
    • Gán public ID duy nhất để tăng bảo mật (định dạng: r_ + chuỗi ngẫu nhiên 14 ký tự)
    • Xác định rõ quyền sở hữu của người dùng (user_id, ràng buộc NOT NULL)
    • Có thể chuyển công thức giữa trạng thái công khai/riêng tư (mặc định: riêng tư)
    • Lưu nhiều loại thông tin như tiêu đề, nguyên liệu, các bước nấu, thời gian chế biến
    • Bao gồm tính năng upload ảnh bằng Active Storage và S3
  • Hệ thống tag
    • Thiết lập quan hệ nhiều-nhiều (M:N) giữa công thức và tag
    • Tag được triển khai bằng model riêng có tên duy nhất
    • Dùng model trung gian (RecipeTag) để liên kết công thức và tag
    • Cung cấp helper method để thêm và xóa tag
  • API endpoint cho công thức
    • Hỗ trợ thao tác CRUD
    • Cung cấp tính năng phân trang và metadata (current_page, per_page, v.v.)
    • Sắp xếp mặc định theo mới nhất dựa trên ngày tạo (created_at DESC)
    • Hỗ trợ lọc theo tag
    • Xuất danh sách và chi tiết bằng các serializer khác nhau tương ứng (RecipeSummarySerializer, RecipeSerializer)

• Tính năng tạo giọng nói

  • Hệ thống ghi âm giọng nói
    • Tạo hướng dẫn bằng giọng nói cho từng bước của công thức
    • Tích hợp Eleven Labs API để chuyển văn bản thành giọng nói
    • File âm thanh được cache trên S3 để giảm chi phí API khi gọi lặp lại
    • Tạo định danh duy nhất bằng cách kết hợp recipe ID, step ID và voice ID
    • Cung cấp tính năng buộc tạo lại file giọng nói
  • Xử lý âm thanh
    • Phân tích âm thanh bằng gem streamio-ffmpeg
    • Quản lý file âm thanh bằng Active Storage
    • Trong môi trường production, sử dụng phương thức lưu trữ qua S3

• Nhập và tạo công thức

  • Dịch vụ RecipeImporter
    • Tự động tạo công thức thông qua tích hợp OpenAI
    • Chuyển công thức dạng văn bản sang cấu trúc có tổ chức
    • Chuẩn hóa và parse nguyên liệu cùng các bước
    • Bao gồm tính năng nhập công thức qua ảnh

Tính năng frontend (dựa trên React)

• Các thành phần giao diện người dùng

  • Chọn và khám phá công thức
    • Xem danh sách công thức có phân trang
    • Tính năng cập nhật thời gian thực theo chu kỳ 10 giây
    • Hỗ trợ lọc theo tag
    • Cung cấp thẻ công thức hiển thị thông tin tóm tắt không kèm ảnh
    • Mỗi công thức có nút “Xem chi tiết” và “Bắt đầu nấu”

• Xem chi tiết công thức

  • Hiển thị toàn bộ thông tin công thức
  • Hiển thị ảnh công thức
  • Cung cấp danh sách tag có thể bấm
  • Có thể bắt đầu nấu trực tiếp từ trang đó

• Giao diện khi đang nấu

  • Cung cấp hướng dẫn nấu ăn theo từng bước
  • Hỗ trợ hướng dẫn bằng giọng nói cho từng bước
  • Hỗ trợ phím tắt để thao tác hands-free:
    • Phím mũi tên (←/→): chuyển bước
    • Phím Space: phát/tạm dừng giọng nói
    • Phím ESC: quay lại danh sách công thức
  • Có thể theo dõi bước thông qua đường dẫn URL (ví dụ: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Quản lý trạng thái và luồng dữ liệu

• Recipe Service

  • Tải dữ liệu công thức qua API
  • Hỗ trợ tham số phân trang
  • Tính năng lọc theo tag
  • Áp dụng cơ chế cache dữ liệu công thức
  • Xử lý URL hình ảnh để dùng trong chế độ xem chi tiết

• Luồng xác thực

  • Tích hợp Google OAuth bằng biến môi trường
  • Quản lý session người dùng
  • Tự động xử lý auth header khi gửi yêu cầu API

Tính năng PWA (Progressive Web App)

• Cung cấp dưới dạng PWA có thể cài đặt trên nhiều thiết bị
• Áp dụng thiết kế responsive tương thích với mọi kích thước màn hình
• Hỗ trợ favicon và icon ứng dụng

Kiến trúc triển khai

• Cấu trúc hai ứng dụng

  • cook-voice-api: backend Rails triển khai trên Heroku
  • cook-voice-wizard: frontend React và PWA triển khai trên Heroku

• Hạ tầng backend

  • Sử dụng Ruby 3.2.2
  • Cấu hình cơ sở dữ liệu thông qua addon Heroku PostgreSQL
  • Lưu trữ file bằng Amazon S3
  • Quản lý cấu hình bằng biến môi trường

• Hạ tầng frontend

  • Ứng dụng dựa trên React
  • Quản lý thông tin nhạy cảm như API key bằng cấu hình biến môi trường
  • Sử dụng static buildpack của Heroku
  • Cấu hình routing cho SPA (Single Page Application)

• Biện pháp bảo mật

  • Bắt buộc dùng HTTPS
  • Sử dụng hệ thống Rails Credentials
  • Tách thông tin nhạy cảm ra biến môi trường
  • Dùng Public ID thay cho DB ID để bảo vệ cấu trúc nội bộ

[GN⁺]

Ý kiến trên Hacker News

• Khá ấn tượng. 35 kLOC là một lượng khá lớn. Tò mò không biết ứng dụng này trực quan và dễ bảo trì đến mức nào. Chắc phải xem mã nguồn. Mã Rails tốt thì ngắn gọn, nhưng phần frontend có thể khá đồ sộ

  • Ý kiến cho rằng nếu có test tự động và quản lý phiên bản gốc thì có thể làm được trong vài tháng nghe hơi lạc quan. Nhưng cuối cùng thì mọi thứ đều sẽ làm được
  • Về ý kiến cho rằng đây là công cụ mạnh mẽ để người không chuyên kỹ thuật có thể viết ứng dụng đạt chất lượng production, tôi không nghĩ người không chuyên có lý do gì để quan tâm đến việc tail log hay quản lý phiên bản. AI không chỉ phải trở thành một coder giỏi, mà còn phải là một kiến trúc sư giỏi và SWE cấp cao có thể chuyển ngôn ngữ quản lý sản phẩm sang ngôn ngữ phát triển phần mềm. Đây sẽ là thách thức lớn để đạt độ tin cậy tương đương một nhóm con người

• Có ý kiến nói đã tạo công thức Diarrhea Walnuts nhưng bị dị ứng với quả óc chó nên gặp rắc rối. Sẽ tiến hành hành động pháp lý

• Có ý kiến cho rằng Claude Code khá hữu ích. Tuy nhiên, o1 Pro được xem là giỏi debug hơn

  • Claude Code rồi cũng giải quyết được vấn đề theo thời gian, nhưng tôi lại dùng o1 Pro thường xuyên hơn
  • Khi so sánh o1 Pro với Claude Code, o1 Pro đã giải quyết vấn đề nhanh hơn. Tuy nhiên, tôi đã commit các thay đổi của Claude Code và dùng phản hồi của o1 để xử lý những vấn đề mà Claude không bắt được

• Có ý kiến rằng trông như Jian Yang và Big Head đang làm một ứng dụng mới

• Tôi từng viết một website đơn giản hóa công thức nấu ăn, nên thấy dự án này khá thú vị. Tôi nghĩ giá trị chính của kỹ sư trong các dự án bảo trì là ngữ cảnh. Tò mò không biết chuyện gì sẽ xảy ra nếu giao hoàn toàn ngữ cảnh đó cho máy

  • Tôi nhận được một yêu cầu công việc, nhưng một kỹ sư khác đã viết sẵn phần lớn mã nên tôi có thể hoàn thành chỉ trong một ngày
  • Tôi đồng ý đây là một thử nghiệm quy mô lớn và rất đáng cảm ơn. Tôi tò mò không biết hệ thống như Cursor sẽ xử lý thế nào khi có rất nhiều mã gần như không được dùng đến. Nếu 3k LOC bị nhân đôi do nhầm lẫn, không rõ hệ thống tự động có hiểu và sửa được hay không

• Về phản hồi bằng giọng nói dùng realtime API của OpenAI, có lo ngại rằng nếu ứng dụng trở nên phổ biến thì có thể phá sản vì chi phí. Tôi đang định dùng OpenAI audio API cho việc khác nên tò mò về chiến lược liên quan đến chuyện này

• Có câu hỏi liệu có thể tạo một "vibecode" để cho biết có thể mua nguyên liệu ở đâu trên website hay không. Một số nguyên liệu khá khó tìm

• Có ý kiến rằng công thức thì vui đấy, nhưng khi biết nó do AI tạo ra thì sự sáng tạo biến mất. Comprehensive JavaScript Tutorial là mục được thích nhất

• Có câu hỏi liệu tính năng chính có phải là điều khiển bằng giọng nói hay không. So với các website công thức nấu ăn phổ biến khác, không rõ lý do để chọn ứng dụng này là gì. Cũng có người thắc mắc liệu đây chủ yếu là một bài tập để thử nghiệm kỹ thuật/AI hay không

• Có ý kiến cho rằng nên thêm NSFW vào tiêu đề. Hơn 50% công thức trên trang đầu là NSFW