Files

T

sanbuphy ef70b1d8e1 feat: add comprehensive backend topics and fix build issues

## 新增内容

### 附录文档扩展
- 扩展前端项目架构文档 (frontend-project-architecture.md)
- 扩展后端项目架构文档 (backend-project-architecture.md)
- 扩展数据治理文档 (data-governance.md)
- 扩展数据可视化文档 (data-visualization.md)
- 扩展分布式系统文档 (distributed-systems.md)
- 扩展高可用文档 (high-availability.md)
- 扩展单体到微服务文档 (monolith-to-microservices.md)
- 扩展系统设计方法论文档 (system-design-methodology.md)
- 扩展 Docker 容器文档 (docker-containers.md)
- 扩展 Kubernetes 文档 (kubernetes.md)
- 扩展 Linux 基础文档 (linux-basics.md)
- 扩展神经网络文档 (neural-networks.md)

### 新增交互式组件
- 数据治理组件: DataQualityDemo, DataGovernanceFrameworkDemo, DataLineageDemo
- 数据可视化组件: ChartTypeSelectorDemo, DashboardLayoutDemo
- 分布式系统组件: CAPTheoremDemo, ConsistencyModelsDemo, DistributedChallengesDemo
- 高可用组件: AvailabilityCalculatorDemo, FailoverStrategyDemo
- 系统设计组件: SystemDesignStepsDemo, CapacityEstimationDemo
- Docker 容器组件: DockerArchitectureDemo, DockerLifecycleDemo
- Kubernetes 组件: K8sArchitectureDemo, K8sWorkloadsDemo
- Linux 基础组件: LinuxFileSystemDemo, LinuxCommandDemo, LinuxPermissionsDemo
- 神经网络组件: NeuronDemo, NetworkLayersDemo, NetworkArchitectureDemo
- 单体到微服务组件: ArchEvolutionDemo
- 项目架构组件: ProjectArchitectureComparisonDemo
- 附录导航组件: AppendixFlowMap

### 英文版重构
- 将 en-us 目录重命名为 en
- 更新相关配置和组件中的语言代码

## Bug 修复
- 修复 index.js 中重复的组件导入语句导致的 build 失败
- 恢复被注释的 InvertedIndexDemo 和 SearchRelevanceDemo 导入
- 修复 HomeFeatures.vue 中 en-us 与 config.mjs 中 en 不一致导致的语言切换问题

## 其他改进
- 添加构建脚本 (scripts/build.mjs)
- 更新依赖版本

2026-02-26 04:35:28 +08:00

README.md

feat: add comprehensive backend topics and fix build issues

2026-02-26 04:35:28 +08:00

README.md

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe : Learn vibe coding from 0 to 1

📌 Read Online · ✨ Interactive Tutorial

Read Online · Learning Map · Community

Exclusive Learning Map for Beginners _{Zero-foundation guidance, clear path planning, say goodbye to "learn and forget"}	Step-by-Step Graphical Tutorial _{Nanny-level detailed explanations, like having a private tutor nearby, just follow along}
Immersive Simulated Programming _{Virtual mouse auto-navigation, guiding you through core IDE usage quickly}	Visible AI Principles _{Algorithm principles animated, see at a glance how AI "draws" images}
Learn RAG Like Playing a Game _{Exclusive interactive components, click to see the RAG data flow clearly}	Visualized Terminal Principles _{Command-line operations visualized, intuitively showcasing background logic and principles}

⭐ Welcome to Star here to accelerate updates ❤️

In the AI era, those who turn ideas into products are often not the ones with the strongest technical skills, but the ones who take the first step.

Many people, even with AI assistants, are still discouraged by "not understanding the code" or "not knowing how to configure the environment." Easy-Vibe was born for this. Assuming everyone starts from zero foundation, we take you by the hand from writing your first line of code to understanding front-end and back-end logic, and finally launching your product.

Target Audience: Beginners, Product Managers, Front-end / Back-end / Full-stack Developers
Themes: AI Programming, Full-stack Web Application Development, AI Agent, Workflow, and RAG Systems

