使用Next.js从零开始构建类似Canva的图形设计平台(英文版)|Udemy

在这门为期 18 小时的课程中，我们将从零开始构建一个功能丰富的图形设计 SaaS 平台。

说明

你将学习如何创建一个直观的编辑器，让用户能够自定义模板、操控文本和形状，并集成高级绘图工具。为了处理认证，我们将使用 Auth.js（Next-Auth 的新名称），掌握如何使用 Google 和 Github 等社交提供商，以及使用电子邮件和密码的传统凭证提供商。你还将学习如何使用 AI 技术去除背景，并使用像 Replicate 这样的软件根据文本生成图像。我们还将实现一个使用 Stripe 的安全订阅和计费系统。

课程内容

• 引言
• 环境搭建
• Next.js 基础
• 设置 Fabric.js
• 响应式画布
• 编辑器布局
• 编辑器导航栏
• 编辑器活动工具
• 编辑器形状侧边栏
• 编辑器形状工具
• 编辑器填充颜色工具
• 编辑器描边颜色工具
• 编辑器描边宽度工具
• 编辑器图层管理
• 编辑器透明度工具
• 编辑器文字侧边栏
• 编辑器字体家族工具
• 编辑器字体样式工具
• 编辑器字体大小工具
• 编辑器删除工具
• Hono 基础
• 编辑器图片侧边栏
• 编辑器文件上传
• 编辑器图片滤镜工具
• AI 图像生成
• AI 背景去除
• 剪贴板（复制与粘贴）
• 绘图工具
• 画布设置
• 缩放工具
• 历史记录（撤销与重做）
• 快捷键与快捷方式
• 导出与导入
• Auth.js 基础
• 数据库与 Drizzle 配置
• 自定义认证页面
• Google 登录
• 凭证登录
• Auth.js 与 Hono
• 会话提供者与用户按钮
• 主页与布局
• 项目模式与 API
• 获取现有项目
• 自动保存功能
• 项目无限加载
• 复制项目功能
• 删除项目功能
• 模板功能
• 模板侧边栏
• 订阅界面
• 订阅 API
• 在 Vercel 上部署

课程目录：

