1 人= AI 全栈：多Agent+React19+Elysia+DevOps实战

第1章 把握AI浪潮：解锁时代机遇 试看1 节 | 13分钟

AI浪潮汹涌而至，时不我待，精彩不容错过！本课程揭秘AI+社交项目，助你面试脱颖而出，升职加薪快人一步，绝对是职场晋升的绝佳秘籍！

收起列表

• 视频：1-1 1人=AI全栈，你准备好了吗？ (12:49)试看

第2章 功能实现必备技能之环境配置&知识储备22 节 | 225分钟

工欲善其事，必先利其器！bun、react，从环境配置到简单应用。项目启动前，查缺补漏，让我们先把地基打牢。

收起列表

• 视频：2-1 用户端登录注册：业务与技术方案分析 (07:45)
• 视频：2-2 为什么Bun.js越来越被推崇，称为新一代JS运行时之王 (09:35)试看
• 视频：2-3 多种安装 Bun.js 的方案，总有一款适合你 (04:19)
• 视频：2-4 Bun.js 速览，掌握常用开发命令，轻松上手！ (08:59)
• 视频：2-5 为什么优选 React19 (04:21)
• 视频：2-6 为什么更多工程师使用 Vite 安装 React (09:07)
• 视频：2-7 react 和 react-dom 的区别是什么 (03:04)
• 视频：2-8 如何使用 useState 处理 react 中的 状态变量以及相关注意事项 (15:14)
• 视频：2-9 useEffect：React 处理副作用的强大工具 (12:37)
• 视频：2-10 为什么 TanStack Router 被称为React 的更高效路由解决方案 (06:55)
• 视频：2-11 TanStack Router 新玩法：文件即路由 (15:38)
• 视频：2-12 TanStack Router 技巧：用代码驱动路由配置 (07:32)
• 视频：2-13 TanStack Router 页面操作,导航与参数的设置和获取 (21:52)
• 视频：2-14 TanStack Router 特色：loader 并行加载数据 & SWR 缓存 (19:34)
• 视频：2-15 TanStack Router 特色：路由预先加载 (10:14)
• 视频：2-16 React useRef持久化数据的便捷工具 (08:41)
• 视频：2-17 React useLayoutEffect 优化页面渲染的得力助手 (10:09)
• 视频：2-18 React useId 生成唯一ID的便捷 Hook (09:25)
• 视频：2-19 React props 组件之间通信的好帮手 (09:45)
• 视频：2-20 React useImperativeHandle 自定义父组件可以访问的 ref 值 (13:20)
• 视频：2-21 React 自定义 hook，轻松实现个性化功能 (08:01)
• 视频：2-22 React useDebugValue，调试自定义 Hook 的得力助手 (08:20)

第3章 功能实现必备技能之 CSS 知识储备10 节 | 152分钟

CSS 是项目开发不可或缺的技能，本章将学习流行的 Tailwind、daisyUI 来实现快速项目开发

收起列表

• 视频：3-1 为什么工程师们认为 Tailwind.CSS 会重塑前端传奇 (12:53)
• 视频：3-2 Tailwind 尺寸与间距：体验 utility classes 编程的魅力 (19:57)
• 视频：3-3 Tailwind 排版样式速成：从基础到高阶定制（上） (19:21)
• 视频：3-4 Tailwind 排版样式速成：从基础到高阶定制（下） (18:57)
• 视频：3-5 Tailwind 布局三板斧：Flex、Grid+定位 (10:04)
• 视频：3-6 Tailwind 颜色系统：样式运用+自定义色彩主题 (19:50)
• 视频：3-7 Tailwind 伪类与伪元素：CSS选择器的高级玩法（上） (12:13)
• 视频：3-8 Tailwind 伪类与伪元素：CSS选择器的高级玩法（下） (17:28)
• 视频：3-9 daisyUI 凭什么能在众多UI框架中脱颖而出 (14:39)
• 视频：3-10 daisyUI 快速入门，一学即会 (06:23)

第4章 用户端–登录/注册模块之前端实现10 节 | 153分钟

学完基础知识，是时候大展身手啦！检验学习成果的时候到啦，本章综合Tailwind.css + daisyUI+TanStack来实现用户登录注册页面

收起列表