Easy-Vibe takes you from 0 to 1 through the following stages:

Stage	Core Skills	Output
Stage 1	Intro to AI Programming, Product Thinking, Prototyping	Interactive Mini-games, Web App Prototypes (Beginner & PM)
Stage 2	Full-stack Development, AI Integration, Databases	Complete Full-stack AI Application
Stage 3	Advanced Claude Code, Mini-programs & Android Development	Production-grade Multi-platform Applications
Appendix	Helping you understand Computer & AI basic concepts	9 Knowledge Domains, 80+ Interactive Topics

🔥 News

[2026-02-25] Updated Appendix Knowledge Base, covering 9 knowledge domains and 80+ interactive topics.
[2026-01-27] Added Android and iOS platform application development tutorials.
[2026-01-19] Released interactive demonstration components for Prompt Engineering, AI Evolution, Authentication Design, Git Principles, etc., significantly enhancing the visual learning experience.

Past News

[2026-01-16] Restructured project, formally established the "Beginner Entry" chapter to lower the entry barrier.
[2026-01-14] Completed a major update of the Stage 1 "Product Prototype Construction" documentation.
[2026-01-13] Completed document architecture refactoring, fully supporting multi-language (i18n).
[2026-01-01] Released the project's core Learning Map, clarifying the learning path.

📚 Appendix Knowledge Base

Covering 9 knowledge domains and 80+ interactive topics, using animations and visual components to help you intuitively understand core concepts from computer fundamentals to the AI frontier.

👉 View Full Appendix · AI Capability Dictionary

💻 Computer Fundamentals • From Transistor to CPU • Operating Systems • Data Encoding, Storage & Transmission • Networks: How Two Computers Talk • Data Structures • Intro to Algorithmic Thinking	🔧 Development Tools • Git: The Time Machine of Code • Command Line & Shell Scripting • Package Managers • The Art of Debugging • Regular Expressions • Environment Variables & PATH	🌐 Browser & Front-end • Deep Dive into JavaScript • Browser Rendering Pipeline • Front-end Framework Comparison • Graphics & Animation • Web Performance Measurement & Optimization • The Big Picture of Front-end Engineering
🖥️ Server & Back-end • HTTP Protocol • API Design Philosophy • Authentication & Authorization • Concurrency, Async & Multithreading • Message Queues & Event-Driven • Back-end Layered Architecture	📊 Data • SQL • Database Fundamentals • Tracking & User Behavior Collection • Data Analysis Basics • A/B Testing & Experiment Driven • Data Visualization & Dashboards	🏗️ Architecture & System Design • Evolution from Monolith to Microservices • Challenges of Distributed Systems • High Availability & Disaster Recovery • System Design Methodology
☁️ Infrastructure & DevOps • Docker Containerization • Kubernetes Orchestration • CI / CD Automation • Domains, DNS & HTTPS • Monitoring, Logging & Alerting • Infrastructure as Code	🤖 Artificial Intelligence • How LLMs Work • Transformer & Attention Mechanism • RAG Architecture • AI Agents & Tool Calling • Prompt Engineering • Image Generation Principles	🎯 Engineering Excellence • Code Quality & Refactoring • Testing Strategies • Design Patterns • Security Thinking & Defense Basics • Technical Writing • Open Source Collaboration

I. Zero Foundation Entry

Chapter	Key Content	Status
Preface: Learning Map	Overall learning path navigation	✅
Level 1: AI Era, Speaking is Programming	Experience AI programming through cases like Snake	✅
Level 2: Finding Great Ideas	Learn to find and validate product ideas	✅
Level 3: Intro to AI IDE Tools	Learn to use IDE, make games locally	✅
Level 4: Building Prototypes Hands-on	From requirements to single and multi-page prototypes	✅
Level 5: Adding AI Power to Prototypes	Learn to integrate AI (text, image, video)	✅
Level 6: Full Project Practice	Simulate real scenarios, iterate with feedback	✅

