Content
# AI Hotspot Monitoring Tool
> Author: [Programmer Yupi](https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah)
>
> This project is an educational project that provides complete video tutorials + text tutorials + resume writing + interview question solutions + Q&A services to help you improve your project capabilities and add highlights to your resume!
>
> ⭐️ Join the project series learning: [Join CodeFather](https://www.codefather.cn/vip)
## 1. Project Introduction
This is a project tutorial series centered around **AI Programming Practice**, developed using Express 5 + React 19 + OpenRouter + Socket.io. The project involves creating an "AI Hotspot Monitoring Tool" from scratch using AI programming techniques. This allows you to experience the complete workflow of AI Vibe Coding and learn how to quickly create practical and efficient tools using AI.
📺 Project introduction video: https://bilibili.com/video/BV1g8d8B6ENk
Enter the keywords you want to monitor, and the system will automatically aggregate and fetch content from over **8+** information sources, including Twitter, Bing, HackerNews, Sogou, and Bilibili. It uses AI for authenticity identification and relevance analysis, and pushes updates in real-time via WebSocket and notifies users by email. Additionally, the hotspot monitoring capabilities are encapsulated as an **Agent Skills package**, allowing AI programming tools like Cursor, VSCode Copilot, and Claude Code to use it directly.
### Why Create This Project?
As a blogger focused on AI programming, Yupi wants to use tools to automatically discover the latest hotspots (such as updates to AI large models) and send notifications in a timely manner.
Therefore, **a more universal tool** was created.
This is the starting point for the AI Hotspot Monitoring Tool: Let AI monitor hotspots for you and provide high-quality information in real-time!
### 6 Core Capabilities
1) Configure monitoring keywords, supporting activation/pause.
2) AI automatically fetches and analyzes hotspots from 8+ data sources, using AI for query expansion, authenticity identification, relevance analysis, and smart summarization.
3) Multi-dimensional filtering and sorting, filtering by source, importance, and time range, and sorting by heat, relevance, and time.
4) Full-network search, entering keywords to search across multiple data sources.
5) Real-time notifications, WebSocket real-time push + email notifications.
6) Agent Skills package, installable and usable directly in Cursor, VSCode Copilot, Claude Code, and more.
## 2. Project Advantages
This project has a novel topic, keeping pace with the AI programming era, and is oriented towards **practical tool development**, differing from common projects focused on simple CRUD operations. The project content is refined, **can be learned in less than a week**, and teaches you the complete workflow of AI programming, significantly enhancing your resume and job search competitiveness!
The technology stack is rich, covering the full chain of AI programming:
From this project, you can learn:
- How to develop a complete tool from scratch using AI programming?
- How to install and use MCP to enhance AI capabilities?
- How to install and use Agent Skills to improve AI programming quality?
- How to aggregate and fetch content from multiple information sources (Twitter, Bing, HN, Bilibili, etc.)?
- How to access AI large models through OpenRouter and achieve intelligent content review?
- How to implement query expansion to improve the recall rate of information retrieval?
- How to achieve real-time WebSocket push based on Socket.io?
- How to create a stunning, tech-savvy front-end interface using Aceternity UI?
- How to develop a standardized Agent Skills package and verify it in multiple AI tools?
- How to perform human confirmation, version control, and iterative optimization in AI programming?
### Advantages of Yupi's Series Projects
Yupi's original projects focus on **practicality**, using **full live streaming** to guide students **from 0 to 1**. The process covers demand analysis, technical selection, project design, project initialization, demo writing, front-end and back-end development, project optimization, and deployment. Each link is explained clearly **from theory to practice**, with no details omitted!
Compared to online tutorials, Yupi's project series advantages include a one-stop service from learning knowledge => practicing projects => reviewing notes => project Q&A => resume writing => interview question solutions.
CodeFather has **20+ sets of project tutorials**! Each project has different learning focuses, mostly **full-stack projects** covering front-end and back-end, with many AI application development projects.
For details, see: [https://codefather.cn/course](https://www.codefather.cn/course) (There are tutorial recommendations and learning suggestions on the right side of the page.)
Previous project introduction videos: [https://bilibili.com/video/BV1YvmbYbEgS](https://www.bilibili.com/video/BV1YvmbYbEgS/)
Yupi's projects have helped many students secure high-paying offers from top companies:
## 3. More Introduction
Function modules:
Architecture design:
## 4. Quick Start
> Refer to the [Local Setup Guide](docs/LOCAL_SETUP.md) for detailed step-by-step instructions.
### Prerequisites
- Node.js ≥ 18 (Recommended: 20 LTS)
- An [OpenRouter API Key](https://openrouter.ai/settings/keys) (required for AI analysis)
### 1. Clone and Install Dependencies
```bash
git clone https://github.com/liyupi/yupi-hot-monitor.git
cd yupi-hot-monitor
# Back-end
cd server
npm install
npx prisma generate
npx prisma db push
# Front-end
cd ../client
npm install
```
### 2. Configure Environment Variables
```bash
cp server/.env.example server/.env
```
Edit `server/.env`, at least fill in the OpenRouter API Key:
```bash
OPENROUTER_API_KEY=sk-or-v1-your-key
# Twitter API Key (optional)
TWITTER_API_KEY=your-key
```
### 3. Start Services (two terminals)
```bash
# Terminal 1: Start back-end (port 3001)
cd server && npm run dev
# Terminal 2: Start front-end (port 5173)
cd client && npm run dev
```
Access **http://localhost:5173**, enter keywords to start monitoring hotspots 🔥
| Service | Address |
|------|------|
| Front-end page | http://localhost:5173 |
| Back-end API | http://localhost:3001 |
| Database management | `cd server && npx prisma studio` (optional) |
For more details, see the [Local Setup Guide](docs/LOCAL_SETUP.md).
## Join Project Learning
CodeFather has **20+ sets of project tutorials**! Each project has different learning focuses, mostly **full-stack projects** covering front-end and back-end, with many AI application development projects.
Welcome to join [CodeFather](https://www.codefather.cn/vip). After joining, you can follow this project and previous **20+ original project tutorials** without limit. You can also enjoy more original technical materials, learning and job search guidance, and over 100 interview video recordings.
🧧 To help with the new project learning, a **limited-time CodeFather discount coupon** is provided. Scan the QR code to receive the coupon and join. If you're not satisfied within three days, a full refund is available. Welcome to join and experience, as spots are limited!
<img width="404" alt="image" src="https://github.com/user-attachments/assets/56411098-b60e-4267-8ba2-4ebc5d416afc" />
For less than $1 per day, it's an absolutely worthwhile investment in yourself! After becoming a CodeFather member, you can unlock tutorials and materials for over 20 projects, available on both PC and APP, as shown:
