Nextjs + Tailwind + Trpc + DrizzleORM + Serverless， 从构思到部署 ，助你完成开发者到服务提供者的蜕变

*   第1章 课程介绍/

  *   1-1 快速晋级“高薪”前端工程师，你准备好了吗？.mp4 09:51

  *   1-2 为什么选择这个课题？因为全栈是前端的未来.mp4 09:28

  *   1-3 一个能完整展现全栈技术的SaaS项目.mp4 08:52

  *   1-4 实例调研，看看真实运行着的Saas系统.mp4 08:14

*   第2章 项目和技术介绍/

  *   2-1 课程项目展示，通过这个项目你能学到什么？.mp4 10:42

  *   2-2 前端全栈技术选型梗概，你有哪些选择？.mp4 10:59

  *   2-3 Nextjs核心亮点技术剖析，为什么Nextjs能有这么多的使用量？.mp4 14:07

  *   2-4 新时代的Nextjs技术体验.mp4 16:01

  *   2-5 Saas的一大特征，第三方集成我们如何实现？.mp4 05:13

  *   2-6 为什么要考虑跨框架组件开发？我们有哪些选择.mp4 09:28

  *   2-7 样式方案选择，为什么Tailwind会是最后的赢家？.mp4 14:39

  *   2-8 其他技术选型梗概.mp4 06:55

  *   2-9 【知识图解】开发环境搭建

*   第3章 创建项目搭建基础设施/

  *   3-1 通过create next app命令来创建项目.mp4 05:00

  *   3-2 Shadcn ui + radix primitives，如何打造超强用户体验的组件.mp4 18:47

  *   3-3 第一个页面，创建App，如何利用TW的生态快速搭建.mp4 09:00

  *   3-4 通过docker安装数据库 ，更轻松搭建本地开发环境.mp4 08:00

  *   3-5 Why drizzle, Node ORM生态介绍（上）.mp4 12:12

  *   3-6 Why drizzle, Node ORM生态介绍（下）.mp4 10:46

  *   3-7 如何通过drizzle orm连接数据库？.mp4 20:23

  *   3-8 Auth是个麻烦的事情，next auth帮我们解决问题.mp4 12:32

  *   3-9 账号密码不安全？把gitlab ouath并集成到next auth（上）.mp4 13:37

  *   3-10 账号密码不安全？把gitlab ouath并集成到next auth（下）.mp4 12:03

  *   3-11 如何通过next auth保护你的特定路由？.mp4 20:22

  *   3-12 如何在Nextjs中实现API.mp4 19:32

  *   3-13 保证安全!用zod来做API校验.mp4 16:44

  *   3-14 zod+drizzle，无需重复声明的schema.mp4 13:46

  *   3-15 Trpc引入，全栈typesafe是怎么做到的.mp4 25:16

  *   3-16 TRPC context如何帮助我们管理服务.mp4 18:46

  *   3-17 TRPC在client端的集成.mp4 26:01

*   第4章 核心业务文件上传功能实现/

  *   4-1 什么是云存储？AWS S3服务体验学习.mp4 17:47

  *   4-2 AWS不好申请？用腾讯云COS代替.mp4 08:39

  *   4-3 上传也是个麻烦事，Uppy如何帮我们解决核心逻辑？.mp4 13:19

  *   4-4 让我们开发一个基础的文件上传组件.mp4 15:03

  *   4-5 如何安全地在客户端上传文件到云服务？presigned url上传文件到COS.mp4 18:57

  *   4-6 上传的图片数据如何存储到数据库.mp4 13:00

  *   4-7 图片列表功能实现，直接预览内容.mp4 14:07

  *   4-8 上传变得更cool，如何通过拖拽来选择要上传的文件？.mp4 16:05

  *   4-9 更cool，如何通过复制粘贴来选择要上传的文件？.mp4 07:03

  *   4-10 【动手实践】学习aws sdk使用，修改presigned url生成参数看效果

*   第5章 图片上传dashboard优化/

  *   5-1 美化上传按钮，符合我们的调性.mp4 05:25

  *   5-2 引入dialog，用于上传前预览文件信息.mp4 10:16

  *   5-3 提升用户体验，让用户在上传前预览文件.mp4 14:45

  *   5-4 乐观UI的强大，上传完成实时更新图片列表.mp4 14:06

  *   5-5 停一停，整理一下代码.mp4 13:51

  *   5-6 提取预览文件组件.mp4 12:04

  *   5-7 无限滚动翻页，全栈角度带你看清实现细节-part2.mp4 27:50

  *   5-8 API支持后，如何在客户端实现无限滚动.mp4 20:25

  *   5-9 支持不同的排序规则.mp4 13:43

  *   5-10 针对单个图片的操作.mp4 19:22

  *   5-11 优化操作反馈.mp4 05:17

  *   5-12 图片访问优化功能，让你的图片可以定制并且快速访问.mp4 19:16

  *   5-13 【动手实践】支持查看被删除的图片

