Content
# AI Hotspot Monitoring Tool
> Author: [Programmer Yupi](https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah)
>
> This project is a teaching project, providing complete video tutorials + text tutorials + resume writing + interview questions and solutions + Q&A service to help you improve your project capabilities and add highlights to your resume!
>
> ⭐️ Join the project series learning: [Join Programming Navigation](https://www.codefather.cn/vip)
## I. Project Introduction
This is a project tutorial with **AI programming practice** as the core, based on Express 5 + React 19 + OpenRouter + Socket.io, using AI programming to develop an "AI Hotspot Monitoring Tool" from 0 to 1, taking you to experience the complete workflow of AI Vibe Coding and learn how to quickly create practical efficiency tools with AI!
Enter the keywords to be monitored, and the system automatically aggregates and crawls content from **8+** information sources such as Twitter, Bing, HackerNews, Sougou, and Bilibili, uses AI for truth identification and correlation analysis, and pushes real-time notifications to users through WebSocket and email. In addition, the hotspot monitoring capability is encapsulated as an **Agent Skills package**, so that AI programming tools such as Cursor, VSCode Copilot, and Claude Code can also be used directly.
### Why do this project?
As an AI programming blogger, Yupi wants to use tools to automatically discover the latest hotspots (such as updates to AI large models) as soon as possible, and send me notifications in time so that I can be on the front line of eating melons.
In that case, **why not make a more general tool**.
This is the starting point of the AI hotspot monitoring tool: let AI help you keep an eye on hotspots and get high-quality information as soon as possible!
### 6 Core Capabilities
1) Configure monitoring keywords, support activation / pause.
2) AI automatically crawls and analyzes hotspots from 8+ data sources, and uses AI for query expansion, truth identification, correlation analysis, and intelligent summarization.
3) Multi-dimensional filtering and sorting, filter by source, importance, and time range, and sort by popularity, correlation, and time.
4) Full network search, enter keywords to aggregate search from multiple data sources.
5) Real-time notification, WebSocket real-time push + email notification.
6) Agent Skills package, which can be used directly in Cursor, VSCode Copilot, and Claude Code after installation.
## II. Project Advantages
This project has a novel topic, closely follows the AI programming era, and is oriented towards **practical tool development**, which is different from the outdated CRUD projects. The project content is concise, **can be learned in less than a week**, and takes you to master the complete workflow of AI programming, greatly increasing the competitiveness of your resume and job search!
Rich in technology, covering the entire AI programming link:
From this project you can learn:
- How to use AI programming to develop a complete tool from 0 to 1?
- 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 crawl content from multiple information sources (Twitter, Bing, HN, Bilibili, etc.)?
- How to access AI large models through OpenRouter to achieve intelligent content review?
- How to implement Query Expansion to improve the recall rate of information retrieval?
- How to implement WebSocket real-time push based on Socket.io?
- How to use Aceternity UI to create a cool and technological front-end interface?
- How to develop a standardized Agent Skills package and verify it in various AI tools?
- How to perform manual confirmation, version control, and iterative optimization in AI programming?
### Yupi Series Project Advantages
Yupi's original projects are mainly **practical**, and are made **from 0 to 1** in a **full live broadcast** manner, from demand analysis, technology selection, project design, project initialization, Demo writing, front-end and back-end development implementation, project optimization, deployment and launch, I will explain everything to you **from theory to practice**, and I will not miss any details!
Compared with learning from online tutorials, the advantages of Yupi project series: from learning knowledge => practical projects => review notes => project Q&A => resume writing => interview questions and solutions one-stop service
Programming Navigation already has **20+ sets of project tutorials!** The learning focus of each project is different, almost all of them are front-end + back-end **full-stack projects**, and there are also a large number of AI application development projects.
See details: [https://codefather.cn/course](https://www.codefather.cn/course) (there are tutorial recommendations and learning suggestions on the right side of this page)
Past project introduction video: [https://bilibili.com/video/BV1YvmbYbEgS](https://www.bilibili.com/video/BV1YvmbYbEgS/)
Yupi's projects have helped many students get high-paying offers from big factories:
## III. More Introduction
Functional modules:
Architecture design:
## IV. Quick Run
> For detailed nanny-level tutorials, please refer to [Local Running Guide](docs/LOCAL_SETUP.md)
### 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
# Backend
cd server
npm install
npx prisma generate
npx prisma db push
# Frontend
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 the service (two terminals)
```bash
# Terminal 1: Start the backend (port 3001)
cd server && npm run dev
# Terminal 2: Start the frontend (port 5173)
cd client && npm run dev
```
Visit **http://localhost:5173** and enter keywords to start monitoring hotspots 🔥
| Service | Address |
|---|---|
| Front-end page | http://localhost:5173 |
| Backend API | http://localhost:3001 |
| Database management | `cd server && npx prisma studio` (optional) |
For more details, please see [Nanny-level Local Running Guide](docs/LOCAL_SETUP.md).
## Join Project Learning
Programming Navigation already has **20+ sets of project tutorials**! The learning focus of each project is different, almost all of them are front-end + back-end **full-stack** projects, and there are also a large number of AI application development projects.
Welcome to join [Programming Navigation](https://www.codefather.cn/vip). After joining, you can not only follow this project throughout the entire process, but also have unlimited access to the past **20+ sets of original project tutorials**. You can also enjoy more original technical materials, learning and job search guidance, and hundreds of interview replay videos to start your programming journey~
🧧 To help new project learning, we are issuing **limited-time programming navigation coupons** to everyone. Scan the code to receive the coupon and join. If you are not satisfied within three days of joining, you can get a full refund. Welcome to join and experience. The number of places is limited, so come and learn!
<img width="404" alt="image" src="https://github.com/user-attachments/assets/56411098-b60e-4267-8ba2-4ebc5d416afc" />
Less than 1 yuan a day is definitely the most valuable investment for yourself! After becoming a member of Programming Navigation, you can unlock the tutorials and materials for more than 20 projects. You can learn on both the PC website and the APP, as shown in the figure:
