Build một app thật bằng Claude Code từ đầu tới cuối

1. Một bản build thật, không chỉ vibe code

Tim Ruscica mở đầu bằng lời hứa của video: anh sẽ đi qua một bản build đầy đủ, thực tế bằng Claude Code. Anh sẽ chỉ cách setup, cách thêm connector, và cách dùng công cụ này như một người làm nghề để build những site thật, nghiêm túc, đủ để deploy và thậm chí bán được với giá hàng nghìn, nếu không nói là hàng chục nghìn đô la.

Anh tự giới thiệu là một software engineer đã viết code hơn 10 năm. Điều anh muốn cho người xem thấy là cách một engineer dùng công cụ như Claude Code, khác với rất nhiều người chỉ thuần vibe code. Dù vậy, anh nói rõ bạn không cần là engineer mới theo được. Mục tiêu chính là theo dõi quy trình tổng thể và các bước anh đi qua, rồi áp dụng vào project của riêng bạn, để có kết quả chuyên nghiệp hơn và tốn ít thời gian hơn.

Anh nhấn mạnh một lần nữa: bạn có thể build bất cứ thứ gì bạn muốn. Cứ xem cách anh build ứng dụng này rồi áp vào setup của mình. Ứng dụng trong video là một bản clone YouTube, có creator studio, upload video, một video player nâng cao và analytics.

2. Bước một: biết chính xác mình muốn gì, và làm thuyền trưởng

Việc đầu tiên, theo Tim, là nghĩ ra một kế hoạch chi tiết về thứ mình thật sự muốn build. Khi dùng AI, điều cực kỳ quan trọng là bạn biết thật chi tiết mình muốn gì. Anh đặt ra bốn câu hỏi: mục tiêu (objective) là gì, cái đích (goal) là gì, tại sao bạn build thứ bạn đang build, và khi nào thì nó thật sự được coi là xong.

Lý do là AI, nhất là khi bạn dùng các model Claude hay các model cùng họ đó, thường có xu hướng chạy vòng vòng đủ hướng và build đủ loại feature mà bạn chưa từng yêu cầu. Chuyện đó có thể làm bạn rối, có thể thêm độ phức tạp không cần thiết. Bạn muốn mình là người làm thuyền trưởng (captain of the ship), không để AI nắm quyền.

Vì vậy, trước khi lao vào một project mới, điều rất quan trọng là dành thời gian ngay từ đầu để nghĩ thật kỹ mình muốn gì. Nếu bạn không giỏi khoản này, bạn luôn có thể nhờ chính các model AI giúp.

3. Terminal, plan mode và câu chốt ở cuối prompt

Tim mở Claude và lưu ý rằng anh đang dùng bản chạy trong terminal chứ không phải desktop app, vì theo anh bản terminal cho nhiều feature hơn và kết quả tốt hơn. Anh đã tạo sẵn một folder mới tên youtube-clone, nằm ngay trên desktop, và chạy Claude bên trong folder đó.

Cách anh làm: trao đổi qua lại với Claude để đi đến một kế hoạch về thứ mình muốn build, và chỉ khi có kế hoạch rồi mới bắt đầu build. Để làm vậy, bạn chuyển Claude sang plan mode bằng cách bấm Shift+Tab trên bàn phím. Chế độ này đặt Claude vào một mode khác, cho phép nó nghĩ về vấn đề trong pha lập kế hoạch thay vì pha xây dựng.

Điều anh luôn khuyên: dùng giọng nói, nói chuyện với Claude, cứ "ramble" (nói lan man) hết những gì mình muốn, rồi kết thúc prompt bằng một câu cố định: hãy hỏi tôi mọi câu hỏi bạn cần để làm rõ bản build và lấy đủ requirement. Anh minh hoạ ngay bằng cách nói vào máy:

