【Code With SOLO】用 SOLO 搭建一个 16 平台每日热点新闻聚合站
1. 摘要
我用 TRAE SOLO 搭建了一个基于 React + TypeScript + Vite 的每日热点新闻聚合 Web 应用,聚合微博、知乎、GitHub、36氪、阮一峰博客、AIHOT 等多个信息源。
项目不仅完成了前端页面、平台筛选、收藏管理等功能,还解决了部署到 Netlify 后部分数据源因代理、反爬、CORS 导致接口为空的问题,最终实现了可在线访问的实时热点聚合工具。
2. 背景
我平时需要频繁关注 AI、技术、财经和互联网热点,但信息分散在微博、知乎、GitHub、36氪、阮一峰博客等不同平台,手动切换查看效率很低。
所以我希望用 TRAE SOLO 快速搭建一个统一入口,把常用热点信息聚合在一个 Web 页面里,并且支持收藏、筛选和实时刷新,方便每天快速浏览重要内容。
3. 实践过程
我先让 SOLO 帮我拆解项目需求:
-
搭建 React + TypeScript + Vite 项目结构
-
设计多平台热点数据源
-
实现新闻卡片、平台筛选、收藏功能
-
接入 AIHOT 精选内容
-
部署到 Netlify
-
排查生产环境接口异常
关键 Prompt 示例:
帮我搭建一个每日热点新闻聚合 Web 应用,使用 React + TypeScript + Vite。
需要支持多个平台热点源、平台筛选、收藏功能、实时数据刷新,并适配 Netlify 部署。
开发过程中 SOLO 主要帮我完成了几类工作:
-
生成基础项目结构和页面组件
包括首页、收藏页、新闻卡片、平台 Tab、全局状态管理等。 -
接入多平台数据源
例如微博、知乎、GitHub、36氪、IT之家、CSDN、阮一峰博客等。 -
搭建 Netlify Edge Function 代理
解决浏览器端直接请求第三方接口时遇到的 CORS、Referer、User-Agent 和上游限制问题。 -
排查线上问题
部署后发现 36氪为空,SOLO 帮我定位到是 Netlify 到 36kr 上游链路超时,并增加了多源 fallback。
后来阮一峰博客出现 403,SOLO 继续排查出是 HTTP 请求触发 Cloudflare challenge,最终改成 HTTPS 优先,并增加备用源。
踩过的坑:
-
本地 Vite 代理正常,不代表 Netlify 生产环境也正常
-
第三方热点接口经常有反爬、超时、403、空数据问题
-
RSS、Atom、JSON 数据结构不同,需要分别解析
-
线上代理不能只依赖单一接口,需要设计 fallback
4. 成果展示
最终产出是一个可在线访问的每日热点聚合 Web 应用:
项目功能包括:
-
16 个平台热点聚合
-
AIHOT 精选内容
-
平台分类筛选
-
新闻收藏与管理
-
实时数据刷新
-
Netlify 在线部署
-
生产环境代理兜底机制
在线地址:
https://dailyhotnews2026.netlify.app/
建议配图:
-
首页全平台热点
-
36氪数据正常显示
-
阮一峰博客数据正常显示
-
收藏功能截图
-
Netlify 部署成功截图
Trae Solo 开发调试测试
5. 效果与总结
原本如果手动搭建这个项目,从前端开发、接口接入、代理配置到线上排查,至少需要一两天时间。借助 TRAE SOLO,我可以把大量重复性的编码、调试和排错工作交给 AI 完成,自己主要负责确认需求、测试效果和判断方案是否合理。
这次最大的收获是:AI 不只是能写代码,还能参与完整工程流程。尤其是在生产环境问题排查时,SOLO 能帮助我快速定位是前端解析问题、代理问题,还是第三方上游限制问题,并给出可落地的修复方案。
可复用的方法:
-
先让 SOLO 拆解功能模块
-
再逐个实现页面、状态、接口
-
部署后用真实线上错误反向调试
-
对第三方数据源尽量设计多源 fallback
-
每次修复后执行构建验证再部署
这个项目让我明显感受到,用 SOLO 做 Web 工具开发,不只是“生成代码”,而是可以完成从想法到上线的完整闭环。