• 视频：4-1 用户登录&注册页面：分析页面布局和技术实现 (05:31)
• 视频：4-2 开发用户登录&注册页面：使用 Tailwind.css + daisyUI – 上 (13:38)
• 视频：4-3 开发用户登录&注册页面：使用 Tailwind.css + daisyUI – 下 (17:09)
• 视频：4-4 表单验证：基于 daisyUI Validator 轻松实现 (26:14)
• 视频：4-5 使用 JS & TanStack & React 快速设置 SEO 信息 (20:49)
• 视频：4-6 基于 Vite 和 TS 配置项目的路径别名 (07:16)
• 视频：4-7 使用 TanStack Query ， 高效的异步数据获取工具 (15:24)
• 视频：4-8 使用 Vite 插件来 mock 数据，避免等待接口、提升研发效率 (13:29)
• 视频：4-9 配置 Vite 的 env 环境变量，满足不同开发模式的使用需求 (18:39)
• 视频：4-10 使用 TanStack Query 中的 useMutation 函数，处理用户注册和登录逻辑 (14:45)

第5章 构建 AI 时代的高性能网络引擎 NetworkEngine16 节 | 215分钟

构设计思路，然后逐步开发一个可扩展的、适合 ai 项目的网络引擎

收起列表

• 视频：5-1 AI 应用之 http 请求工具的技术方案分析 (17:38)
• 视频：5-2 构建高性能网络引擎：NetworkEngine 的思路分析 (11:29)
• 视频：5-3 NetworkEngine 实战（一）：标准化 ApiError 与多级配置模型 (23:00)
• 视频：5-4 NetworkEngine 实战（二）：BaseEngine 通用函数的设计开发 (18:03)
• 视频：5-5 NetworkEngine 实战（三）：BaseEngine 中 mergeConfig 开发 (16:27)
• 视频：5-6 NetworkEngine 实战（四）：BaseEngine 中 mergeConfig 开发 (12:45)
• 视频：5-7 NetworkEngine 实战（五）：分析 FetchEngine 的技术架构 (06:41)
• 视频：5-8 NetworkEngine 实战（六）：实现 FetchEngine 的核心业务逻辑 (11:26)
• 视频：5-9 NetworkEngine 实战（七）：实现 FetchEngine 的核心业务逻辑 (20:23)
• 视频：5-10 NetworkEngine 实战（八）：实现 FetchEngine 的核心业务逻辑 (12:17)
• 视频：5-11 NetworkEngine 实战（九）：实现引擎的指挥调度中心 (08:05)
• 视频：5-12 基于 NetworkEngine 发送网络请求 (08:27)
• 视频：5-13 基于 ReactDOM createRoot 实现 toast 弹窗组件 (13:33)
• 视频：5-14 React 项目全局状态管理的技术选型分析 (10:27)
• 视频：5-15 使用 Zustand 处理全局用户状态 (14:29)
• 视频：5-16 使用 Zustand persist 中间件持久化数据 (09:22)

第6章 功能实现必备技能之 PostgreSQL 数据库11 节 | 137分钟

掌握前端精髓后，现在向全栈进发！热门全能PostgreSQL数据库等你来征服。

收起列表

• 视频：6-1 为什么 PostgreSQL 被认为是 AI 时代的首选全能数据库 (11:13)
• 视频：6-2 Docker 安装 PostgreSQL，使用 pgAdmin 工具操作数据库 (12:56)
• 视频：6-3 PostgreSQL入门：字段类型和约束（上） (09:41)试看
• 视频：6-4 PostgreSQL入门：字段类型和约束（下） (11:49)
• 视频：6-5 PostgreSQL 入门：必备的增删改查技能（上） (15:15)
• 视频：6-6 PostgreSQL 入门：必备的增删改查技能（下） (15:17)
• 视频：6-7 PostgreSQL 入门：基础查询与条件过滤（上） (09:41)
• 视频：6-8 PostgreSQL 入门：基础查询与条件过滤（下） (16:47)
• 视频：6-9 PostgreSQL 入门：常用的五大类函数 (11:06)
• 视频：6-10 PostgreSQL 入门：常用的五大类函数 SQL 实战 (16:16)
• 视频：6-11 PostgreSQL入门：关键字的底层执行顺序 (06:28)

第7章 功能实现必备技能之 Elysia.js 全栈框架9 节 | 132分钟

学习完前端技术知识后，本章节将学习热门的 Elysia.js 框架，熟练掌握 Elysia 的核心功能，以及开发全局插件。然后掌握 ORM 框架 Drizzle.js 的使用方式。

收起列表

