# 00_Introduction: Environment Setup

<p align="center">
  <a href="./README.md">English</a> | <a href="./README_CN.md">中文</a>
</p>

> **"Vibe Coding: AI Full-Stack Development Bootcamp"** - Prerequisites

## Overview

Before embarking on your Vibe Coding journey, you need to complete the development environment setup. This step may seem simple, but it's the root cause of many issues students encounter later.

**Why Vibe Coding Tools Need Proper Setup?**

<div align="center">
  <img src="./images/cursor_git_collaboration.png" width="85%" alt="Why Git is Essential for AI Programming">
</div>

The core toolchain of Vibe Coding—Cursor, GitHub, and AI model services—all depend on stable international network connections. Without Git:
- ❌ Cannot submit code
- ❌ Cannot pull repositories  
- ❌ Agent features blocked
- ❌ Authorization failures

With Git, you unlock the complete engineering workflow: collaborative development, change tracking, and deployment.

---

## Git & GitHub Relationship

<div align="center">
  <img src="./images/git_github_relationship.png" width="80%" alt="Git and GitHub Relationship">
</div>

- **Git** (Local) - Distributed version control, local repository, offline work
- **GitHub** (Remote) - Centralized hosting, team collaboration, social coding
- **Push** - Upload code to GitHub
- **Pull/Clone** - Download code from GitHub

---

## Complete Learning Path

<div align="center">
  <img src="./images/git_setup_flow.png" width="90%" alt="Git in Cursor Workflow - Complete Learning Path">
</div>

The setup flow covers:
1. **Git's Role & Value** - Why it's essential
2. **Installation** - Windows / macOS / Linux
3. **Initial Configuration** - Username, email, default branch, Credential Manager

---

## Configuration & Verification

<div align="center">
  <img src="./images/cursor_github_config.png" width="90%" alt="Git Configuration and Cursor Integration Verification">
</div>

Three key steps:
1. **Identity Set** - Configure global user.name and user.email
2. **Credentials Linked** - Set up Credential Manager and GitHub Token
3. **Integration Verified** - Test commit and push in Cursor

---

## Lessons

| # | Topic | Description |
|:---|:---|:---|
| [Intro-01](./导学1：网络环境配置与VPN准备.html) | Network & VPN | Network environment detection and VPN configuration |
| [Intro-02](./导学2：Cursor安装部署与订阅.html) | Cursor Setup | Cursor AI IDE installation, registration, and Pro subscription |
| [Intro-03](./导学3：Git安装与GitHub配置.html) | Git & GitHub | Git installation, GitHub account, and Token configuration |
| [Intro-04](./导学4：Claude%20Code部署配置教程.html) | Claude Code | Claude Code local deployment, configuration, and Cursor plugin integration |

---

## Prerequisites

- A Windows / macOS / Linux computer
- Stable network connection
- Basic computer operation skills (no programming experience required)

---

## Learning Objectives

After completing this phase, you will be able to:

- [x] Configure network environment to access GitHub and AI services
- [x] Install and log in to Cursor AI IDE
- [x] Complete Cursor Pro subscription (optional)
- [x] Install Git and configure GitHub account
- [x] Complete your first code commit using Cursor Agent
- [x] Install and configure Claude Code (choose official subscription or CC-Switch API key)

---

## Completion Checklist

Before moving to Stage 1, ensure the following are completed:

```
[ ] VPN configured, ip138.com shows overseas IP
[ ] GitHub.com loads normally (within 3 seconds)
[ ] Cursor installed and logged in successfully
[ ] Git installed, git --version returns version number
[ ] GitHub Personal Access Token created
[ ] Can use Cursor Agent to perform Git operations
[ ] Claude Code installed and authentication configured
```

---

## Estimated Time

| Lesson | Time |
|:---|:---|
| Intro-01: Network & VPN | 15-30 min |
| Intro-02: Cursor Setup | 20-30 min |
| Intro-03: Git & GitHub | 20-30 min |
| Intro-04: Claude Code | 30-45 min |
| **Total** | **~2 hours** |

---

## Next Step

After completing environment setup, proceed to **[Stage 1: AI Programming Fundamentals](../Stage1_AI_Programming_Fundamentals/)** to start learning Vibe Coding!

---

<p align="center">
  <b>Vibe Coding: AI Full-Stack Development Bootcamp</b><br>
  The exclusive Vibe Coding full-stack development guide<br>
  Master Cursor & Claude Code from scratch
</p>