设为首页 收藏本站
开启辅助访问 切换到宽版 快捷导航
菜单
猿人部落»广场 › 功能 › 课程 › 前端全栈进阶 Nextjs打造跨框架SaaS应用(完结) ...

编辑推荐

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
12下一页
返回列表 发新帖

前端全栈进阶 Nextjs打造跨框架SaaS应用(完结)

[复制链接]
admin发表于 2024-4-29 13:37:31 | 显示全部楼层 |阅读模式
前端全栈进阶 Nextjs打造跨框架SaaS应用(完结)
主讲:Jokcy课时:时长：共 22 小时 30 分钟
快速晋级“高薪”前端工程师，你准备好了吗？本课程将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术，亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署，再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能，助力你实现从开发者到服务提供者的进阶！成为行业急需的高薪人才！
售价 : 38金钱
提取码 : 购买后方可查看
立即购买

课程介绍

QQ截图20240429120806.png
QQ截图20240429120816.png


前端全栈进阶 Nextjs打造跨框架SaaS应用

Nextjs + Tailwind + Trpc + DrizzleORM + Serverless， 从构思到部署 ，助你完成开发者到服务提供者的蜕变
快速晋级“高薪”前端工程师，你准备好了吗？本课程将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术，亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署，再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能，助力你实现从开发者到服务提供者的进阶！成为行业急需的高薪人才！

适合人群
期望提升全栈能力、突破职场壁垒的开发者

技术储备
了解React基础 （如果有丰富的其他框架开发经验也可）
了解 Node js基础
熟悉数据库基本操作

环境参数
next 14.1.0
react ^18
drizzle-orm ^0.29.1
react-dom ^18
tailwindcss ^3.3.0
@trpc/client 11
@trpc/react-query 11
@trpc/server 11
@tanstack/react-query ^5.17.0
@uppy/core ^3.8.0


试看链接：https://pan.baidu.com/s/1w5br-7Zm-x68fcAXxOVO4Q?pwd=fk85


目录大纲：

