在当今互联网行业，前端开发、SaaS 产品架构、产品设计已成为打造高效、用户友好产品的必备技能。但现实往往是，课堂上的知识听起来很美，动起手来却一脸懵。许多在校大学生在实际开发和团队协作中摸爬滚打，才发现自己还差“临门一脚”——缺少系统化的实践经验和项目积累。
FullStack Compass 共学计划就是为此而生！我们在真实开发环境中“真刀真枪”地上手，深度掌握TypeScript、React、Next.js等现代前端技术栈，提升工程实战能力，一步步构建属于自己的高质量作品集。
告别“纸上谈兵”，加入 FullStack Compass 共学计划，解锁现代 Web 技术栈，打造属于你的全栈产品！ 🚀
在 FullStack Compass 共学中，我们将专注于前端开发、SaaS 架构、产品设计三大方向，旨在通过最新的技术栈和项目实践构建扎实的开发能力，并为未来职业发展奠定基础。
共学内容涵盖以下核心主题：
- 前端开发
- 掌握 TypeScript、React、Next.js 等现代前端框架，构建高效、可维护的 Web 应用。
- 利用 Tailwind CSS 进行快速样式开发，提升 UI 设计效率和一致性。
- 使用 MDX 实现文档驱动的内容管理，提高可维护性和可读性。
- SaaS 架构
- 深入理解 SaaS 业务模型，学习如何利用 Next.js 进行全栈开发（Server-side Rendering、API Routes）。
- 结合 Shiki 进行代码高亮与文档生成，打造开发者友好的平台。
- 了解 SaaS 应用的部署、性能优化及可扩展架构设计。
- 产品设计
- 通过 React Spring 和 Framer Motion 创建流畅的动画交互效果，提升用户体验。
- 学习 Linaria 进行零运行时的 CSS-in-JS 方案，实现高效的样式管理。
- 结合设计思维，打造美观、易用、响应式的 Web 应用界面。
SaaS、Typescript、React、Nextjs、Taildwindcss、MDX、Linaria、Shiki、React Spring、Motion、产品设计
报名：报名时间从 2025 年 01 月 27 日开始，截止 2025 年 02 月 02 日，之后不再接受报名。
共学：从 2025 年 02 月 03 日开始，到 2025 年 02 月 23 日，共 21 天。
学习方式包括：任务学习、定期分享以及项目实战。
- 希望系统学习 TypeScript、React、Next.js、Tailwind CSS 等现代前端技术的开发者。
- 对 SaaS 产品开发 感兴趣，想要学习如何从 0 到 1 构建和部署完整的 Web 应用。
- 计划积累项目经验，构建自己的作品集，为求职做好准备的同学。
- 乐于分享和探索新技术的学习者。
- 掌握 TypeScript + React + Next.js 现代前端技术栈，具备从前端到后端的开发能力。
- 通过共学经历，丰富简历内容，增强技术面试的自信心。
Next.js 与 TailwindCSS 文档
- NextjsDoc: Next.js 官方文档，了解服务器端渲染、静态生成等现代前端框架功能。
- TailwindcssDoc: TailwindCSS 的快速入门指南，轻松掌握实用的原子化 CSS。
实用 UI 库
- shadcn: 基于 TailwindCSS 的现代化 UI 组件库。
- aceternity: 提供多种交互式组件，注重响应式设计。
- magicui: 创意十足的 UI 组件库，提供独特的效果。
- reactbits: 专注于小型 React 组件集合，适合简单项目。
- devui: 美观实用的组件库，支持多种应用场景。
- hyperui: 免费的 TailwindCSS 组件库，支持快速开发。
- cuicui: 现代化、优雅的 React 组件库。
- tailusUI: 提供丰富的 React UI 组件，助力快速开发。
- flowbite: 结合 TailwindCSS 的高质量组件库。
- heroui: 设计精美、功能强大的 React 组件库。
设计参考
- mobbin: 汇总优质设计案例，适合灵感来源和设计借鉴。
- 2025 年 web 设计趋势
设计工具
- figma: 流行的协作式界面设计工具。
- framer: 支持交互式原型制作与高效设计。
- framer 简短视频教程: Framer 快速入门视频教程，适合新手快速学习。
格式化工具
- biomejs: 代码格式化和检查工具，提升代码规范性。
动画效果
- motion: 强大的 React 动画库，轻松实现流畅的交互效果。
- react-spring: 功能强大的动画库，支持基于物理的交互和流畅效果。
低饱和配色生成
- grayscale.design: 自动生成柔和低饱和的配色方案，适合高级设计需求。
一站式后端服务
认证服务
- clerk: 简单易用的用户认证和管理解决方案。
ORM
- prisma: 功能强大的 ORM 工具，支持多种数据库操作。
实战项目
- 全栈社交 SaaS 应用: 手把手教你构建一个全栈社交平台的完整教程，适合进阶学习者。
内容处理
- MDX: 将 Markdown 与 JSX 结合的工具，可在 Markdown 中直接使用 React 组件。
-
Fork 这个仓库
-
编辑报名信息：复制 Template_FullStack_Compass.md 创建你的个人学习笔记，按照文档内提示要求填写你的报名信息，并且重命名为你的名字：[YourName]_FullStack_Compass.md。
-
提交 PR： 创建一个 PR 到当前仓库，我们会对你的 PR 进行 review，review 通过后，你的 PR 会被 merge 到 main 分支。「共学记录表」之后会登记你的名字，即报名成功。
报名成功后，你会收到邀请加入这个仓库 contribution 的邮件（请记得接受邀请），接受邀请后你将获得 main 分支的 push 权限。
正式打卡开始后，你需要将每天「学习笔记证明」按正确的编写要求更新到你的 [YourName]_FullStack_Compass.md 文档中证明你今天学习了，提交成功后仓库会更新你的打卡状态，请注意核实。每周有五次请假的机会，超过后状态变为 ❌，视为本次共学失败。
详细步骤可以参考：https://learning.bibibai.top/docs/introduction/tutorial
✅ = Done ⭕️ = Missed ❌ = Failed
| 2.03 | 2.04 | 2.05 | 2.06 | 2.07 | 2.08 | 2.09 | 2.10 | 2.11 | 2.12 | 2.13 | 2.14 | 2.15 | 2.16 | 2.17 | 2.18 | 2.19 | 2.20 | 2.21 | 2.22 | 2.23 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| echozyr2001 | ✅ | ✅ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | |||||
| Kirov7 | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ❌ | |||||||||||||||
| Hoshino | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | |||||
| RisingGalaxy | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | |||||
| YamKH514 | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ❌ | |||||||
| DriveFLY | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ❌ | |||||||
| Makise | ⭕️ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ | ✅ | ✅ | ✅ | |||||
| DemoJustLuGuo | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | |||||
| AmberHeart | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ✅ | ✅ | ✅ | ✅ | ⭕️ | ⭕️ | ⭕️ | ⭕️ | ⭕️ |
参与人数：TODO
完成人数：TODO
全勤人数：TODO
完成率：TODO