我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程

先上目录思维导图👇

大家好,我是程普。

前段时间,我发布了第一个出海产品 PH Copilot,是一个基于 Plasmo 开发的 Chrome 插件和 Next.js 开发的落地页与服务端的全栈产品。

现在我把这个产品的完整实现写成系统性教程,内容包含 PH Copilot 的完整实现,讲解了 Chrome 插件开发和 Next.js 全栈开发的知识,教你最适合独立开发者的出海技术栈组合,帮助你半个月内成为全栈出海工程师。

教程地址:我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程 | J实验室

技术栈组合

教程和源码包含的主要技术知识:

  • Plasmo 开发 Chrome 插件

  • Next.js 全栈开发 Web 端与服务端

  • AI 对话功能开发

  • Firebase 授权和数据库应用

  • Paddle 支付功能集成

源码和教程的价值

当时开发插件的目的之一就是想写出海全栈产品开发教程,所以在写教程的时候,我对每一个功能进行 code review 和代码优化,然后编写开发教程,整个过程花费了3周。

教程从实践角度出发,从0开始构建项目、搭建Chrome插件模板、开发功能模块,每一个步骤都单独讲解,可以帮助你渐进式学习。

源码包含 Chrome 插件端和 Next.js 端两份代码,其中 Next.js 端包含落地页和服务端功能,所有核心功能做了模块化设计,你不仅可以获得源码,还能潜移默化学会专业的代码设计方式。

从文章开头的目录思维导图你可以了解到教程包含的技术栈和知识点;我还整理了代码结构,你可以透过代码结构知道源码模块化设计的程度有多高:

// 插件端代码结构(仅展示src部分)

ph-copilot-dev-guide
├─ src
│  ├─ background
│  │  ├─ firebase
│  │  │  ├─ authService.ts
│  │  │  ├─ config.ts
│  │  │  ├─ index.ts
│  │  │  ├─ tokenManager.ts
│  │  │  └─ userService.ts
│  │  ├─ aiResponseHandler.ts
│  │  ├─ index.ts
│  │  ├─ messageHandler.ts
│  │  ├─ sendMessageToSource.ts
│  │  ├─ storageManager.ts
│  │  └─ updateChecker.ts
│  ├─ components
│  │  ├─ LanguageSwitcher
│  │  │  ├─ LanguageContext.tsx
│  │  │  ├─ index.tsx
│  │  │  ├─ translations.ts
│  │  │  └─ useTranslation.ts
│  │  └─ ui
│  │     ├─ avatar.tsx
│  │     ├─ button.tsx
│  │     ├─ card.tsx
│  │     ├─ popover.tsx
│  │     ├─ select.tsx
│  │     ├─ toggle.tsx
│  │     └─ tooltip.tsx
│  ├─ contents
│  │  ├─ components
│  │  │  ├─ ContentCommentGenerator.tsx
│  │  │  ├─ ContentOverviewGenerator.tsx
│  │  │  └─ CopilotTools.tsx
│  │  ├─ hooks
│  │  │  ├─ useDOMObserver.ts
│  │  │  └─ useUrlChangeListener.ts
│  │  ├─ styles
│  │  │  └─ content.css
│  │  ├─ utils
│  │  │  └─ constants.ts
│  │  └─ index.tsx
│  ├─ lib
│  │  ├─ constant.ts
│  │  ├─ prefixByEnv.ts
│  │  ├─ useProductDetails.ts
│  │  └─ utils.ts
│  ├─ popup
│  │  ├─ components
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ sidepanel
│  │  ├─ components
│  │  │  ├─ CommentCard.tsx
│  │  │  ├─ Header.tsx
│  │  │  ├─ OverviewCard.tsx
│  │  │  └─ UserInfoCard.tsx
│  │  ├─ hooks
│  │  ├─ styles
│  │  ├─ utils
│  │  └─ index.tsx
│  ├─ store
│  │  ├─ firebaseAuthStorage.ts
│  │  ├─ useCommentLength.ts
│  │  ├─ useLanguageStorage.ts
│  │  └─ useUserData.ts
│  ├─ types
│  │  ├─ product.ts
│  │  └─ user.ts
│  └─ style.css

```

关于我

我是一名全栈工程师,Next.js 开源手艺人,AI降临派。

今年致力于 Next.js 和 Node.js 领域的开源项目开发和知识分享。

本文教程地址:我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程 | J实验室

相关推荐
余衫马2 分钟前
Rust-Trait 特征编程
开发语言·后端·rust
JerryXZR4 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
monkey_meng5 分钟前
【Rust中多线程同步机制】
开发语言·redis·后端·rust
七星静香6 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
Jacob程序员7 分钟前
java导出word文件(手绘)
java·开发语言·word
q2498596939 分钟前
前端预览word、excel、ppt
前端·word·excel
小白学大数据14 分钟前
正则表达式在Kotlin中的应用:提取图片链接
开发语言·python·selenium·正则表达式·kotlin
小华同学ai14 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
VBA633716 分钟前
VBA之Word应用第三章第三节:打开文档,并将文档分配给变量
开发语言
半盏茶香16 分钟前
【C语言】分支和循环详解(下)猜数字游戏
c语言·开发语言·c++·算法·游戏