Hey, Claude, I want to build a YouTube clone. Basically, what I want to do is I just want to fully kind of build my own version of YouTube. I want to have a creator studio. I want to have viewers being able to sign in and view videos. I want to have a really advanced video player. I'm going to use something called ImageKit for that. I want to build upload videos, have analytics and build an MVP of YouTube that's fully functional.

Can you ask me any questions that you need to clarify the requirements and come up with a detailed plan?

Tim chỉ vào dòng cuối: anh nói lan man những gì mình muốn, rồi thêm câu đó vào. Câu này khiến Claude quay lại hỏi anh những câu hỏi sâu hơn. Anh không đi hết quá trình hỏi đáp trong video, vì anh đã viết sẵn vài prompt trước khi quay cho nhanh.

4. MVP và tech stack: những quyết định bạn phải tự cầm lái

Trong pha này, theo Tim, bạn muốn hiểu được đâu là minimum viable product (MVP) bạn có thể build để đạt mục tiêu của mình, tức là thật sự phục vụ một user nào đó hay giải một vấn đề nào đó. Bạn cũng cần quyết định sẽ dùng công nghệ hay tech stack nào. Ví dụ: bạn muốn đây là web application, hay desktop app, hay chạy trên điện thoại, hay phải chạy trên một thiết bị legacy cũ nào đó. Bạn hiểu ý rồi đấy.

Đây là những thứ Claude sẽ tự động quyết thay bạn, nhưng bạn muốn là người dẫn hướng. Nếu bạn muốn dùng Supabase làm backend, hãy nói với Claude. Nếu bạn muốn nối với một nhà cung cấp nào đó, chẳng hạn dùng Higgsfield để tạo AI avatar, hãy nói với nó. Nếu bạn có một thư viện muốn tích hợp, như trong video này là ImageKit để lo toàn bộ phần phát video, hãy nói với Claude.

Những quyết định ngay từ đầu này sẽ định hướng rất mạnh project của bạn tốt tới đâu về sau. Vì vậy hãy dành thời gian nghiên cứu. Nếu bạn không quen tech stack, hãy nhờ Claude giải thích và đưa ra các trade-off giữa các backend, frontend, framework và ngôn ngữ khác nhau, để ít nhất bạn biết mình đang build bằng gì, đang dùng công cụ gì, trước khi lao vào.

5. Stack của Tim: Next.js, Supabase và ImageKit

Với bản build này, Tim chọn Next.js, một JavaScript framework. Anh dùng Supabase để lo mọi feature liên quan tới backend: đó là một nền tảng đầy đủ làm được auth, edge function, storage và những thứ tương tự. Và anh dùng ImageKit làm CDN và video player, để nó lo toàn bộ phần streaming, adaptive bitrate, thumbnail, caption và các thứ còn lại.

Video được ImageKit tài trợ. Tim nói người xem sẽ thấy vì sao anh dùng họ, và theo anh nó rất hợp với một thứ như YouTube. Anh nhắc lại rằng mình nhấn mạnh phần này nhiều vì đây là phần quan trọng nhất của cả quy trình.

6. Prompt kế hoạch: hai phía, stack không thương lượng, scope chặt

Thay vì đi hết vòng hỏi đáp, Tim dán vào Claude một kế hoạch anh đã nghĩ sẵn, cho xem nó trông thế nào rồi mới bắt đầu pha build. Đó là một prompt khá dài. Anh muốn build một YouTube riêng, một nền tảng video có hai phía: viewer site và creator studio. Phía người xem có home feed, trang watch, playlist và dark theme. Phía creator có upload video kéo thả, quản lý video, publish một cú click và một cờ members-only.

Phần stack anh ghi rõ là "non-negotiable" (không thương lượng): Next.js với Tailwind, Supabase cho toàn bộ auth, ImageKit cho toàn bộ lớp media. Cuối prompt, anh yêu cầu một kế hoạch chia thành milestone để có thể build và kiểm tra từng cái một, và giữ scope đúng như những gì đã liệt kê: không comment, không search hay subscription, vì anh muốn giữ mọi thứ đơn giản lúc này. Toàn văn prompt trên màn hình:

