CNN

About CNN ALODEV

Bản clone học tập của edition.cnn.com

CNN ALODEV là một bản clone UI của trang edition.cnn.com, được dựng cho mục đích học tập và demo kỹ thuật. Toàn bộ headline, ảnh và bài viết được crawl từ CNN tại một thời điểm cố định.

Stack kỹ thuật

  • Next.js 16 (App Router, Server Components, async params)
  • React 19
  • TypeScript 5 strict mode
  • Tailwind CSS 4 (config-less, @theme inline)
  • Static export (output: 'export') → HTML/CSS/JS tĩnh
  • Cloudflare Pages hosting tại 4.alodev.vn

Pipeline dữ liệu

  1. mirror.py — crawl HTML + assets từ edition.cnn.com
  2. extract.py — parse với BeautifulSoup → JSON
  3. Next.js đọc JSON tại build time → SSG ra ~80 trang static
  4. wrangler pages deploy out → publish lên CF Pages

Tính năng đã clone

  • Header với 12 section + sub-nav featured topics + dropdown "More"
  • Mobile drawer (hamburger menu) với scroll lock
  • 7+ kiểu layout zone giống CNN: Lead Package, 7/3, Balanced 2/3/4, 6/4, Shorts carousel
  • Section sub-nav (Africa, Asia, Europe... cho World; Trump, Polls... cho Politics)
  • Article page: hero, byline avatar, reading time, share bar, related sidebar, popular list, tags, comments placeholder
  • Trang chức năng: Search, Watch, Listen, Live TV, Markets, Games, Newsletters
  • Account flow: Login, Register, Settings (lưu localStorage)
  • Breaking news ticker, fallback ảnh dạng SVG inline

Disclaimer

⚠️ Bản clone này không liên kết với CNN/Warner Bros. Discovery. Nội dung được sử dụng cho mục đích phi thương mại, học tập. Tất cả thương hiệu thuộc về chủ sở hữu hợp pháp. Để xem tin tức gốc, hãy truy cập edition.cnn.com.