【Code With SOLO】用 SOLO 搭建一个 16 平台每日热点新闻聚合站

【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 主要帮我完成了几类工作:

  1. 生成基础项目结构和页面组件
    包括首页、收藏页、新闻卡片、平台 Tab、全局状态管理等。

  2. 接入多平台数据源
    例如微博、知乎、GitHub、36氪、IT之家、CSDN、阮一峰博客等。

  3. 搭建 Netlify Edge Function 代理
    解决浏览器端直接请求第三方接口时遇到的 CORS、Referer、User-Agent 和上游限制问题。

  4. 排查线上问题
    部署后发现 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/

建议配图:

Trae Solo 开发调试测试

5. 效果与总结

原本如果手动搭建这个项目,从前端开发、接口接入、代理配置到线上排查,至少需要一两天时间。借助 TRAE SOLO,我可以把大量重复性的编码、调试和排错工作交给 AI 完成,自己主要负责确认需求、测试效果和判断方案是否合理。

这次最大的收获是:AI 不只是能写代码,还能参与完整工程流程。尤其是在生产环境问题排查时,SOLO 能帮助我快速定位是前端解析问题、代理问题,还是第三方上游限制问题,并给出可落地的修复方案。

可复用的方法:

  • 先让 SOLO 拆解功能模块

  • 再逐个实现页面、状态、接口

  • 部署后用真实线上错误反向调试

  • 对第三方数据源尽量设计多源 fallback

  • 每次修复后执行构建验证再部署

这个项目让我明显感受到,用 SOLO 做 Web 工具开发,不只是“生成代码”,而是可以完成从想法到上线的完整闭环。

1 个赞

装完了还能用?挺实用的感觉

2 个赞


佬,你开源码,我太爱你的这个新闻了,

1 个赞

谢谢呀!感谢支持!还有不少需要慢慢优化的地方。本意是自己平时也一直要用。

谢谢喜欢啦。其实github地址就是那张部署图片上。 欢迎一起慢慢优化

1 个赞

太牛了大佬