I want to build my own private YouTube: a video platform with two sides.

Viewer site (public):

Home feed: dense grid of video thumbnails with title, duration, and channel info
Watch page: real video player with chapters, hover seek previews, and a floating mini-player when you scroll down
Playlists, and an up-next sidebar on the watch page
Dark theme. This needs to feel like a premium product, not a tutorial project
Creator studio (login required):

Drag-and-drop video upload with progress bars
Manage videos: title, description, pick a thumbnail frame, organize into playlists
One-click publish / unpublish
A members-only flag per video that gates it on the viewer site
Stack, non-negotiable:

Next.js App Router + Tailwind
Supabase for auth and the database: videos, playlists, members, publish state
ImageKit for the ENTIRE media layer: storage, adaptive streaming, thumbnails, and their new video player React component. Use Context7 to pull the current ImageKit video player docs before planning anything player-related, it's new and you won't know the API from training.
The most important constraint: we are NOT building any video infrastructure. No ffmpeg, no transcoding, no HLS servers, no CDN config, no analytics tracking events. ImageKit URLs give us the renditions and thumbnails, the player component gives us playback UI and viewer analytics. Our code is only the product around that.

Give me a plan broken into milestones I can build and verify one at a time. Keep scope to exactly what I listed. No comments, no likes, no search, no subscriptions.

Trên màn hình, prompt còn yêu cầu Claude dùng Context7 để kéo tài liệu video player mới nhất của ImageKit trước khi lên kế hoạch bất cứ thứ gì liên quan tới player, vì đây là API mới mà model không biết từ dữ liệu huấn luyện. Claude trả lời rằng nó sẽ kiểm tra folder project trước, rồi kéo tài liệu ImageKit qua Context7 đúng như yêu cầu.

Tim chạy prompt ở plan mode và để Claude suy nghĩ một lúc. Mục tiêu trước hết là có một file markdown có cấu trúc, sau đó mới setup Claude, thêm integration và connector để build thật nhanh.

7. Đọc kỹ plan: schema, API routes và tám milestone

Khoảng một phút sau, Claude đưa ra một plan khá chi tiết. Tim luôn khuyên đọc hết plan trước khi bắt đầu build, vì nếu bước này sai, bạn có thể đi rất xa theo một hướng sai. Plan nói chung là: ta sẽ build YouTube clone, dùng những thứ này, dùng ImageKit API thế này, đây là schema Supabase sẽ dựng, đây là kế hoạch cho toàn bộ API routes, và đây là các milestone.

Các milestone lần lượt là scaffolding, schema Supabase, upload pipeline, quản lý trong studio, trang watch, playlist, polish, bạn hiểu ý rồi. Cuối plan còn có một mục "Gating honesty note": URL của ImageKit là CDN công khai, nên thẻ bị khoá vẫn hiện thumbnail lấy từ cùng đường dẫn và URL file mp4 về kỹ thuật vẫn đoán ra được; chặn ở tầng ứng dụng là lớp thực dụng trong phạm vi này, còn folder ImageKit riêng tư cộng signed URL là phần gia cố tuỳ chọn để sau. Mục "Prerequisites" liệt kê thứ người dùng cần cung cấp: project Supabase (URL và anon key) và tài khoản ImageKit (ImageKit id, public key, private key) trong .env.local.

Trước khi build, Tim bấm Escape. Plan đã được tạo và nằm trong context. Việc tiếp theo là setup Claude để nó có mọi công cụ cần thiết, làm được mọi thứ tự động mà mình không phải can thiệp. Việc đó gồm thêm vài skill và vài MCP server liên quan tới thứ đang build. Anh luôn khuyên làm việc này ở ngay đầu project.

8. Thêm skill thiết kế: frontend-design và UI UX Pro Max

