【学习工作赛道】白名单赛事志 — 教育部 47 项白名单赛事一站式信息平台

TRAE AI 创造力大赛 【大赛初赛专区】
1

先和大家打个招呼吧 :waving_hand:

  • 个人介绍：在互联网行业浸淫了十几年但是完全不懂技术的导演，做了很多关于科技公司发布会相关的视频项目，自己学习 Python 只到了第一节 hello world 就结束的有趣有想法的导演Bingo；

  • 你是怎么用 TRAE 把 Demo 做出来的： 之前一直有在使用其他的智能体，打下了一些基础，而作为导演最擅长的就是很多想法和与人沟通的能力，比如创意想法、具体落地安排制片、摄影、灯光、服装、道具、化妆、演员、美术等等，这么看来和我用TRAE做一个项目出来流程基本一致，而且**TRAE没有脾气，会自己想办法；沟通起来更加简单！**所以不会技术不重要，感谢这个时代和TRAE，有想法能描述清楚让TRAE落地就可以了！

一、Demo 简介

是什么：白名单赛事志（saishizhi.com）是一个面向中小学生家长的教育部白名单赛事一站式信息网站，基于 Next.js 14 App Router + TypeScript 构建，已部署上线运营。

面向谁：核心用户是中小学生家长，尤其是关心孩子升学路径、想通过白名单赛事提升综合素质评价和强基计划竞争力的家长群体；次级用户是备战赛事的学生本人和教育从业者。

主要功能：

  1. 47 项白名单赛事完整信息库：收录教育部 2022-2025 学年公布的 47 项全国性中小学生竞赛，涵盖自然科学素养类（22 项）、人文综合素养类（12 项）、艺术体育类（13 项）三大类别。每项赛事提供报名时间、主办单位、参赛对象、赛制流程、含金量评级、官方网站入口等完整字段。

image
image2984×1848 387 KB

image
image2984×1848 399 KB

image
image2984×1848 384 KB

  1. 比赛日历 + 资讯动态：按月份可视化的赛事时间节点日历，自动从飞书 Base 数据库同步官方资讯（报名通知、成绩公布、政策更新），家长可一目了然查看当月有哪些赛事节点。

    image
    image2984×1848 399 KB

image
image1920×1189 217 KB

  1. 备考资料包 + 支付宝支付：31 项有有效资料的赛事提供官方资料包整理合集（含赛事规则、历年真题、通知公告、备赛指南），支持支付宝当面付扫码支付（单赛事 ¥9.9 / 全包 ¥99），支付后永久访问。
    image
    image1920×1189 183 KB

image
image2984×1848 424 KB

二、Demo 创作思路

灵感来源

我自己的孩子今年上小学，全段时间参加了福建省的无人机比赛刚拿了一等奖，但是没能晋级国赛；教培机构单纯收费没有特别多的信息咨询，想通过白名单赛事给他积累综合素质评价材料。但查找信息时发现一个巨大的痛点：教育部只公布了一份白名单赛事名单（PDF），没有任何配套的信息查询平台。

家长想了解某项赛事，需要：

  • 网络搜索 → 信息分散在各种培训机构的推广文中，真假难辨

  • 逐个访问赛事官网 → 部分赛事官网简陋、更新滞后

  • 关注公众号 → 信息碎片化，没有系统化整理

  • 咨询学校老师 → 老师也不一定掌握全部 47 项赛事

我意识到这是一个真实存在、长期未被解决的痛点：权威信息存在，但没有人把它做成可查询、可比较、可追踪的产品。

想解决的问题

  1. 信息不对称：47 项赛事信息散落在各处，家长无法一站式获取

  2. 报名节点错过：赛事报名时间分散在全年各月，没有统一提醒机制

  3. 含金量判断难：家长不知道哪些赛事对升学真正有帮助

  4. 资料获取难：官方真题和规则需要家长自己四处搜集

为什么做这个方向

我的判断和取舍：

  • 不做培训机构：教育赛道最赚钱的是培训，但培训需要师资和教研投入，且我不是教育从业者。我选择做信息平台，发挥我的技术优势。

  • 不做综合教育平台：不和学科辅导、家长社区等红海赛道竞争，聚焦"白名单赛事"这个细分垂直领域，做深做透。

  • 不做纯工具：单纯的赛事查询工具没有商业闭环。我加入了资料包付费下载，形成"信息免费 → 资料付费"的商业模式，既保证流量又实现变现。

  • 技术驱动而非内容驱动：所有信息来自教育部官方公告、主办单位官网、飞书 Base 数据库，不依赖人工内容生产，通过爬虫 + AI 分类 + 飞书协作实现可持续运营。

三、Demo 体验地址

线上体验链接：https://saishizhi.com

部署架构：阿里云 ECS（杭州，已申请 ICP 备案）+ Vercel 双线部署，DNS 智能解析。

四、TRAE 实践过程

4.1 整体开发流程