第1章 课程介绍
4 节｜37分钟
收起
视频：
1-1 快速晋级“高薪”前端工程师，你准备好了吗？
试看
09:51
视频：
1-2 为什么选择这个课题？因为全栈是前端的未来
09:28
视频：
1-3 一个能完整展现全栈技术的SaaS项目
08:52
视频：
1-4 实例调研，看看真实运行着的Saas系统
08:14
第2章 项目和技术介绍
9 节｜89分钟
收起
视频：
2-1 课程项目展示，通过这个项目你能学到什么？
10:42
视频：
2-2 前端全栈技术选型梗概，你有哪些选择？
10:59
视频：
2-3 Nextjs核心亮点技术剖析，为什么Nextjs能有这么多的使用量？
14:07
视频：
2-4 新时代的Nextjs技术体验
试看
16:01
视频：
2-5 Saas的一大特征，第三方集成我们如何实现？
05:13
视频：
2-6 为什么要考虑跨框架组件开发？我们有哪些选择
09:28
视频：
2-7 样式方案选择，为什么Tailwind会是最后的赢家？
14:39
视频：
2-8 其他技术选型梗概
06:55
图文：
2-9 【知识图解】开发环境搭建
第3章 创建项目搭建基础设施
17 节｜263分钟
收起
视频：
3-1 通过create next app命令来创建项目
05:00
视频：
3-2 Shadcn ui + radix primitives，如何打造超强用户体验的组件
18:47
视频：
3-3 第一个页面，创建App，如何利用TW的生态快速搭建
09:00
视频：
3-4 通过docker安装数据库 ，更轻松搭建本地开发环境
08:00
视频：
3-5 Why drizzle, Node ORM生态介绍（上）
12:12
视频：
3-6 Why drizzle, Node ORM生态介绍（下）
10:46
视频：
3-7 如何通过drizzle orm连接数据库？
20:23
视频：
3-8 Auth是个麻烦的事情，next auth帮我们解决问题
12:32
视频：
3-9 账号密码不安全？把gitlab ouath并集成到next auth（上）
13:37
视频：
3-10 账号密码不安全？把gitlab ouath并集成到next auth（下）
12:03
视频：
3-11 如何通过next auth保护你的特定路由？
20:22
视频：
3-12 如何在Nextjs中实现API
试看
19:32
视频：
3-13 保证安全!用zod来做API校验
16:44
视频：
3-14 zod+drizzle，无需重复声明的schema
13:46
视频：
3-15 Trpc引入，全栈typesafe是怎么做到的
25:16
视频：
3-16 TRPC context如何帮助我们管理服务
18:46
视频：
3-17 TRPC在client端的集成
26:01
第4章 核心业务文件上传功能实现
10 节｜124分钟
展开
第5章 图片上传dashboard优化
13 节｜177分钟
收起
视频：
5-1 美化上传按钮，符合我们的调性
05:25
视频：
5-2 引入dialog，用于上传前预览文件信息
10:16
视频：
5-3 提升用户体验，让用户在上传前预览文件
14:45
视频：
5-4 乐观UI的强大，上传完成实时更新图片列表
14:06
视频：
5-5 停一停，整理一下代码
13:51
视频：
5-6 提取预览文件组件
12:04
视频：
5-7 无限滚动翻页，全栈角度带你看清实现细节-part2
27:50
视频：
5-8 API支持后，如何在客户端实现无限滚动
20:25
视频：
5-9 支持不同的排序规则
13:43
视频：
5-10 针对单个图片的操作
19:22
视频：
5-11 优化操作反馈
05:17
视频：
5-12 图片访问优化功能，让你的图片可以定制并且快速访问
19:16
图文：
5-13 【动手实践】支持查看被删除的图片
第6章 文件管理功能实现
11 节｜157分钟
收起
视频：
6-1 功能讲解和界面设计
03:37
视频：
6-2 nextjs parallel routes实现导航和内容分离
15:33
视频：
6-3 如何确保只有当前用户能看到自己上传的文件
07:14
视频：
6-4 更好得管理文件，让用户可以创建多个APP
11:20
视频：
6-5 创建个表单还要写API？server action帮你轻松搞定
13:03
视频：
6-6 如何处理server action报错的情况？
12:47
视频：
6-7 点创建就要跳转页面？intercepting routes实现路由插入，帮你解决问题
17:11
视频：
6-8 既然创建了这么多app，那么我们来切换一下吧
12:57
视频：
6-9 用户需要管理自己得云存储，给他这个机会
20:18
视频：
6-10 新建云存储，react-hook-form表单校验做起来（上）
21:57
视频：
6-11 新建云存储，react-hook-form表单校验做起来（下）
20:29
第7章 成为Saas，开放给第三方服务
9 节｜116分钟
收起
视频：
7-1 我们可以为外界提供什么样的服务？
03:02
视频：
7-2 第三方服务接入，生成API Key作于校验
28:25
视频：
7-3 通过请求的API Key header来创建进行权限校验
11:55
视频：
7-4 如何使用生成的API Key？让我们创建一个nuxt项目来试一试
22:04
视频：
7-5 如何用pnpm mono repo来管理对外发布的package？
12:20
视频：
7-6 在nuxt项目中集成api包
08:17
视频：
7-7 在页面上发请求，修改cors
07:55
视频：
7-8 客户端请求如何保证安全？signed token帮你解决
21:07
图文：
7-9 【动手实践】将create presigned url改成使用sdk
第8章 通用组件开发
9 节｜135分钟
收起
视频：
8-1 preact介绍，为什么preact很适合共享类组件
06:26
视频：
8-2 创建一个最基础的upload button组件
17:12
视频：
8-3 在vue里面使用preact组件？太神奇了吧！一个函数帮你解决.mp4
21:23
视频：
8-4 上传业务逻辑接入，uppy封装
17:36
视频：
8-5 把uppy和组件整合在一起，完成upload button组件
13:24
视频：
8-6 再来一个dropzone组件练练手
10:42
视频：
8-7 把dropzone组件也集成到nuxt项目中
25:34
视频：
8-8 优化nuxt项目样式，完成一个像样地demo
22:27
图文：
8-9 【动手实践】尝试把组件集成到其他技术栈的项目中
第9章 优化功能
9 节｜94分钟
收起
视频：
9-1 打开一个不存在的app怎么处理？
10:45
视频：
9-2 跳转登录之后回跳到dashboard页面
03:58
视频：
9-3 暗黑色调主题切换
11:07
视频：
9-4 优化dashboard排版，看起来更专业
07:26
视频：
9-5 配置页面导航优化，增加返回按钮
10:45
视频：
9-6 storage新增按钮完善
01:28
视频：
9-7 配置页面样式优化
20:37
视频：
9-8 让我们来定制一张图片的不同尺寸旋转
27:36
图文：
9-9 【动手实践】没有上传文件时显示一个无文件提醒
第10章 服务收费
9 节｜94分钟
收起
视频：
10-1 思考，一个合格的Saas是如何收费
08:08
视频：
10-2 为用户增加plan字段
11:33
视频：
10-3 限制免费用户的可上传文件数量
14:03
视频：
10-4 想白嫖？plan升级弹框安排上
11:16
视频：
10-5 限制免费用户可以创建的app数量
06:30
视频：
10-6 Stripe介绍以及为什么选择Stripe
05:11
视频：
10-7 接入Stripe来升级用户的plan
05:20
视频：
10-8 检测用户付款结果来完成订单
18:02
视频：
10-9 完成订单操作回调页面
13:40
第11章 项目部署
5 节｜61分钟
收起
视频：
11-1 各种计算服务的区别和选择
14:42
视频：
11-2 各种数据库提供商的选择
07:59
视频：
11-3 Neon云数据库介绍以及集成
10:52
视频：
11-4 Vercel介绍及其Devops体验
13:33
视频：
11-5 完成Vercel部署
13:23
本课程已完结




回复

使用道具 举报

精彩评论16

0发表于 2024-4-30 00:32:48 | 显示全部楼层
挺好的
回复

使用道具 举报

0发表于 2024-4-30 02:12:29 | 显示全部楼层
我的双手也许真的可以改变这个世界！
回复

使用道具 举报

0发表于 2024-5-1 05:32:56 | 显示全部楼层
hhhhhhh-
回复

使用道具 举报

0发表于 2024-5-2 03:16:04 | 显示全部楼层
我所碰到的最好的客服，没有之一！
回复

使用道具 举报

0发表于 2024-5-3 00:38:50 | 显示全部楼层
站长你终于把这门课出来！
回复

使用道具 举报

0发表于 2024-5-5 02:30:33 | 显示全部楼层
挺好的
回复

使用道具 举报

0发表于 2024-5-14 01:22:38 | 显示全部楼层
落霞与咕噜起飞秋水共长天一色
回复

使用道具 举报

0发表于 2024-5-18 06:54:50 | 显示全部楼层
666
回复

使用道具 举报

0发表于 2024-5-22 04:29:13 | 显示全部楼层
物超所值
回复

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin
管理员

楼主最新

联系我们

微信：var186

邮箱：772441382@qq.com

关于我们
  • 联系客服
  • 客服微信

QQ| 猿人部落 ( A20190523-0239 )

Powered by Discuz! X3.4 © 2001-2013 Comsenz Inc. GMT+8, 2024-11-22 23:43 , Processed in 0.237561 second(s), 47 queries .