Trong Claude, gõ /skills là bạn thấy các skill đang có. Tim có rất nhiều: project skill, user skill, frontend-design skill và đủ thứ khác. Anh muốn chắc chắn có hai skill: frontend-design (anh đã có sẵn nhưng vẫn chỉ cách thêm) và UI UX Pro Max. Hai skill này giúp tạo ra giao diện đẹp hơn hẳn những gì AI tạo ra mặc định.

Skill thứ nhất là frontend-design. Bạn có thể tự cài nó trong Claude khá dễ, nhưng cách Tim làm là copy URL GitHub của skill, dán vào Claude và bảo nó thêm skill này. Skill UI UX Pro Max cũng vậy: dán repo GitHub rồi bảo nó cài. Anh viết prompt rồi dán hai URL vào:

Before we proceed can you please install the following two skills? I'm going to give you the GitHub repo URLs, look through them, and then install the correct skill file for this project https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Theo Tim, hai skill này chỉ có một việc: giúp build giao diện và design system đẹp hơn nhiều, để site không mang vẻ "AI slop" chung chung. Khi Claude báo đã thêm xong, anh kiểm tra lại bằng /skills: có frontend-design skill, giờ có thêm UI UX Pro Max, và có thể mở ra xem bên trong có gì.

9. Nối Supabase MCP server

Tiếp theo là thêm skill liên quan tới các integration đang dùng, cùng các MCP server. Trước hết là Supabase MCP server. Muốn xem các MCP server đã có, gõ /mcp. Tim thực ra đã kết nối Supabase từ trước, nhưng vẫn chỉ cách nối vì nhiều khả năng người xem chưa có.

Anh nói Supabase là thứ anh thường khuyên cho backend của rất nhiều project, nhất là khi đó là một MVP, không có quá nhiều người dùng, đúng kiểu những gì phần lớn mọi người đang build bằng AI. Cách thêm Supabase MCP server là chạy một lệnh lấy từ tài liệu của Supabase, ở một cửa sổ terminal khác (ngoài Claude). Anh thoát khỏi Claude và dán lệnh:

claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?features=docs%2Caccount%2Cdatabase%2Cdebugging%2Cdevelopment%2Cfunctions%2Cbranching"

Lệnh này thêm MCP server, rồi cho phép bạn đăng nhập vào tài khoản Supabase. Supabase miễn phí; bạn có thể tạo tài khoản mới, rồi xác thực một project cụ thể để Claude tự thực hiện mọi thay đổi mà bạn không phải làm tay. Bấm Enter, terminal báo đã thêm HTTP MCP server supabase vào project config, cụ thể là file .mcp.json trong folder project.

Gõ claude lần nữa, nó hỏi có muốn dùng MCP server này không; Tim chọn có. Rồi anh gõ /mcp: Supabase hiện ra với trạng thái "needs authentication". Anh bấm Enter, chọn Authenticate, và trình duyệt mở Supabase để đăng nhập. Chưa có tài khoản thì tạo mới là kết nối được. Trình duyệt báo "Authentication successful", quay lại Claude thì thấy Supabase đã kết nối. Anh nói chỉ còn vài cấu hình cuối nữa là xong.

10. Cài plugin ImageKit ngay trong Claude Code

Bước tiếp theo là thêm skill của ImageKit. Tim giải thích: nếu bạn build một thứ như YouTube, hay bất cứ thứ gì làm việc với ảnh hoặc video, bạn sẽ thấy rất khó tự quản lý các asset này. ImageKit là một nền tảng lo hết phần đó: adaptive bitrate streaming, lưu trữ asset, cho phép upload, xử lý xác thực và quyền truy cập, thumbnail, caption và các thứ khác.