• 视频：7-1 为什么 Elysia.js 被称为必学的高性能 AI 全栈框架 (12:59)
• 视频：7-2 Elysia.js 核心概念与快速入门 (14:10)
• 视频：7-3 Elysia.js 核心：掌握 GET&POST 路由与数据验证 (17:40)
• 视频：7-4 从单体到模块化：基于 .group() & .use() 构建优雅的 Elysia 架构 (08:47)
• 视频：7-5 API 架构设计：使用 .derive() 实现 api 接口响应规范插件 (20:30)
• 视频：7-6 异常防御架构：基于 .onError() 打造全场景错误拦截插件 (16:45)
• 视频：7-7 使用 Bun 快速操作 PostgreSQL 数据库 (04:31)
• 视频：7-8 常用的 ORM 框架技术选型分析 (09:01)
• 视频：7-9 Drizzle 速通，增删改查快速上手 (26:46)

第8章 AI 技术初露锋芒–守护登录注册安全21 节 | 271分钟

本章学习全栈 AI 认证基建。利用 Bun 实现高性能安全哈希，深度集成 OpenAI SDK，通过结构化 Prompt 与 Tool 赋予传统登录接口“模糊语义”判定能力；配合 JWT 令牌机制，实现密码检验 → AI 风控 → 状态保持的安全登录流程。…

收起列表

• 视频：8-1 登录&注册之 AI 风控架构与业务场景分析 (11:29)
• 视频：8-2 Bun+Elysia 项目配置 env 支持多环境 (12:17)
• 视频：8-3 完善 users 表的 schema 、表单校验与 cors 等设置 (22:38)
• 视频：8-4 基于高并发需求的登录注册架构设计 (13:37)
• 视频：8-5 账号登录注册（一）：实现后端 check-unique 查重接口 (13:32)
• 视频：8-6 账号登录注册（二）：封装UniqueFiled组件&表单错误提示 (13:20)
• 视频：8-7 账号登录注册（三）：设置表单操作的相关状态 (07:04)
• 视频：8-8 账号登录注册（四）：基于 useQuery 完成前置校验功能 (19:56)
• 视频：8-9 账号登录注册（五）：基于Bun.password+elysia+drizzle实现接口 (16:33)
• 视频：8-10 AI 风控模块的设计思路分析 (06:25)
• 视频：8-11 AI 初体验：了解百炼大模型平台与 OpenAI SDK (12:10)
• 视频：8-12 AI 初体验：使用 OpenAI SDK 对接百炼大模型 (11:01)
• 视频：8-13 重构错误处理插件（errorPlugin）与 cleanSqlError 处理 sql 错误 (20:34)
• 视频：8-14 risk风控模块 ipPlugin 插件：技术思路分析 (06:01)
• 视频：8-15 开发 ipPlugin 插件：获取满足风控业务的完整 ip 信息 (25:09)
• 视频：8-16 开发 rateLimitPlugin 插件：实现请求限流与计数器功能（上） (17:51)
• 视频：8-17 开发 rateLimitPlugin 插件：实现请求限流与计数器功能（下） (11:00)
• 视频：8-18 JWT vs Session vs Cookie：用户会话状态的技术选型分析 (04:45)
• 视频：8-19 登录&注册接口融入 JWT 签发策略 (05:45)
• 视频：8-20 AI 风控：基于 OpenAI SDK 的 json 模式 (09:53)
• 视频：8-21 AI 风控：基于 OpenAI SDK 的 Function Call (09:56)

第9章 AI 风控进阶版–基于LangChain.js实现风控Agent32 节 | 490分钟

登录风控再进阶！本章通过对LangChain.js的Model、Agent等模块的学习，对之前的登录注册风控进行改造。并把手机登录、第三方登录和AI风控实现完美融合。

收起列表