本项目从需求分析、架构设计、前端开发、后端 API、数据库集成、支付对接、SEO 优化到部署上线，全部通过 TRAE IDE 完成。我以"产品经理 + 架构师"的角色向 TRAE 描述需求，TRAE 负责代码生成、重构、调试和部署。

项目规模：

  • 29 个页面路由 + 21 个 API 路由

  • 7 个 React 组件

  • 25,000+ 行 TypeScript/TSX 代码

  • 50+ 次 Git 提交

  • 464 个 sitemap URL（含 282 个 SEO 长尾页面）

4.2 关键开发阶段

阶段一：项目初始化 + 数据建模

向 TRAE 描述需求：“我现在想做一个中国白名单赛事汇总的网站，后续按照知识付费 9.9 元进群收费；主要面对小学-高中的家长；内容是国内 47 个白名单赛事的赛事信息：如官方通知、初选赛、决赛等等；此处需要解决信息来源的问题；另外也可以做一个比赛报名日历的功能；查看资料如下：1 、工作文件夹中的 word 文件”。TRAE 生成了完整的 TypeScript 数据模型和 47 项赛事的初始数据。

image
image3008×1812 439 KB

Session ID：[3489169086900211:a90594179271bc678d15a7b02d0c93fe_6a3bc814f01e2c438fc69250.6a3bc814f01e2c438fc69253.6a3bc814f01e2c438fc69251:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 20:05:40)]

阶段二：核心页面 + API 开发

向 TRAE 描述：“实现赛事列表页（支持筛选）、赛事详情页（含时间线、含金量、相关资讯）、比赛日历、搜索功能、资讯列表与详情页”。TRAE 一次性生成了 15+ 个页面和 10+ 个 API 路由，包括飞书 Base 数据库集成（资讯动态同步）。

image
image3008×1812 459 KB

image
image3008×1812 336 KB

Session ID：[3489169086900211:d22a9654999e7fbe1b231aa1e940707d_6a3bc814f01e2c438fc69250.6a3bcc48f01e2c438fc692db.6a3bcc48f01e2c438fc692d9:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 20:23:36)]

Session ID：[3489169086900211:0d51df8c8d8324356f1eb6a7cb1ad214_6a3bc814f01e2c438fc69250.6a3bf8a08422c02ba89d0738.6a3bf8a08422c02ba89d0736:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/24 23:32:49)]

阶段三：支付宝当面付集成

这是 TRAE 展现技术深度的关键环节。我向 TRAE 描述：“集成支付宝当面付（扫码支付），支持资料包单赛事解锁和全包解锁，零依赖实现 RSA2 签名”。TRAE 生成了完整的 Alipay SDK（src/lib/alipay.ts），包括签名、预下单、查询、验签，无任何第三方依赖。

image
image3008×1812 342 KB

Session ID：[3489169086900211:3c831249d852b2e9c2b283e0306626d2_6a3bc814f01e2c438fc69250.6a4327bca31e219f8541cec4.6a4327bca31e219f8541cec2:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 10:19:40)]

阶段四：SEO 工程化体系

向 TRAE 描述需求：“构建统一 SEO 出口，一次调用产出完整 Metadata（Title/Description/Canonical/OG/Twitter/Robots/动态 OG 图）+ 面包屑数据，支持人工字段覆盖”。TRAE 设计并实现了 buildSeo() 统一 SEO Engine、/api/og 动态 OG 图路由（SVG 格式 1200×630）、关键词库匹配引擎（src/lib/seo-metadata.ts）、V3 Cluster 关联推荐内链（src/components/RelatedLinks.tsx）。

image
image3008×1812 409 KB

image
image3008×1812 443 KB

Session ID：[3489169086900211:5096c02d133cd5b2205afb8deab8de3c_6a3bc814f01e2c438fc69250.6a431a57a31e219f8541cd00.6a431a57a31e219f8541ccfe:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 09:22:31)]

Session ID：[3489169086900211:397bcc5b14caf9188d688e87cdf93c52_6a3bc814f01e2c438fc69250.6a432d0da31e219f8541cf8b.6a432d0ca31e219f8541cf89:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 10:42:21)]

阶段五：部署与运维

向 TRAE 描述：“部署到阿里云 ECS + Vercel 双线，配置 nginx 反向代理、Let’s Encrypt SSL 证书、PM2 进程管理、自动续期”。TRAE 指导我完成了全部运维操作，包括 nginx 配置、证书申请（DNS-01 验证）、DNS 切换、PM2 部署。

image
image3008×1812 394 KB

Session ID：[3489169086900211:13f610dbc1e04b763889d60f5521ff35_6a3bc814f01e2c438fc69250.6a3f75e3a31e219f8541b6ff.6a3f75e3a31e219f8541b6fa:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/27 15:04:03)]

4.3 TRAE 能力的独特运用