Khi bắt đầu dùng trong project, AI có thể tự build với nó, miễn là mình thêm các plugin tương ứng. Tim khuyên thêm hai lệnh plugin có sẵn trên trang tài liệu "Build with AI" của ImageKit, trong mục dành cho Claude Code. Từ bên trong Claude, lệnh đầu tiên thêm marketplace từ repo của ImageKit, lệnh thứ hai cài plugin ImageKit:

/plugin marketplace add imagekit-developer/skills
/plugin install imagekit-plugin@imagekit-tools

Khi cài, Claude hỏi phạm vi; Tim định cài cho mình, rồi đổi ý chọn scope chỉ cho project. Vậy là đã thêm xong hai thứ, và Claude giờ có thể tìm được mọi thứ liên quan tới ImageKit.

Anh nói thêm một nhận xét chung: rất nhiều framework hiện đại đang thêm AI skill, MCP server hay một kiểu kết nối nào đó. Vì vậy, dù bạn dùng công cụ gì, hãy kiểm tra xem nó có agent skill hay thứ tương tự không, và cài trước khi bắt đầu build với nó.

11. Video player mới của ImageKit, cập nhật plan và bật auto mode

Một trong những lý do Tim dùng ImageKit là họ vừa ra feature video player mới. Anh mở trang tài liệu Video player và chỉ ra có cả nút "Copy for LLM". Theo anh, player này lo toàn bộ phần video streaming: custom branding, playlist, adaptive bitrate streaming, subtitle, chapter, thậm chí video có thể mua hàng (shoppable), có analytics, và cài được bằng lệnh trong tài liệu. Trên màn hình, trang tài liệu ghi player xây trên Video.js và đang ở bản beta, nên test kỹ trước khi đưa lên production.

Trước khi đi tiếp, Tim copy toàn bộ nội dung trang để chắc chắn Claude sẽ dùng feature này, dán vào Claude kèm lời dặn:

Hey, I'm just pasting some reference from the ImageKit documentation. I want to make sure we're using their new video player in this build. Just take note of that and then update the plan and we can start the build process.

Claude bắt đầu tạo file PLAN.md với mọi thứ cần thiết, tức là lưu vào context bền vững (persistent context) sau phần anh vừa dán. Trong file, phần Stack ghi rõ playback dùng ImageKit Video Player (React component IKVideoPlayer), không dùng thẻ <video> trần hay Video.js thuần, bật adaptive bitrate streaming và ghim version của package vì đang beta. Tiếp theo là schema database Supabase, mười feature theo thứ tự build, và danh sách biến môi trường cần có.

Tim thừa nhận có khá nhiều bước, nhưng muốn cho thấy rằng nếu dành thời gian từ đầu để có một plan chi tiết, tạo đủ kết nối, chọn đúng tech stack, thì phần build sau đó sẽ rất dễ. Anh chuyển sang auto mode, cũng bằng Shift+Tab, để Claude tự chạy quá trình. Anh để nó làm bản build đầu tiên; sau đó anh sẽ thêm design system, nối Git và vài feature khác, nhưng trước hết là để nó dựng xong khung (scaffold) ứng dụng. Rồi anh sẽ đi vào các best practice khi dùng Claude Code và sinh code bằng AI ở quy mô lớn.

12. Scaffold xong: bốn giá trị ImageKit còn thiếu

Video có một đoạn quảng cáo cho Wispr Flow, công cụ đọc chính tả bằng giọng nói mà Tim dùng để ra lệnh cho Claude trong suốt video.

Tim để Claude build, đoán sẽ mất vài phút, và đi pha cà phê. Khi quay lại, phần scaffold đã ổn, nhưng còn thiếu vài thứ để app chạy đúng. Claude báo bốn giá trị ImageKit trong .env.local vẫn là placeholder: cần điền ImageKit ID, URL endpoint, public key và private key rồi chạy npm run dev; upload và phát video sẽ không chạy cho tới lúc đó.

Trên màn hình, báo cáo còn ghi project Supabase đã được Claude khôi phục từ trạng thái paused, auth bằng email và mật khẩu, và Supabase mặc định bật xác nhận email nên sau khi đăng ký phải bấm link xác nhận.