Appendix: Business Thinking

Chapter	Key Content	Status
Appendix A: Product Thinking & Solution Design	Thinking frameworks for building products	✅
Appendix B: AI Industry Scenarios (B2B)	AI applications in different industries	✅
Appendix C: AI Consumer Scenarios (B2C)	AI application scenarios in consumer products	✅

Appendix: Technical Solutions

Chapter	Key Content	Status
Appendix D: Handling Errors	Common errors and troubleshooting in vibe coding	✅
Appendix E: Comparison of 7 AI Programming Tools	Direct comparison of mainstream platforms	✅
Appendix F: Designing Websites with Design & Programming Agents	Multi-agent collaboration for web design	✅

II. Intermediate Developer

Front-end

Chapter	Key Content	Status
Front-end 0: Assets with Lovart	Batch generate visual assets like characters/scenes	🚧
Front-end 1: Figma & MasterGo Intro	Organize info architecture and page structure	🚧
Front-end 2: Building First Modern App - UI Design	Design-to-code workflow with components	🚧
Front-end 3: UI Design Specs & Multi-product UI	Systematic design across multiple products	🚧
Front-end 4: Hogwarts Portraits Together	Build an AI-powered front-end app from 0 to 1	✅

Back-end & Full-stack

Chapter	Key Content	Status
Back-end 1: What is an API	HTTP interfaces and request-response models	✅
Back-end 2: DB to Supabase	Implement DB and API on Supabase	✅
Back-end 3: AI-Assisted API Code & Docs	Generate API/DB docs and code with LLM	🚧
Back-end 4: Git Workflow	Version control and collaboration in Git	✅
Back-end 5: Zeabur Deployment	Deploy applications to Zeabur	✅
Back-end 6: Modern CLI Dev Tools	Accelerate dev with CLI-based AI tools	✅
Back-end 7: Integrating Payment Systems like Stripe	Integrate payment and basic settlement flow	🚧
Project 1: First Modern Application - Full-stack App	Complete localized, production-ready Full-stack Web App	🚧
Project 2: Modern UI Library + Trae Practice	Independent product with auth and payment	🚧

AI Capability Appendix

Chapter	Key Content	Status
AI 1: Dify Intro & Knowledge Base	Build utility products with Dify Workflow & RAG	✅
AI 2: AI Dictionary & Multimodal APIs	Research models/APIs and integrate multimodal power	🚧

III. Advanced Developer

Chapter	Key Content	Status
Advanced 1: MCP & Claude Code Skills	Extend IDE power with external services as tools	🚧
Advanced 2: Long-running Coding Tasks	Design and configure stable, long-running tasks	🚧
Advanced 3: WeChat Mini Program Dev	Build and launch a front-end mini program	✅
Advanced 4: WeChat Mini Program with Back-end	Integrate DB and back-end logic in mini programs	🚧
Advanced 5: Android App Development	Web/Native unified Android dev with Expo	✅
Advanced 6: iOS App Development	Web/Native unified iOS dev with Expo	✅
Advanced 7: Personal Website & Academic Blog	Build and deploy a permanent online homepage	🚧

AI Capability Appendix

Chapter	Key Content	Status
Advanced AI 1: What is RAG & How It Works	Systematic understanding of RAG architectures	✅
Advanced AI 2: Advanced RAG with LangGraph	Multi-step workflows and advanced RAG systems	🚧

🛠️ How to Learn

Choose chapters to read and practice based on your skill level. Feel free to open an issue for questions.

💻 Local Setup

Modern Approach

In an AI IDE (VS Code, Cursor, Trae, etc.), use the following prompt:

Please help me run the local service for this project.

Traditional Approach

npm install
npm run dev
Open http://localhost:3000 in your browser.

🤝 Contributing

If you find issues or have suggestions, please open an Issue. If you don't get a response, contact the Nanny Team.
To contribute, please submit a Pull Request.
If you want to start a new project with Datawhale, follow the Datawhale Open Source Project Guide.