• 视频：9-1 登录注册之 AI 全链路风控技术方案分析 (04:34)
• 视频：9-2 为什么选择 LangChain.js 作为 AI Agent 框架？ (06:57)
• 视频：9-3 LangChain 核心技术之Model 模型与 Agent 智能体 (19:52)
• 视频：9-4 LangChain 核心技术之Zod、JSON 输出与 Tool 工具绑定 (09:53)
• 视频：9-5 端侧风控前哨：前端设备指纹生成与请求头合规化注入 (08:32)
• 视频：9-6 手机号登录：完善前端短信验证码逻辑 (11:39)
• 视频：9-7 手机号登录：接入阿里云短信服务，发送手机验证码 (22:39)
• 视频：9-8 手机号登录：实现验证码校验和手机号码登录接口口 (20:52)
• 视频：9-9 第三方登录方案：基于 OAuth 2.0 协议的标准授权原理分析 (08:10)
• 视频：9-10 第三方登录落地：配置 GitHub OAuth 应用&实现前端逻辑 (18:15)
• 视频：9-11 第三方登录落地：开发后端登录接口&githubService (25:11)
• 视频：9-12 数据库高阶：枚举、索引、多表联合查询技术 (13:23)
• 视频：9-13 AI 风控数据库：设计用户风控画像与审计流水表 (14:31)
• 视频：9-14 AI 风控数据库：用户风控画像与审计流水 Drizzle Schema (15:58)
• 视频：9-15 AI 风控引擎：基于 LangChain 实现智算网关 (10:16)
• 视频：9-16 AI 风控引擎：基于 LangChain tool 模拟账号与设备检测 (05:02)
• 视频：9-17 AI 风控引擎：设计user_devices用户设备表和schema (14:15)
• 视频：9-18 AI 风控引擎：实现 LangChain 设备与账户检测 tool (42:01)
• 视频：9-19 AI 风控引擎：基于策略模式构建动态风控引擎 (27:38)
• 视频：9-20 AI 风控引擎：开发前端设备信息获取工具 (22:07)
• 视频：9-21 AI 风控引擎：请求头增加device&升级 Elysia 插件 (08:53)
• 视频：9-22 AI 风控引擎：风控拦截的三阶段架构分析 (04:58)
• 视频：9-23 AI 风控引擎：风控 service 模块化升级 (13:05)
• 视频：9-24 AI 风控引擎：实现风控前置拦截逻辑&测试 (16:15)
• 视频：9-25 AI 风控引擎：实现风控后置拦截逻辑之资产打卡 (17:04)
• 视频：9-26 AI 风控引擎：完成风控后置拦截逻辑 (27:58)
• 视频：9-27 AI 风控引擎：人机二次验证架构分析&系统配置 (10:53)
• 视频：9-28 AI 风控引擎：实现阿里云验证码服务 (09:40)
• 视频：9-29 AI 风控引擎：实现二次验证的后端逻辑 (19:47)
• 视频：9-30 AI 风控引擎：实现CaptchaModel全局验证码组件 (16:44)
• 视频：9-31 AI 风控引擎：实现二次验证的前端逻辑 (11:39)
• 视频：9-32 AI 风控引擎：基于提示词工程优化风控业务 (10:23)

第10章 用户端–基于 Daisy UI+Elysia.js 开发首页 UI 界面31 节 | 490分钟

本章使用Elysia.js、tailwind、daisy ui、shadcn ui、canvas等技术开发一个漂亮的社交媒体首页。页面的核心内容是帖子发布和展示，并使用Elysia.js完成基础接口的开发工作。

收起列表

• 视频：10-1 用户端首页模块技术分析与收获 (09:16)
• 视频：10-2 解读 React 并发渲染模式，让 UI 更流畅、体验更佳 (07:23)
• 视频：10-3 React 使用 lazy 和 Suspense，懒加载组件、提升应用体验 (10:34)
• 视频：10-4 React useDeferredValue，延迟非必要更新，提升用户体验 (16:13)
• 视频：10-5 React startTransition，把状态更新标记为非阻塞用户操作 (08:44)
• 视频：10-6 React useTransition，显示过渡状态是否正在进行 (06:34)
• 视频：10-7 React use()，在组件内直接使用 Promise、context 的值 (17:34)
• 视频：10-8 React useOptimistic：实现乐观更新的高效工具 (28:00)
• 视频：10-9 ReactDOM createPortal：实现 DOM 元素的灵活渲染 (13:58)
• 视频：10-10 ReactDOM flushSync，确保状态更新的及时性 (09:05)
• 视频：10-11 React 性能优化之 memo，避免组件重复渲染的得力助手 (20:12)
• 视频：10-12 React 性能优化之 useMemo：组件重新渲染时使用缓存数据 (15:34)
• 视频：10-13 React 性能优化之 useCallback：在组件多次渲染中缓存函数 (13:52)
• 视频：10-14 React useActionState：表单交互、状态管理的精准利器 (22:56)
• 视频：10-15 ReactDOM useFormStatus，简化表单提交时候的状态管理 (14:58)
• 视频：10-16 React useReducer：复杂状态管理的高效方式 (18:48)
• 视频：10-17 React Context：跨组件状态共享的优雅方案 (17:30)
• 视频：10-18 React useSyncExternalStore：订阅外部数据源的标准化方案 (16:19)
• 视频：10-19 基于 AI+daisyUI+lucide-react 生成首页的 UI 界面 (10:18)
• 视频：10-20 创建 PostgreSQL 帖子表与点赞表及 Drizzle Schema (19:45)
• 视频：10-21 开发 Elysia 插件用于获取用户信息 (13:12)
• 视频：10-22 基于 Elysia+Drizzle 开发帖子发布接口 (16:09)
• 视频：10-23 开发阿里云 OSS 签名接口 (16:51)
• 视频：10-24 文件上传组件：前端直传 OSS (39:22)
• 视频：10-25 开发前端帖子发布组件 CreatePost（上） (08:12)
• 视频：10-26 开发前端帖子发布组件 CreatePost（下） (17:35)
• 视频：10-27 Drizzle Relations 的优势和应用 (19:32)
• 视频：10-28 基于 Drizzle Relations 与游标技术开发帖子列表接口 (28:53)
• 视频：10-29 帖子列表组件 PostList 的前后端联调 (21:20)
• 视频：10-30 使用 dayjs 对时间展示进行美化 (04:58)
• 视频：10-31 使用 useQueryClient 自动触发更新 (05:31)

