背景故事
身份： 建筑师/设计师 | 前端学习者（2个月）
技能基础：
前端代码：2个月自学入门- 平面UI设计原理：建筑师背景，能基本理解
后端/数据库：无相关经验- 服务器运维：无相关经验
学习与探索历程
第一阶段：AI生成工具的好奇心
学习前端初期 → 尝试AI生成网页工具 → 发现静态网页除了展示，缺乏实际功能价值
第二阶段：实际问题驱动需求
工作中遇到网页管理痛点：
- 书签/插件管理：插件收费、体验不佳
- 数据留存问题：浏览器同步麻烦
- 无法24小时访问：依赖设备
第三阶段：动手解决问题的决心
核心想法： 打造一个属于自己的网页导航站
集中管理所有常用网站
数据本地存储，安全可控
24小时可访问
界面美观，符合审美
技术选型与学习挑战 遇到的核心问题
- 添加网站功能 → 需要 后端API
- 保存数据 → 需要 数据库
- 24小时运行 → 需要 服务器
- 本地管理 → 需要 容器化部署
突破困境：Trae IDE + Vibe Coding “如果没有Trae IDE，对我一个外行跑通全流程是难以想象”
工具助力：
Trae IDE：AI辅助编程，降低学习门槛
Vibe Coding：快速验证想法，加速开发
边做边学：在实战中积累经验 最终技术架构
作品展示
技术栈：
前端需求：美观、响应式、易用
├─ React 18.3.1：组件化开发
├─ Vite 6.3.5：快速构建工具
├─ Tailwind CSS 4.1.12：现代CSS框架
├─ MUI 7.3.5：专业UI组件库
└─ Radix UI + TypeScript：可访问性 + 类型安全
↓
后端需求：简单、可靠、易维护
├─ Node.js 18：JavaScript运行时
├─ Express 4.18.2：轻量API框架
└─ MySQL 8.0：关系型数据库
↓
部署需求：本地化、隔离、易管理
├─ Docker & Docker Compose：容器化部署
├─ Nginx：高性能前端服务器
└─ Portainer：可视化容器管理
技术能力提升：
-
从前端到全栈：理解前后端协作
-
从代码到部署：掌握DevOps基础
-
从本地到容器：Docker容器化思维
-
从学习到实践：完成完整项目闭环
-
认知升级：
-
理解技术选型的"为什么"
-
体验完整产品开发流程
-
认识知识边界，为下一步学习指明方向
下一步学习方向
已知的成长空间：
- 后端深度：更复杂的业务逻辑
安全加固：身份验证、权限管理
性能优化：缓存、CDN、数据库调优
可扩展性：代码架构、设计模式
给其他小白的建议 “不要害怕技术栈多，每学一样都是进步的开始”
- 从小做起 ：一个功能比空想更值钱
- 工具加持 ：善用AI工具降低学习门槛
- 问题驱动 ：在实际问题中学习最有效
- 持续迭代 ：MVP先行，逐步完善