01.  Intro.mp4
01.  Intro.srt
01.  Intro.vtt
02.  Setup.mp4
02.  Setup.srt
02.  Setup.vtt
03.  Basics of Next.js.mp4
03.  Basics of Next.js.srt
03.  Basics of Next.js.vtt
04.  Setting up Fabric.js.mp4
04.  Setting up Fabric.js.srt
04.  Setting up Fabric.js.vtt
05.  Responsive Canvas.mp4
05.  Responsive Canvas.srt
05.  Responsive Canvas.vtt
06.  Editor Layout.mp4
06.  Editor Layout.srt
06.  Editor Layout.vtt
07.  Editor Navbar.mp4
07.  Editor Navbar.srt
07.  Editor Navbar.vtt
08.  Editor Active Tool.mp4
08.  Editor Active Tool.srt
08.  Editor Active Tool.vtt
09.  Editor Shape Sidebar.mp4
09.  Editor Shape Sidebar.srt
09.  Editor Shape Sidebar.vtt
10.  Editor Shape Tool.mp4
10.  Editor Shape Tool.srt
10.  Editor Shape Tool.vtt
11.  Editor Fill Color Tool.mp4
11.  Editor Fill Color Tool.srt
11.  Editor Fill Color Tool.vtt
12.  Editor Stroke Color Tool.mp4
12.  Editor Stroke Color Tool.srt
12.  Editor Stroke Color Tool.vtt
13.  Editor Stroke Width Tool.mp4
13.  Editor Stroke Width Tool.srt
13.  Editor Stroke Width Tool.vtt
14.  Editor Layering.mp4
14.  Editor Layering.srt
14.  Editor Layering.vtt
15.  Editor Opacity Tool.mp4
15.  Editor Opacity Tool.srt
15.  Editor Opacity Tool.vtt
16.  Editor Text Sidebar.mp4
16.  Editor Text Sidebar.srt
16.  Editor Text Sidebar.vtt
17.  Editor Font Family Tool.mp4
17.  Editor Font Family Tool.srt
17.  Editor Font Family Tool.vtt
18.  Editor Font Style Tools.mp4
18.  Editor Font Style Tools.srt
18.  Editor Font Style Tools.vtt
19.  Editor Font Size Tool.mp4
19.  Editor Font Size Tool.srt
19.  Editor Font Size Tool.vtt
20.  Editor Delete Tool.mp4
20.  Editor Delete Tool.srt
20.  Editor Delete Tool.vtt
21.  Basics of Hono.mp4
21.  Basics of Hono.srt
21.  Basics of Hono.vtt
22.  Editor Image Sidebar.mp4
22.  Editor Image Sidebar.srt
22.  Editor Image Sidebar.vtt
23.  Editor File Upload.mp4
23.  Editor File Upload.srt
23.  Editor File Upload.vtt
24.  Editor Image Filter Tool.mp4
24.  Editor Image Filter Tool.srt
24.  Editor Image Filter Tool.vtt
25.  AI Image Generation.mp4
25.  AI Image Generation.srt
25.  AI Image Generation.vtt
26.  AI Background Removal.mp4
26.  AI Background Removal.srt
26.  AI Background Removal.vtt
27.  Clipboard (Copy & Paste).mp4
27.  Clipboard (Copy & Paste).srt
27.  Clipboard (Copy & Paste).vtt
28.  Drawing Tool.mp4
28.  Drawing Tool.srt
28.  Drawing Tool.vtt
29.  Canvas Settings.mp4
29.  Canvas Settings.srt
29.  Canvas Settings.vtt
30.  Zoom Tool.mp4
30.  Zoom Tool.srt
30.  Zoom Tool.vtt
31.  History (Undo & Redo).mp4
31.  History (Undo & Redo).srt
31.  History (Undo & Redo).vtt
32.  Hotkeys & Shortcuts.mp4
32.  Hotkeys & Shortcuts.srt
32.  Hotkeys & Shortcuts.vtt
33.  Export & Import.mp4
33.  Export & Import.srt
33.  Export & Import.vtt
34.  Basics of Auth.js.mp4
34.  Basics of Auth.js.srt
34.  Basics of Auth.js.vtt
35.  Database & Drizzle Setup.mp4
35.  Database & Drizzle Setup.srt
35.  Database & Drizzle Setup.vtt
36.  Custom Auth Pages.mp4
36.  Custom Auth Pages.srt
36.  Custom Auth Pages.vtt
37.  Google Login.mp4
37.  Google Login.srt
37.  Google Login.vtt
38.  Credentials Login.mp4
38.  Credentials Login.srt
38.  Credentials Login.vtt
39.  Auth.js & Hono.mp4
39.  Auth.js & Hono.srt
39.  Auth.js & Hono.vtt
40.  Session Provider & User Button.mp4
40.  Session Provider & User Button.srt
40.  Session Provider & User Button.vtt
41.  Home Page & Layout.mp4
41.  Home Page & Layout.srt
41.  Home Page & Layout.vtt
42.  Projects Schema & API.mp4
42.  Projects Schema & API.srt
42.  Projects Schema & API.vtt
43.  Fetch Existing Project.mp4
43.  Fetch Existing Project.srt
43.  Fetch Existing Project.vtt
44.  Autosave Feature.mp4
44.  Autosave Feature.srt
44.  Autosave Feature.vtt
45.  Projects Infinite Load.mp4
45.  Projects Infinite Load.srt
45.  Projects Infinite Load.vtt
46.  Duplicate a Project Feature.mp4
46.  Duplicate a Project Feature.srt
46.  Duplicate a Project Feature.vtt
47.  Delete a Project Feature.mp4
47.  Delete a Project Feature.srt
47.  Delete a Project Feature.vtt
48.  Templates Feature.mp4
48.  Templates Feature.srt
48.  Templates Feature.vtt
49.  Templates Sidebar.mp4
49.  Templates Sidebar.srt
49.  Templates Sidebar.vtt
50.  Subscriptions UI.mp4
50.  Subscriptions UI.srt
50.  Subscriptions UI.vtt
51.  Subscriptions API.mp4
51.  Subscriptions API.srt
51.  Subscriptions API.vtt
52.  Deployment on Vercel.mp4
52.  Deployment on Vercel.srt
52.  Deployment on Vercel.vtt
Build a Canva clone.txt
code.zip