AsianCTV Scraper

A high-performance web scraper & streaming frontend for AsianCTV — serving Korean, Chinese, and Thai dramas with a premium OLED Dark Glassmorphism UI.

This project scrapes drama metadata, episode lists, and streaming links from the AsianCTV website and presents them through a fully custom, blazing-fast frontend deployed on Cloudflare Pages.

---

📸 Screenshots

🏠 Homepage

🎬 Drama Details

▶️ Watch Page

---

💎 Features

• AsianCTV Scraper: Proxies and scrapes drama data (titles, thumbnails, episodes, streams) from AsianCTV via Cloudflare Workers API functions.
• Redesigned Premium UI: Glassmorphism effects, vibrant gradients, and smooth micro-animations.
• Unified Global Search: Find dramas instantly from any page using the integrated search bar.
• My Watchlist: Save dramas to a personal collection via localStorage — no account required.
• Mobile First: Fully responsive with a dedicated mobile menu and optimized layout.
• Ultra-Fast: Vanilla JavaScript + Tailwind CSS v4, zero unnecessary dependencies.
• SEO Ready: Optimized meta tags and JSON-LD structured data.

---

🚀 Tech Stack

Layer	Technology
Frontend	HTML5, Vanilla JavaScript
Styling	Tailwind CSS v4
Scraper / API	Cloudflare Pages Functions (Workers)
Dev Server	Wrangler
Deployment	Cloudflare Pages
State	localStorage

---

🛠️ Local Development

Prerequisites

• Node.js v18+
• Wrangler CLI (installed via npm install)

Steps

1. Clone the repo

   git clone https://github.com/B1PL0B/asianctv.git
   cd asianctv

2. Install dependencies

   npm install

3. Start dev server (Tailwind watch + Wrangler local server run together)

   npm run dev

   App runs at → http://127.0.0.1:8788

4. Build CSS for production

   npm run build

---

📂 Project Structure

asianctv/
├── public/               # Static files served by Cloudflare Pages
│   ├── index.html        # Homepage
│   ├── search.html       # Search results page
│   ├── details.html      # Drama detail page
│   ├── watch.html        # Episode watch page
│   ├── watchlist.html    # My Watchlist page
│   ├── css/
│   │   └── main.css      # Compiled Tailwind CSS (generated by build)
│   └── js/
│       ├── home.js       # Homepage logic & scraper calls
│       ├── search.js     # Search logic
│       ├── details.js    # Drama detail & episode logic
│       ├── watch.js      # Video player logic
│       ├── watchlist.js  # Watchlist logic
│       └── nav.js        # Global navigation
├── functions/
│   ├── _middleware.js    # Cloudflare Pages middleware
│   └── api/              # API proxy functions (scraper endpoints)
├── src/
│   └── input.css         # Tailwind CSS source
├── screenshot/           # Project screenshots
├── package.json
└── wrangler.toml

---

⚙️ How the Scraper Works

The scraper runs entirely on Cloudflare Workers (serverless, edge functions) inside the functions/api/ directory.

Browser → Cloudflare Pages Frontend
              ↓
        /api/* endpoints
              ↓
    Cloudflare Workers Function
              ↓
      Fetches & parses AsianCTV
              ↓
      Returns JSON to frontend

• No backend server needed — scraping happens at the edge.
• API responses proxy drama data: titles, cover images, episode lists, and video streams.
• Frontend JS (public/js/) calls /api/home, /api/search, /api/details, etc.

---

📄 License

© 2026 AsianCTV Scraper. All rights reserved.