课程介绍

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