这是评分维度中"技术创新"的重点，我重点展示了 TRAE 在以下几方面的独特运用：

  1. 统一 SEO Engine（buildSeo()）：一次调用产出完整 Metadata + 面包屑 + 动态 OG 图 URL，支持 manual* 字段覆盖（首页/详情页保留人工 metadata）。这避免了 SEO 配置散落在各页面的维护噩梦，是 TRAE 帮我设计的架构级方案。

  2. 动态 OG 图路由（/api/og）：用 SVG 格式生成 1200×630 的社交分享图，根据页面标题、赛事类别智能渲染（深蓝渐变背景 + 类别色装饰条 + B 字母 logo + 智能换行标题 + 推荐指数 + saishizhi.com）。相比 next/og 的中文字体加载复杂性，SVG 方案浏览器原生渲染中文完美，且支持 Cache-Control 边缘缓存。

  3. 飞书 Base 数据库集成：用飞书 Base 作为 CMS，通过飞书开放 API 实现资讯动态同步。TRAE 帮我处理了中文字段名（名称/类别/主办单位等）、URL 类型字段的对象格式（{link: url}）、分页抓取（page_size=500 + page_token）等细节。

  4. 反爬虫中间件 + 搜索引擎白名单：TRAE 帮我设计了一套智能反爬虫策略——默认拦截短 UA 和无 Referer 请求，但放行 Googlebot、Baiduspider、Bingbot 等主流搜索引擎和 AI 爬虫（GPTBot、ClaudeBot、DeepSeekBot 等），确保 SEO 收录不受影响。这个中间件还处理了支付宝服务端回调（无 Referer）和 OG 图社交爬虫抓取的白名单。

  5. ISR + dynamicParams 配置：TRAE 帮我解决了 Next.js App Router 的一个细节坑——force-dynamic 与 revalidate 互斥不能共存。修复后静态资讯走预渲染缓存，飞书动态资讯按需生成并缓存 1 小时。

  6. 双线部署架构：阿里云 ECS（国内访问，已申请 ICP 备案）+ Vercel（海外访问 + 自动部署）。DNS 智能解析，GitHub 推送后 Vercel 自动构建，rsync 同步到阿里云。TRAE 帮我编写了完整的部署脚本和 nginx 配置。

4.4 踩过的坑与解决方案

  • zsh glob 错误：git add src/app/news/[id]/page.tsx 时 zsh 把 [id] 当 glob 匹配 → TRAE 建议用引号包裹路径

  • 面包屑 URL 格式：初版 buildBreadcrumb() 返回相对 URL，Google BreadcrumbList 要求 item 字段为绝对 URL → TRAE 修复为绝对 URL

  • AhrefsBot 屏蔽误判：robots.ts 中 AhrefsBot Disallow: / 导致 Ahrefs 报告全部"Blocked by robots.txt" → 确认是误报，保持屏蔽状态

  • Let’s Encrypt 证书申请失败：www 子域 80 端口被外部 reset → 改用 DNS-01 验证 + 阿里云 DNS API 自动添加 TXT 记录

  • Vercel HSTS 308 重定向：导致百度验证失败 → 切换 DNS 到阿里云 ECS + 301 重定向

五、经验总结与开发心得

1. TRAE 的最佳使用方式

经过这个项目的完整开发，我总结出 TRAE 的最佳使用方式：

  • 像产品经理一样描述需求：不要说"写一个页面"，而要说"实现一个赛事列表页，支持按类别（自然科学/人文综合/艺术体育）、学段（小学/初中/高中）、报名状态筛选，每项赛事显示名称、类别标签、报名时间、含金量星级"。

  • 分阶段推进，每阶段验证：不要一次让 TRAE 写完整个项目，而是分"数据建模 → 核心页面 → API → 支付 → SEO → 部署"六个阶段，每阶段完成后立即构建测试。

  • 善用 TRAE 的架构能力：TRAE 不只是写代码，它能帮你设计架构。比如 buildSeo() 统一 SEO Engine 就是 TRAE 帮我设计的架构级方案，比我最初设想的"每个页面单独配置 SEO"高明得多。

  • 保留关键 Session ID：TRAE 的每段对话都有唯一 Session ID，发帖时附上能证明作品确实由 TRAE 开发完成。

2. 项目当前状态

  • :white_check_mark: 已上线运营：https://saishizhi.com

  • :white_check_mark: 47 项赛事完整信息（44 项有官网，3 项无独立官网）

  • :white_check_mark: 31 项赛事资料包（含历年真题、官方规则）

  • :white_check_mark: 支付宝当面付支付已接入

  • :white_check_mark: 飞书 Base 数据库集成（资讯动态同步）

  • :white_check_mark: 微信公众号集成（菜单 + 图文素材）

  • :white_check_mark: Google Analytics 4 + Microsoft Clarity 已接入

  • :white_check_mark: ICP 备案申请中（已部署到阿里云杭州 ECS）

  • :white_check_mark: 双线部署（阿里云 + Vercel）

3. 后续规划

  • 复赛阶段：家长社群功能、赛事对比工具、AI 选赛推荐

  • 长期：赛事数据 API 开放、移动端 App、家校协作功能

六、通过的社区报名帖链接

欢迎大家使用反馈，感谢～～～