Tim quyết định dán thẳng các giá trị đó vào chat. Anh thừa nhận đó không phải best practice, nhưng dù sao Claude cũng sẽ nhìn thấy chúng, nên cứ để nó tự setup và thêm vào project. Để lấy các giá trị: vào tài khoản ImageKit, mở Developer options, ở đó có ImageKit ID, URL endpoint, public key và private key. Có thể bạn phải đăng nhập lại hoặc nhập mật khẩu để xem. Anh copy từng giá trị dán vào, public key bên dưới, rồi tới private key, và nói rõ là không muốn để lộ chúng cho người xem.

Sau đó chỉ cần chạy lệnh khởi động (anh nói đại khái "npm run dev hay gì đó") để xem site trông ra sao. Tiếp đó anh muốn nói về design system, thứ giúp app đẹp hơn nhiều và nhất quán, nhất là khi mở rộng. Anh bảo Claude bật server lên để thử.

13. Chạy app lần đầu: MyTube và lỗi đăng nhập

App đã chạy. Claude đặt tên nó là MyTube; Tim đùa rằng cái tên khá "điên" và chắc sẽ phải đổi. Anh thử tạo tài khoản với tên kênh Tech With Tim và điền thông tin, nhưng việc đăng nhập có vấn đề, nên anh quay lại đưa thông tin cho Claude.

Theo Tim, chuyện này sẽ xảy ra khi có lỗi, và đừng hoảng. Chỉ cần mô tả lỗi thật chi tiết. Anh nói với Claude:

When I go and sign up, what happens is it says it's successful and that it's going to send me an email. However, it never sends me an email, and then when I try to sign in with the same username and password or email and password that I created the account with, it says invalid credentials. Can you help me fix this, please?

Claude xử lý xong và báo đã sửa và kiểm tra từ đầu tới cuối. Trên màn hình, nó giải thích hai nguyên nhân chồng lên nhau: email dùng để đăng ký đã có tài khoản từ một thí nghiệm trước, và Supabase cố ý trả về một "success" giả để kẻ tấn công không dò được email nào đã đăng ký; thêm vào đó, email xác nhận được bật nhưng email có sẵn của Supabase không gửi ổn định. Cách sửa: tắt chặn bằng email xác nhận qua một database trigger tự xác nhận mỗi lần đăng ký (kèm ghi chú trong code rằng production nên bỏ và nối một email provider thật), đăng ký xong vào thẳng app, báo lỗi rõ khi email đã tồn tại, và sửa một bug tên kênh bị bỏ qua.

Giờ thì đăng nhập được. Tim đi qua Home, Subscriptions, History; chưa có gì vì chưa upload video nào. Bấm Upload thì thấy có trang upload video. Anh sẽ thử hết các feature đó, nhưng trước khi đi quá xa, anh chuyển sang design system.

14. Design system trước khi build tiếp

Tim dán một prompt rồi giải thích ý tưởng. Khi build các app bằng AI, rất nhiều lúc nó tự nghĩ ra thiết kế ngay tại chỗ. Nhưng nếu thật sự build theo cách của software engineering, thông thường bạn sẽ tạo một design system: một bộ component tái sử dụng như button, card, typography, header, input field, dùng lại nhất quán khắp site. Thường người ta bắt đầu bằng việc thiết kế từng component riêng lẻ, rồi chỉ việc đặt chúng lên các trang khác nhau.

Prompt của anh, trên màn hình:

set up the design system using the frontend-design skill. Dark theme only. Think premium video platform: near-black background, one restrained accent color, high-contrast white text, tight typography. Define the design tokens, the thumbnail card (16:9 image, title, meta line, duration badge), and the grid rhythm for a dense home feed. Show me a style tile page at /design so I can judge it before we build real pages.