*   第6章 文件管理功能实现/

  *   6-1 功能讲解和界面设计.mp4 03:37

  *   6-2 nextjs parallel routes实现导航和内容分离.mp4 15:33

  *   6-3 如何确保只有当前用户能看到自己上传的文件.mp4 07:14

  *   6-4 更好得管理文件，让用户可以创建多个APP.mp4 11:20

  *   6-5 创建个表单还要写API？server action帮你轻松搞定.mp4 13:03

  *   6-6 如何处理server action报错的情况？.mp4 12:47

  *   6-7 点创建就要跳转页面？intercepting routes实现路由插入，帮你解决问题.mp4 17:11

  *   6-8 既然创建了这么多app，那么我们来切换一下吧.mp4 12:57

  *   6-9 用户需要管理自己得云存储，给他这个机会.mp4 20:18

  *   6-10 新建云存储，react-hook-form表单校验做起来（上）.mp4 21:57

  *   6-11 新建云存储，react-hook-form表单校验做起来（下）.mp4 20:29

*   第7章 成为Saas，开放给第三方服务/

  *   7-1 我们可以为外界提供什么样的服务？.mp4 03:02

  *   7-2 第三方服务接入，生成API Key作于校验.mp4 28:25

  *   7-3 通过请求的API Key header来创建进行权限校验.mp4 11:55

  *   7-4 如何使用生成的API Key？让我们创建一个nuxt项目来试一试.mp4 22:04

  *   7-5 如何用pnpm mono repo来管理对外发布的package？.mp4 12:20

  *   7-6 在nuxt项目中集成api包.mp4 08:17

  *   7-7 在页面上发请求，修改cors.mp4 07:55

  *   7-8 客户端请求如何保证安全？signed token帮你解决.mp4 21:07

  *   7-9 【动手实践】将create presigned url改成使用sdk

*   第8章 通用组件开发/

  *   8-1 preact介绍，为什么preact很适合共享类组件.mp4 06:26

  *   8-2 创建一个最基础的upload button组件.mp4 17:12

  *   8-3 在vue里面使用preact组件？太神奇了吧！一个函数帮你解决.mp4.mp4 21:23

  *   8-4 上传业务逻辑接入，uppy封装.mp4 17:36

  *   8-5 把uppy和组件整合在一起，完成upload button组件.mp4 13:24

  *   8-6 再来一个dropzone组件练练手.mp4 10:42

  *   8-7 把dropzone组件也集成到nuxt项目中.mp4 25:34

  *   8-8 优化nuxt项目样式，完成一个像样地demo.mp4 22:27

  *   8-9 【动手实践】尝试把组件集成到其他技术栈的项目中

*   第9章 优化功能/

  *   9-1 打开一个不存在的app怎么处理？.mp4 10:45

  *   9-2 跳转登录之后回跳到dashboard页面.mp4 03:58

  *   9-3 暗黑色调主题切换.mp4 11:07

  *   9-4 优化dashboard排版，看起来更专业.mp4 07:26

  *   9-5 配置页面导航优化，增加返回按钮.mp4 10:45

  *   9-6 storage新增按钮完善.mp4 01:28

  *   9-7 配置页面样式优化.mp4 20:37

  *   9-8 让我们来定制一张图片的不同尺寸旋转.mp4 27:36

  *   9-9 【动手实践】没有上传文件时显示一个无文件提醒

*   第10章 服务收费/

  *   10-1 思考，一个合格的Saas是如何收费.mp4 08:08

  *   10-2 为用户增加plan字段.mp4 11:33

  *   10-3 限制免费用户的可上传文件数量.mp4 14:03

  *   10-4 想白嫖？plan升级弹框安排上.mp4 11:16

  *   10-5 限制免费用户可以创建的app数量.mp4 06:30

  *   10-6 Stripe介绍以及为什么选择Stripe.mp4 05:11

  *   10-7 接入Stripe来升级用户的plan.mp4 05:20

  *   10-8 检测用户付款结果来完成订单.mp4 18:02

  *   10-9 完成订单操作回调页面.mp4 13:40

*   第11章 项目部署/

  *   11-1 各种计算服务的区别和选择.mp4 14:42

  *   11-2 各种数据库提供商的选择.mp4 07:59

  *   11-3 Neon云数据库介绍以及集成.mp4 10:52

  *   11-4 Vercel介绍及其Devops体验.mp4 13:33

  *   11-5 完成Vercel部署.mp4 13:23