第11章 用户端–LangChain+assistant ui+RAG实现多模态聊天持续更新

本章重点基于 LangChain.js 与 assistant-ui 构建一个有趣的多模态AI聊天模块，利用 pgvector 实现知识库检索。支持多模态输入处理，通过 RAG 技术为用户提供问答。

第12章 用户端–LangGraph.js打造AI自动推荐智能体持续更新

本章采用 LangGraph.js 进行流程编排，结合 Elysia 的定时任务处理。系统能够深度解析用户兴趣，通过 Handoff 模式自动流转任务，实现从内容捕捉到个性化资讯的“主动式”精准推送。

第13章 用户端–LangGraph.js+PG实现混合检索与AI搜索智能体持续更新

复杂搜索不用愁！本章融合 PG 全文检索、AI Text-to-SQL 与 Tavily 联网搜索。利用 LangGraph.js 的状态机控制搜索深度，支持从社区私有数据到全网实时动态的无缝检索，解决复杂语义下的搜索长尾问题。

第14章 用户端–DeepAgents 打造AI自主执行智能体持续更新

有明确的流程到AI自主执行，本章使用 DeepAgents.js 的自主规划与工具调用能力，将用户模糊的复合指令动态拆解为具有依赖关系的任务流。无需后台硬编码，在端侧即可自主驱动多步执行链路，最终向用户交付高确定性的生成结果。…

第15章 用户端–Redis助力短链生成：让故事分享更有力持续更新

网址太长？不怕！本章教你用Elysia.js和Redis打造短链接神器，让社交应用中的分享变得轻松又有趣，网址也能“瘦身”成功！

第16章 用户端–基于 Web Socket + AI 开发好友聊天功能持续更新

本章设计多个前沿且热门的技术，使用 Web Socket 、IndexedDB、Web Worker 等开发好友聊天功能。无论是做项目还是准备面试，都大有裨益！

第17章 管理端–TanStack Start开发全栈后台管理系统持续更新

在适合的场景，用更适合的工具，才是真正的一举多得，在这章中将带领大家梳理TanStack Start的必备知识，以及开发amdin后台管理系统。

第18章 管理端–基于Mastra+MCP+Copilotkit开发AI数据分析智能体持续更新

运营数据在手，分析需求紧跟！AI大模型解锁新可能！基于Mastra.js、MCP、Copilotkit、AI Elements等前沿技术，打造数据分析智能体，让数据说话更有趣！

第19章 管理端–开发用户权限管理模块持续更新

本章基于RBAC模式设计开发用户权限管理模块，支持用户管理、权限编辑、角色设定等功能。

第20章 AI+UI测试自动化测试之Playwright持续更新

UI测试不可小觑，微软Playwright来助力！本章解锁基于Mastra实现浏览器AI自动化测试，让测试工作变得轻松又有趣！

第21章 Bug无处遁形 vs 老板无话可说：系统监控系统搭建实战持续更新

确保项目无忧，监控是关键！先使用Sentry、LangSmith等进行错误追踪，再动手打造专属监控系统，让bug无处遁形！

第22章 项目部署不用愁：Jenkins+Git+Docker 组合打造CI/CD流水线持续更新

告别繁琐的手动发布，本章学习如何实现项目的持续集成CI和持续交付CD。涉及到Jenkins、GitLib、GitHub、Docker等技术栈。