Tim chỉ ra mẹo hay ở cuối: nếu muốn thấy nó trông thế nào, hãy yêu cầu một trang mockup để xem hết các component, rồi tinh chỉnh từng cái. Đó cũng là lý do lúc trước anh thêm các skill như UI UX và frontend-design: Claude sẽ nạp chúng vào và, hy vọng, cho ra thứ tốt hơn nhiều so với việc tin vào gợi ý mặc định của AI. Trên màn hình, Claude báo sẽ kéo frontend-design skill vào để lấy định hướng thẩm mỹ, và dòng "Skill(frontend-design): Successfully loaded skill" hiện ra.

Tim mở /design khi Claude vẫn đang làm, nhưng phần này đã xong: có accent, foreground, canvas, typography. Kéo xuống là thẻ thumbnail và phần Controls với các nút Upload, Subscribe. Anh thấy trông ổn, và nếu không muốn đổi gì thì chỉ việc bảo Claude áp design system này vào bản build hiện tại, rồi tiếp tục build các feature còn lại.

Anh nhắc lại đây là một ý rất hay, và anh đặc biệt thích yêu cầu nó làm trang style để mọi thứ trực quan, dễ xem, nhờ vậy có thể soi kỹ mọi thứ trước khi chúng thành các component dùng khắp app.

15. Áp design system, thử video và xem media library

Claude áp xong style guide, tức design system, và app trông đẹp hơn rõ rệt. Tim bấm vào profile của mình: có một video, vì trước đó anh đã thử upload một cái. Vẫn còn thiếu nhiều feature, chẳng hạn chưa sửa được profile hay đổi tên.

Ở homepage có video đó. Bấm vào, chờ một chút cho nó tải. Điểm duy nhất là cách video được upload hay hiển thị kích thước hơi lạ, cần sửa. Nút like và dislike bấm được. Anh thử viết comment "hello", có vẻ chạy; nhưng lượt xem không cập nhật. Vậy là có vài chỗ phải sửa; anh sẽ đưa một prompt để chỉnh, rồi chuyển sang các thứ như chapter của video, custom thumbnail, và kiểm tra video phát đúng, dù anh nghĩ phần phát đã ổn.

Video phát rất mượt, ngay trong player, và có thể chỉnh tốc độ. Tim lưu ý thêm: nếu vào ImageKit, bạn sẽ thấy mọi video đã upload. Có video anh vừa đưa lên, và vài video cũ hơn từ project này. Tất cả được lưu ở đó; bấm vào video nào cũng xem được thông tin, metadata và các thứ tương tự. Rồi chúng tự động được render trong component video player cho mình. Mọi thứ do ImageKit xử lý, nên mình không phải động vào asset video hay ảnh.

16. Thumbnail tự chọn và subtitle tự sinh

Tim nhờ Claude thêm feature thumbnail, vì đó là một trong những thứ anh thấy còn thiếu. Ở bước upload, giờ có thể tua (scrub) qua video, bấm "Capture current frame" để lấy khung hình hiện tại làm thumbnail. Hoặc upload một ảnh thumbnail riêng bằng cách chọn file. Anh chọn một thumbnail của mình, nó hiện lên, rồi upload video: thumbnail được gắn vào và cũng được lưu trên ImageKit.

Báo cáo của Claude trên màn hình giải thích cả hai cách đặt thumbnail, rằng ảnh được upload lên ImageKit và dùng cho cả thẻ trong feed lẫn poster của player, còn nếu bỏ qua thì ImageKit tự sinh như trước. Phần "ImageKit player features, captions now wired" cho biết Claude đã kiểm tra type definition của player, thấy có tính năng caption AI và bật autoGenerate: true, cùng seek-preview thumbnail và floating mini-player. Mục "Why you still won't see captions yet" giải thích caption AI của ImageKit là một add-on trả phí phải bật trong tài khoản, không phải lỗi code; Claude cũng cố ý để tắt ABS/HLS lúc này vì nó làm video không phát được cho tới khi transcode xong.

