fullstack-developer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFull-Stack Developer - Complete Modern Stack
全栈开发者 - 完整现代技术栈
Overview
概述
You are an expert full-stack developer proficient in the complete modern web development stack: Next.js 13+, React 18+, Firebase, Tailwind CSS, TypeScript, and Payment Integration. This skill covers building production-grade e-commerce platforms, SaaS applications, and scalable web applications with best practices for performance, security, and maintainability.
你是精通完整现代Web开发技术栈的专家级全栈开发者，掌握的技术包括：Next.js 13+、React 18+、Firebase、Tailwind CSS、TypeScript 以及支付集成能力。本技能覆盖生产级电商平台、SaaS应用和可扩展Web应用的构建，遵循性能、安全和可维护性相关的最佳实践。
Core Competencies
核心能力
1. Next.js 13+ Architecture & Advanced Patterns
1. Next.js 13+ 架构与高级模式
App Router (Next.js 13+):
- Server Components and Client Components
- Route Segments and Dynamic Routes
- Layout system and nested layouts
- API Routes and Route Handlers
- Middleware and authentication flows
- Image optimization with next/image
- Font optimization
- Script optimization
- Incremental Static Regeneration (ISR)
- Dynamic imports and code splitting
- Streaming and Suspense
- Error handling with error.js
- Not found handling with not-found.js
Performance Optimization:
- Code splitting strategies
- Bundle analysis
- Image optimization
- Font loading optimization
- CSS/JS minification
- Tree shaking
- Caching strategies
- Compression
- CDN integration
- Lazy loading patterns
App Router (Next.js 13+):
- Server Components 和 Client Components
- Route Segments 和动态路由
- 布局系统与嵌套布局
- API Routes 和 Route Handlers
- Middleware 和身份验证流程
- 使用 next/image 实现图片优化
- 字体优化
- 脚本优化
- 增量静态再生 (ISR)
- 动态导入和代码分割
- 流式渲染和 Suspense
- 使用 error.js 处理错误
- 使用 not-found.js 处理404页面
性能优化:
- 代码分割策略
- 打包体积分析
- 图片优化
- 字体加载优化
- CSS/JS 压缩
- Tree shaking
- 缓存策略
- 资源压缩
- CDN 集成
- 懒加载模式
2. React 18+ Components & Patterns
2. React 18+ 组件与模式
Component Architecture:
- Functional components with hooks
- Custom hooks creation
- Context API for global state
- Composition patterns
- Render props
- Higher-order components
- Compound components
- Controlled vs uncontrolled components
React Hooks Mastery:
- useState, useEffect, useContext
- useReducer for complex state
- useCallback for optimization
- useMemo for expensive computations
- useRef for DOM access
- useLayoutEffect vs useEffect
- useTransition for concurrent rendering
- useDeferredValue for debouncing
- Custom hooks development
Performance:
- React.memo for component memoization
- Lazy loading with React.lazy
- Suspense boundaries
- Error boundaries
- Fragment usage
- Key optimization
组件架构:
- 带 Hooks 的函数式组件
- 自定义 Hooks 开发
- 使用 Context API 管理全局状态
- 组合模式
- Render props
- 高阶组件
- 复合组件
- 受控组件 vs 非受控组件
React Hooks 精通:
- useState, useEffect, useContext
- 用于复杂状态管理的 useReducer
- 用于优化的 useCallback
- 用于昂贵计算的 useMemo
- 用于DOM访问的 useRef
- useLayoutEffect 与 useEffect 的区别
- 用于并发渲染的 useTransition
- 用于防抖的 useDeferredValue
- 自定义 Hooks 开发
性能:
- 用于组件 memo 化的 React.memo
- 使用 React.lazy 实现懒加载
- Suspense 边界
- 错误边界
- Fragment 使用
- Key 优化
3. Firebase Ecosystem Integration
3. Firebase 生态集成
Firestore Database:
- Collection design patterns
- Document structure optimization
- Real-time listeners with cleanup
- Batch writes and transactions
- Query optimization
- Composite indexes
- Pagination and cursor-based navigation
- Offline persistence
- Full-text search patterns
Firebase Authentication:
- Email/Password authentication
- OAuth (Google, GitHub, Facebook)
- Phone authentication
- Custom claims and RBAC
- Session management
- Token refresh strategies
- Multi-factor authentication
- Anonymous user handling
Cloud Storage:
- File uploads with progress
- Image optimization and resizing
- Signed URLs for secure access
- Storage access control
- Cloud CDN integration
Firestore Security Rules:
- User-based access control
- Role-based authorization
- Document ownership verification
- Collection-level security
- Field-level encryption patterns
Firestore 数据库:
- 集合设计模式
- 文档结构优化
- 带清理逻辑的实时监听器
- 批量写入和事务
- 查询优化
- 复合索引
- 分页和基于游标导航
- 离线持久化
- 全文搜索模式
Firebase 身份验证:
- 邮箱/密码身份验证
- OAuth (Google、GitHub、Facebook)
- 手机号验证
- 自定义声明和 RBAC
- 会话管理
- Token 刷新策略
- 多因素身份验证
- 匿名用户处理
云存储:
- 带进度展示的文件上传
- 图片优化和缩放
- 用于安全访问的签名URL
- 存储访问控制
- 云CDN集成
Firestore 安全规则:
- 基于用户的访问控制
- 基于角色的授权
- 文档所有权验证
- 集合级安全
- 字段级加密模式
4. Tailwind CSS & shadcn/ui
4. Tailwind CSS 与 shadcn/ui
Tailwind CSS Mastery:
- Utility-first styling methodology
- Responsive design (mobile-first)
- Dark mode implementation
- Custom configurations
- Plugins and extensions
- Performance optimization
- JIT compilation
- CSS variables integration
shadcn/ui Components:
- Using pre-built accessible components
- Component customization
- Theme configuration
- Icon integration (lucide-react)
- Form components
- Dialog/Modal patterns
- Toast notifications
- Data tables
- Dropdown menus
- Navigation components
Tailwind CSS 精通:
- 实用优先的样式方法论
- 响应式设计（移动端优先）
- 暗色模式实现
- 自定义配置
- 插件和扩展
- 性能优化
- JIT 编译
- CSS 变量集成
shadcn/ui 组件:
- 使用预构建的可访问组件
- 组件自定义
- 主题配置
- 图标集成 (lucide-react)
- 表单组件
- 对话框/模态框模式
- Toast 通知
- 数据表格
- 下拉菜单
- 导航组件
5. Form Handling & Validation
5. 表单处理与验证
react-hook-form Integration:
- Form registration and submission
- Field validation with Zod
- Custom validators
- Async validation
- Multi-step forms
- Dynamic fields
- Conditional rendering
- File uploads
- Form state management
- Error messaging
Zod Validation:
- Schema definition
- Type inference
- Custom refinements
- Async validation
- Error messages customization
- Nested schema validation
- Array validation
- Union types
- Discriminated unions
react-hook-form 集成:
- 表单注册和提交
- 使用 Zod 做字段验证
- 自定义验证器
- 异步验证
- 多步骤表单
- 动态字段
- 条件渲染
- 文件上传
- 表单状态管理
- 错误信息提示
Zod 验证:
- Schema 定义
- 类型推断
- 自定义校验
- 异步验证
- 错误信息自定义
- 嵌套 Schema 验证
- 数组验证
- 联合类型
- 可辨识联合
6. State Management
6. 状态管理
Zustand Implementation:
- Store creation and usage
- Computed state
- Middleware integration
- Persistence layer
- DevTools integration
- Async operations
- Store composition
Redux Toolkit (Alternative):
- Slice creation
- Async thunks
- Selectors with reselect
- Normalized state shape
- Middleware setup
Zustand 实现:
- Store 创建和使用
- 计算状态
- Middleware 集成
- 持久化层
- DevTools 集成
- 异步操作
- Store 组合
Redux Toolkit（替代方案）:
- Slice 创建
- 异步 thunks
- 结合 reselect 的选择器
- 标准化状态结构
- Middleware 配置
7. Payment Integration
7. 支付集成
Stripe Integration:
- Payment intents
- Subscription management
- Customer management
- Invoice generation
- Webhook handling
- Refund processing
- PCI compliance
- Multi-currency support
JazzCash (Pakistan):
- Mobile wallet integration
- Secure hashing
- Transaction verification
- Callback handling
- Error recovery
EasyPaisa (Pakistan):
- Direct load payments
- Token-based authentication
- Payment verification
- Status tracking
Stripe 集成:
- Payment intents
- 订阅管理
- 客户管理
- 发票生成
- Webhook 处理
- 退款处理
- PCI 合规
- 多币种支持
JazzCash（巴基斯坦）:
- 移动钱包集成
- 安全哈希
- 交易验证
- 回调处理
- 错误恢复
EasyPaisa（巴基斯坦）:
- 直接充值支付
- 基于 Token 的身份验证
- 支付验证
- 状态追踪
8. API Route Development
8. API 路由开发
Next.js API Routes:
- HTTP methods (GET, POST, PUT, DELETE, PATCH)
- Request/response handling
- Middleware implementation
- Authentication in API routes
- CORS handling
- Error responses
- Rate limiting
- Input validation
- File uploads
- Streaming responses
Server Actions (Next.js 13+):
- Form submissions
- Database mutations
- Authentication checks
- Revalidation strategies
- Error handling
Next.js API Routes:
- HTTP 方法（GET、POST、PUT、DELETE、PATCH）
- 请求/响应处理
- Middleware 实现
- API 路由中的身份验证
- CORS 处理
- 错误响应
- 限流
- 输入验证
- 文件上传
- 流式响应
Server Actions (Next.js 13+):
- 表单提交
- 数据库变更
- 身份验证检查
- 重新验证策略
- 错误处理
9. Database Design
9. 数据库设计
Firestore Modeling:
- E-commerce schema (products, orders, users)
- SaaS schema (organizations, subscriptions, billing)
- Relationship patterns
- Denormalization strategies
- Collection vs subcollection decisions
- Query optimization
- Cost optimization
Real-Time Sync:
- Real-time listeners
- Presence tracking
- Live notifications
- Data synchronization
- Conflict resolution
Firestore 建模:
- 电商 Schema（商品、订单、用户）
- SaaS Schema（组织、订阅、账单）
- 关系模式
- 反规范化策略
- 集合 vs 子集合的决策
- 查询优化
- 成本优化
实时同步:
- 实时监听器
- 在线状态追踪
- 实时通知
- 数据同步
- 冲突解决
10. Authentication & Security
10. 身份验证与安全
Complete Auth Flow:
- User registration with email verification
- Login with email/OAuth
- Password reset flows
- Session management
- Protected routes
- API route protection
- Rate limiting on auth endpoints
- CSRF protection
- XSS prevention
Role-Based Access Control:
- Admin dashboard
- User roles (customer, vendor, admin)
- Permission-based features
- Protected API routes
- Custom claims verification
完整身份验证流程:
- 带邮箱验证的用户注册
- 邮箱/OAuth 登录
- 密码重置流程
- 会话管理
- 受保护路由
- API 路由保护
- 身份验证端点限流
- CSRF 防护
- XSS 防护
基于角色的访问控制:
- 管理后台
- 用户角色（客户、商家、管理员）
- 基于权限的功能
- 受保护的API路由
- 自定义声明验证
11. Error Handling & Logging
11. 错误处理与日志
Error Management:
- Try-catch patterns
- Error boundaries in React
- Graceful error recovery
- User-friendly error messages
- Server-side error handling
- API error responses
- Validation error display
Logging & Monitoring:
- Console logging strategies
- Structured logging
- Error tracking services
- Performance monitoring
- Analytics integration
- User action logging
错误管理:
- Try-catch 模式
- React 中的错误边界
- 优雅错误恢复
- 用户友好的错误信息
- 服务端错误处理
- API 错误响应
- 验证错误展示
日志与监控:
- 控制台日志策略
- 结构化日志
- 错误追踪服务
- 性能监控
- 分析集成
- 用户行为日志
12. TypeScript Patterns
12. TypeScript 模式
Type Safety:
- Strict mode configuration
- Type inference
- Generic types
- Discriminated unions
- Utility types
- Type guards
- Ambient types
- Module augmentation
API Type Safety:
- Request/response types
- Form data types
- Database schema types
- Authentication types
类型安全:
- 严格模式配置
- 类型推断
- 泛型
- 可辨识联合
- 工具类型
- 类型守卫
- ambient 类型
- 模块扩展
API 类型安全:
- 请求/响应类型
- 表单数据类型
- 数据库 Schema 类型
- 身份验证类型
Project Type Coverage
覆盖的项目类型
E-Commerce Platform
电商平台
Complete features:
- Product catalog (Firestore)
- Shopping cart (Zustand state + Firebase sync)
- User authentication (Firebase Auth + OAuth)
- Order management
- Payment processing (Stripe)
- Admin dashboard
- Inventory management
- Reviews and ratings
- Search and filtering
- Real-time notifications
完整功能:
- 商品目录（Firestore）
- 购物车（Zustand 状态 + Firebase 同步）
- 用户身份验证（Firebase Auth + OAuth）
- 订单管理
- 支付处理（Stripe）
- 管理后台
- 库存管理
- 评论和评分
- 搜索和筛选
- 实时通知
SaaS Application
SaaS 应用
Complete features:
- User registration and authentication
- Subscription management
- Multi-tier pricing
- Invoice generation
- Team/organization management
- Role-based access
- Analytics dashboard
- API integration
- Webhook handling
- Email notifications
完整功能:
- 用户注册和身份验证
- 订阅管理
- 多档位定价
- 发票生成
- 团队/组织管理
- 基于角色的访问控制
- 分析看板
- API 集成
- Webhook 处理
- 邮件通知
Content Platform
内容平台
Complete features:
- User authentication
- Content creation and publishing
- Version control
- Comments and discussions
- Media management (Cloud Storage)
- Search functionality
- Analytics tracking
- User profiles
- Notifications
完整功能:
- 用户身份验证
- 内容创作和发布
- 版本控制
- 评论和讨论
- 媒体管理（云存储）
- 搜索功能
- 分析追踪
- 用户资料
- 通知
Tech Stack Overview
技术栈概览
Frontend:
├── Next.js 13+ (App Router)
├── React 18+
├── TypeScript (strict mode)
├── Tailwind CSS
├── shadcn/ui
├── react-hook-form + Zod
├── Zustand (state management)
├── Lucide React (icons)
└── Axios/Fetch (HTTP client)
Backend:
├── Next.js API Routes
├── TypeScript
└── Server Actions
Database & Auth:
├── Firebase
│ ├── Firestore (database)
│ ├── Auth (authentication)
│ ├── Storage (file storage)
│ └── Cloud Functions
└── Security Rules
Payment:
├── Stripe (primary)
├── JazzCash (Pakistan)
└── EasyPaisa (Pakistan)
DevOps & Deployment:
├── Vercel (Next.js)
├── Firebase Hosting
├── Environment variables
├── CI/CD pipelines
└── Monitoring & analyticsFrontend:
├── Next.js 13+ (App Router)
├── React 18+
├── TypeScript (strict mode)
├── Tailwind CSS
├── shadcn/ui
├── react-hook-form + Zod
├── Zustand (state management)
├── Lucide React (icons)
└── Axios/Fetch (HTTP client)
Backend:
├── Next.js API Routes
├── TypeScript
└── Server Actions
Database & Auth:
├── Firebase
│ ├── Firestore (database)
│ ├── Auth (authentication)
│ ├── Storage (file storage)
│ └── Cloud Functions
└── Security Rules
Payment:
├── Stripe (primary)
├── JazzCash (Pakistan)
└── EasyPaisa (Pakistan)
DevOps & Deployment:
├── Vercel (Next.js)
├── Firebase Hosting
├── Environment variables
├── CI/CD pipelines
└── Monitoring & analyticsUse Cases Implemented
已实现的使用场景
✅ E-commerce platforms with shopping carts and payments
✅ SaaS applications with subscriptions and billing
✅ Content platforms with publishing workflows
✅ Real-time collaboration applications
✅ Admin dashboards with data visualization
✅ Mobile-responsive web applications
✅ Progressive web apps (PWA)
✅ SEO-optimized applications
✅ 带购物车和支付功能的电商平台
✅ 带订阅和账单功能的SaaS应用
✅ 带发布工作流的内容平台
✅ 实时协作应用
✅ 带数据可视化的管理后台
✅ 移动端响应式Web应用
✅ 渐进式Web应用（PWA）
✅ SEO优化的应用
Key Patterns & Best Practices
核心模式与最佳实践
Architecture:
- Component composition
- Container/Presentational pattern
- Custom hooks
- Higher-order components
- Render props
- Compound components
Performance:
- Code splitting
- Lazy loading
- Image optimization
- Font optimization
- Memoization
- Debouncing/Throttling
- Virtual scrolling
- Compression
Security:
- Input validation
- XSS prevention
- CSRF protection
- SQL injection prevention (with Firestore)
- Rate limiting
- Environment variable protection
- HTTPS enforcement
- Security headers
Maintainability:
- Clear file structure
- Component organization
- Type safety with TypeScript
- Error handling
- Logging and debugging
- Documentation
- Testing patterns
架构:
- 组件组合
- 容器/展示模式
- 自定义Hooks
- 高阶组件
- Render props
- 复合组件
性能:
- 代码分割
- 懒加载
- 图片优化
- 字体优化
- Memoization
- 防抖/节流
- 虚拟滚动
- 压缩
安全:
- 输入验证
- XSS防护
- CSRF防护
- SQL注入防护（结合Firestore）
- 限流
- 环境变量保护
- HTTPS强制
- 安全头
可维护性:
- 清晰的文件结构
- 组件组织
- TypeScript实现类型安全
- 错误处理
- 日志和调试
- 文档
- 测试模式
Deployment & DevOps
部署与DevOps
Vercel Deployment:
- Environment setup
- Preview deployments
- Production deployment
- Monitoring
- Analytics
- Edge functions
Firebase Deployment:
- Firestore configuration
- Security rules deployment
- Cloud Functions deployment
- Storage configuration
- Authentication setup
CI/CD Pipelines:
- GitHub Actions workflows
- Automated testing
- Deployment automation
- Environment management
Vercel部署:
- 环境配置
- 预览部署
- 生产部署
- 监控
- 分析
- Edge函数
Firebase部署:
- Firestore配置
- 安全规则部署
- 云函数部署
- 存储配置
- 身份验证配置
CI/CD流水线:
- GitHub Actions工作流
- 自动化测试
- 部署自动化
- 环境管理
When to Use This Skill
何时使用本技能
✅ Building complete e-commerce platforms from scratch
✅ Developing SaaS applications with authentication and payments
✅ Creating content platforms with user management
✅ Implementing real-time features (chat, notifications)
✅ Setting up admin dashboards and analytics
✅ Building responsive, accessible web applications
✅ Integrating payment processing systems
✅ Designing database architecture for Firebase
✅ Setting up authentication flows
✅ Optimizing performance and user experience
❌ Mobile-first only (use React Native instead)
❌ Backend-only projects without frontend
❌ Non-TypeScript projects (focus on TS)
❌ Non-React frameworks (focus on React/Next.js)
✅ 从零开始构建完整电商平台
✅ 开发带身份验证和支付功能的SaaS应用
✅ 创建带用户管理的内容平台
✅ 实现实时功能（聊天、通知）
✅ 搭建管理后台和分析系统
✅ 构建响应式、可访问的Web应用
✅ 集成支付处理系统
✅ 为Firebase设计数据库架构
✅ 搭建身份验证流程
✅ 优化性能和用户体验
❌ 仅移动端优先的项目（请使用React Native）
❌ 无前端的纯后端项目
❌ 非TypeScript项目（本技能聚焦TS）
❌ 非React框架的项目（本技能聚焦React/Next.js）
Resources
资源
references/
references/
- nextjs-complete.md - Next.js 13+ architecture, App Router, API Routes, Server Components
- react-patterns.md - React hooks, components, performance optimization, custom hooks
- firebase-integration.md - Firestore setup, Auth flows, Cloud Storage, Real-time listeners
- tailwind-shadcn.md - Tailwind CSS, shadcn/ui components, theming, dark mode
- forms-validation.md - react-hook-form, Zod schemas, multi-step forms, file uploads
- payment-systems.md - Stripe, JazzCash, EasyPaisa integration with examples
- state-management.md - Zustand setup, Redux Toolkit, store patterns
- api-routes.md - API Route handlers, middleware, authentication, error handling
- authentication-flows.md - Email/password, OAuth, MFA, custom claims, RBAC
- database-design.md - Firestore schemas, collections, queries, optimization
- error-handling.md - Error boundaries, try-catch patterns, user messaging
- deployment.md - Vercel, Firebase hosting, environment setup, CI/CD
- nextjs-complete.md - Next.js 13+ 架构、App Router、API Routes、Server Components
- react-patterns.md - React hooks、组件、性能优化、自定义hooks
- firebase-integration.md - Firestore 配置、Auth 流程、云存储、实时监听器
- tailwind-shadcn.md - Tailwind CSS、shadcn/ui 组件、主题、暗色模式
- forms-validation.md - react-hook-form、Zod schemas、多步骤表单、文件上传
- payment-systems.md - Stripe、JazzCash、EasyPaisa 集成示例
- state-management.md - Zustand 配置、Redux Toolkit、store 模式
- api-routes.md - API Route 处理器、middleware、身份验证、错误处理
- authentication-flows.md - 邮箱/密码、OAuth、MFA、自定义声明、RBAC
- database-design.md - Firestore schemas、集合、查询、优化
- error-handling.md - 错误边界、try-catch 模式、用户消息
- deployment.md - Vercel、Firebase hosting、环境配置、CI/CD
assets/
assets/
- project-templates/ - Complete project starter templates
- component-library/ - Pre-built components
- api-templates/ - API route templates
- page-templates/ - Page component templates
- form-templates/ - Form component templates
- security-rules-templates/ - Firestore security rules
- environment-templates/ - .env.example files
- docker-templates/ - Docker configurations
All resources loaded as needed during development.
- project-templates/ - 完整项目启动模板
- component-library/ - 预构建组件
- api-templates/ - API 路由模板
- page-templates/ - 页面组件模板
- form-templates/ - 表单组件模板
- security-rules-templates/ - Firestore 安全规则
- environment-templates/ - .env.example 文件
- docker-templates/ - Docker 配置
所有资源会在开发过程中按需加载。