[Open Source] #90 - Epigram: Kiến trúc ứng dụng tin tức AI Tinder-style với Next.js 15, Redis Cache và AI Streaming

Việc theo dõi tin tức hàng ngày thường khiến chúng ta bị "ngộp" bởi hàng tá trang web đầy quảng cáo và những nội dung dài dòng. Epigram xuất hiện như một giải pháp "đọc tin tức thế hệ AI": tinh gọn, trực quan và cực kỳ nhanh. Dự án mang đến trải nghiệm vuốt thẻ (Swipe) quen thuộc của Tinder vào thế giới tin tức, kết hợp với khả năng tóm tắt và phân tích sâu sắc từ các mô hình ngôn ngữ lớn (LLM).

Dưới góc độ kỹ thuật, Epigram là một Case Study tuyệt vời về việc xây dựng ứng dụng Next.js 15 hiệu năng cao, ứng dụng kiến trúc Server-side Cache và kỹ thuật AI Streaming mượt mà.

Github: https://github.com/steven-tey/epigram

🛠️ 1. Nền tảng công nghệ: Tối ưu cho tốc độ và AI

Epigram tận dụng những công nghệ mới nhất để giải quyết bài toán thu thập và xử lý dữ liệu tin tức theo thời gian thực:

• Next.js 15 (App Router): Sử dụng các tính năng mới nhất để tối ưu hóa việc render tại Server (SSR), giúp trang web tải cực nhanh ngay cả trên kết nối di động yếu.
• Search & Crawl Engine (Exa AI): Thay vì dùng scraper truyền thống dễ bị chặn, Epigram dùng Exa AI để tìm kiếm và cào nội dung "sạch" từ các trang báo, tự động loại bỏ rác (quảng cáo, script).
• AI Analytics (OpenAI & Vercel AI SDK): Sử dụng gpt-4o-mini để thực hiện các tác vụ tóm tắt nội dung và phân tích sâu bài viết.
• Edge Data Store (Upstash Redis): Lưu trữ toàn bộ tin tức đã xử lý để phục vụ người dùng ngay lập tức, giảm thiểu tối đa việc phải gọi lại các API tin tức đắt đỏ và chậm chạp.

🏗️ 2. Trụ cột kiến trúc: Write-through Cache và Cookie-based State

Kiến trúc của Epigram được thiết kế với tư duy "Zero-Latency":

• Mô hình Write-through Cache: Một Cron Job chạy định kỳ phía backend để "đổ đầy" dữ liệu vào Redis (/api/news/populate). Khi người dùng truy cập, hệ thống chỉ việc đọc từ Redis thay vì đi cào dữ liệu từ đầu. Điều này biến ứng dụng thành một hệ thống Read-only cực nhanh.
• Stateless Personalization: Thay vì bắt người dùng đăng nhập và lưu Topic vào Database, Epigram lưu danh sách chủ đề yêu thích ngay trong Cookies. Cách tiếp cận này giúp cá nhân hóa trải nghiệm tức thì (Instant-on) mà không cần quản lý User Session phức tạp.
• PWA & Mobile-First UI: Giao diện được thiết kế tối ưu cho cử chỉ vuốt trên di động, hỗ trợ chế độ "Add to Home Screen" giúp ứng dụng hoạt động như một App Native.

🔄 3. Workflow: Từ bài báo thô đến Insight rực rỡ (Sequence Diagram)

Sơ đồ dưới đây mô tả quy trình nạp dữ liệu định kỳ và cách AI phục vụ người dùng cuối:

⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn

1. AI Insights Streaming: Sử dụng streamText từ Vercel AI SDK. Kỹ thuật này giúp người dùng nhìn thấy AI "đang gõ" câu trả lời từng chữ một, loại bỏ cảm giác phải chờ đợi (perceived latency) khi LLM đang xử lý một lượng lớn văn bản.
2. Tinder-style Gesture Engine: Tích hợp react-swipeable để xử lý các cử chỉ vuốt mượt mà. Hệ thống tính toán độ lệch deltaX để thực hiện các animation dịch chuyển thẻ một cách tự nhiên bằng Framer Motion.
3. Multi-Theme System: Epigram không chỉ có Dark/Light mode mà hỗ trợ tới hơn 10 phối màu khác nhau (Sepia, Cosmos...). Toàn bộ màu sắc được quản lý qua CSS Variables, cho phép thay đổi giao diện toàn trang chỉ bằng một thay đổi thuộc tính data-theme trên thẻ body.
4. Edge Rate Limiting: Để tránh việc một người dùng spam yêu cầu AI gây tốn kém chi phí API, dự án tích hợp @upstash/ratelimit ngay tại Edge, giới hạn số lần yêu cầu "AI Insights" theo địa chỉ IP.

⚖️ 5. So sánh chiến lược

✅ Kết luận: Tại sao Epigram là hình mẫu cho tương lai tin tức?

Epigram không chỉ là một ứng dụng đọc báo; nó là một bài học về giảm thiểu sự ma sát (Frictionless UX). Bằng cách kết hợp khả năng thu thập dữ liệu thông minh của Exa AI và khả năng tóm tắt của OpenAI, dự án đã biến việc tiêu thụ thông tin từ một gánh nặng thành một trải nghiệm giải trí nhẹ nhàng.

Đối với các kỹ sư Frontend và AI, nghiên cứu Epigram sẽ giúp bạn hiểu sâu về:

• Cách xây dựng hệ thống Caching cho ứng dụng AI để tối ưu chi phí.
• Kỹ thuật Streaming UI mang lại trải nghiệm người dùng tốt nhất.
• Tư duy thiết kế Mobile-first PWA với các tương tác cử chỉ phức tạp.

Hy vọng bản phân tích này mang lại cho bạn những ý tưởng giá trị về việc ứng dụng AI vào đời sống. Đừng quên Upvote và Follow mình để đón chờ những bài phân tích mã nguồn tiếp theo nhé!