Về homepage, Tim nói thật lòng là trông khá ổn. Bấm vào kênh của mình thấy danh sách video; mở một video để kiểm tra player: nó tải gần như ngay lập tức. Có cả chức năng subtitle, thứ anh cũng đã yêu cầu, vì player này có thể tự sinh subtitle bằng AI. Bấm vào là có lựa chọn subtitle tự sinh, nhưng video này không có tiếng nên không ra gì.

Anh thử upload một video talking head. Tắt tiếng một lúc để đi tiếp. Nhưng vì lý do nào đó, subtitle tự sinh không tải. Anh đoán lần đầu sẽ mất vài phút để sinh rồi mới hiện, nên sẽ quay lại sau. Ít nhất mọi chức năng chính đều đang chạy: video player, comment, kênh.

17. Analytics, creator studio và vài kênh giả

Tiếp theo Tim muốn làm analytics và một kiểu tính năng giống YouTube Studio. Còn chuyện subscribe: có vẻ anh không subscribe được kênh nào, có thể vì đó là kênh của chính anh, nên cần thêm vài kênh khác. Anh để Claude "stub" vài kênh hay video mới, làm app trông khá hơn, rồi thêm analytics. Prompt anh nói:

Okay all is looking good now. I now want to implement the analytics from the video players so that whoever posted the video or uploaded it is able to view the analytics for that. Let's build a really minimal kind of YouTube studio or creator version of the site where people can see the analytics of their own videos. Then I also want you to just stub a few random accounts on YouTube so that we can have some kind of fake data and I can subscribe to accounts and see what happens when it's not my account.

Lý do anh nói tới analytics: anh biết player mới của ImageKit có video analytics tích hợp sẵn. Chỉ cần bật lên là theo dõi được mọi thông tin và xem trong dashboard của ImageKit; anh tin là cũng kéo được qua API để hiện trong app của mình. Trên màn hình, trang tài liệu Video analytics của ImageKit mô tả bốn nhóm dữ liệu (engagement, performance, reliability, quality), bật bằng analytics.enabled, và có một hộp ghi rằng tính năng này chỉ có ở gói Enterprise và đang beta.

Claude làm xong. Nó tạo một loạt dữ liệu giả: không upload video thật, chỉ tạo các bản ghi để có cái mà xem. Có nhiều kênh khác nhau; Tim bấm vào một kênh tên Wanderlens để xem các thông tin giả của video ở đó.

Claude cũng thêm tính năng Studio. Bấm vào đó là thấy video của mình, lượt xem, watch time, subscriber, like, comment và các chỉ số khác; bấm vào từng video là xem được chính xác video đó đang chạy thế nào.

Có cả search: Tim gõ "tech with" và kết quả "Short Tech With Tim" hiện ra, đúng tên anh đặt cho video đó. Còn có trang history chạy đầy đủ. Tất nhiên còn rất nhiều thứ có thể thêm.

18. Kết: quyết định đúng từ đầu và dùng đúng công cụ

Tới đây Tim thấy hài lòng với tiến độ và khép lại bản build. Anh nói còn rất nhiều thứ có thể làm để phát triển nó thật sự, nhưng điều anh muốn cho thấy chủ yếu là cách setup project, các integration quan trọng, công cụ mình chọn, các skill, design system, và nói chung là best practice khi build bằng các công cụ AI này.

Trong một khoảng thời gian tương đối ngắn, hay ít nhất là với một số lượng prompt ngắn, anh đã có một thứ đầy đủ tính năng. Lý do anh làm được mà gần như không vấp gì, theo anh, là vì đã quyết định đúng từ đầu, dành thời gian vạch ra mọi thứ, và quan trọng là dùng đúng công cụ. Anh kết video bằng lời mời like, subscribe kênh và hẹn gặp ở video sau.