Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 215 additions & 0 deletions README.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
# 🎯 Full-Stack + AI Agent Learning Roadmap

**English** | [简体中文](README.md) | [日本語](README.ja.md)

> **From scratch to an AI-era Full-Stack Engineer** —— A systematically organized learning roadmap with **580,000+ words / 110 detailed tutorials**, organized with Obsidian.
>
> Covers **Python · JavaScript · React · FastAPI · Database · LLM · AI Agent · Graduation Project**. Every knowledge point comes with **analogies + complete code + exercises + GitHub project recommendations**.

[![status](https://img.shields.io/badge/status-actively%20maintained-success)](.) [![duration](https://img.shields.io/badge/duration-12~18%20months-blue)](.) [![level](https://img.shields.io/badge/starting%20point-zero%20basics-green)](.) [![target](https://img.shields.io/badge/target-AI%20Agent%20Full--Stack-purple)](.) [![lang](https://img.shields.io/badge/lang-Chinese-red)](.) [![license](https://img.shields.io/badge/license-CC%20BY--SA%204.0-lightgrey)](.)

⭐ **If you find this useful, please give it a Star —— the greatest encouragement for the maintainer.**

---

## 💡 What is this

Not a list of links. This is a complete tutorial package for **"from zero → able to independently deliver AI Agent products"**:

- 📘 **110 Markdown files / 580,000 words** —— every new concept is explained with everyday analogies
- 💻 **Complete runnable code** —— not snippets, but line-by-line comments + expected output + exercise answers
- 🎯 **30+ chapter projects** —— each chapter requires a verification project; you haven't finished until you've built it
- ⭐ **400+ curated GitHub projects** —— each annotated with "how to use it to learn"
- 🗺️ **Obsidian Canvas mind maps** —— global view + chapter relationships at a glance
- 📊 **Companion learning contract / weekly report / milestone templates** —— a forced feedback system

> This tutorial is **designed specifically for zero-foundation learners**: you need no prerequisite knowledge, just 3 hours a day + a determined heart.

---

## 🚀 Quick Start

### Option 1: Open with Obsidian (Recommended ⭐)

1. **Download** [Obsidian](https://obsidian.md/) (free)
2. `git clone https://github.com/Karovia/fullstack-ai-agent-roadmap.git`
3. Open the downloaded folder in Obsidian (Open folder as vault)
4. **First open** `全栈学习路线/🗺️学习路线思维导图.canvas` for the global view
5. Then start learning from `全栈学习路线/README.md`

### Option 2: Browse directly on GitHub

Go directly to the [`全栈学习路线/`](全栈学习路线/) folder and read chapter by chapter (Chinese filenames are well-supported).

---

## 🗺️ Roadmap Overview

```
🌟 Ultimate Goal: AI-Era Full-Stack Engineer
╔═══════════╪═══════════╗
║ 4 Learning Motivations ║
║ Programming/Full-Stack/Agent/Source ║
╚═══════════╪═══════════╝
━━━ Phase 1 · Foundation (Months 1-3) ━━━
00 Learning Methodology → 01 Python → 02 JavaScript
━━━ Phase 2 · Frontend (Months 4-7) ━━━
03 HTML/CSS → 04 React
━━━ Phase 3 · Backend (Months 8-10) ━━━
05 FastAPI/Hono → 06 Database
━━━ Phase 4 · AI Core (Months 11-15) ━━━
07 LLM Basics → 08 AI Agent ⭐
━━━ Phase 5 · Graduation (Months 16-18) ━━━
09 Graduation Project (deployable / profitable)
╔═══════════╪═══════════╗
║ Job Hunting / Indie Dev / Influence / Startup ║
╚═══════════════════════╝
```

Interactive version: `全栈学习路线/🗺️学习路线思维导图.canvas` (requires Obsidian to open)

---

## 📚 Chapter Catalog

| # | Module | Duration | Chapter Verification Project | Tutorials |
|---|------|------|--------------|----------|
| **00** | [Learning Methodology](全栈学习路线/00-学习方法论/) | 1 week | Learning dashboard + learning contract | 8 |
| **01** | [Python from Scratch to Source Code](全栈学习路线/01-Python-从零到源码/) | 10 weeks | `pyspider-cli` async crawler + PyPI release | 12 |
| **02** | [JavaScript from Scratch to Source Code](全栈学习路线/02-JavaScript-从零到源码/) | 10 weeks | `mini-lodash` + online code sandbox | 12 |
| **03** | [Modern Web with HTML/CSS](全栈学习路线/03-HTML-CSS-现代Web/) | 4 weeks | Pixel-perfect reproduction of Linear / Stripe / Apple landing pages | 6 |
| **04** | [React from Usage to Source Code](全栈学习路线/04-前端框架-React/) | 10 weeks | Online collaborative whiteboard + handwritten mini-react (Fiber + Hooks) | 12 |
| **05** | [Backend FastAPI + Node](全栈学习路线/05-后端开发-FastAPI-Node/) | 8 weeks | RealWorld Conduit backend + real-time chat | 10 |
| **06** | [Database + Engineering](全栈学习路线/06-数据库与工程化/) | 6 weeks | `mini-twitter` high-concurrency short-post community | 8 |
| **07** | [AI Basics: Prompt + LLM](全栈学习路线/07-AI基础-Prompt与LLM/) | 6 weeks | `AskMyDocs` enterprise doc Q&A + GPT from scratch | 8 |
| **08** | [AI Agent Frameworks and Source Code](全栈学习路线/08-AI-Agent-框架与源码/) ⭐ | 12 weeks | `mini-agent-sdk` + self-built MCP Server | 14 |
| **09** | [Graduation Project](全栈学习路线/09-综合实战-毕业项目/) | 8-12 weeks | **A deployable, profitable, resume-worthy product** | 8 |

---

## ⭐ Curated GitHub Projects per Chapter (Exclusive Highlight)

Each chapter comes with a **curated GitHub project list** (not just a collection, but a "how to learn with it" guide):

- 🌱 **Beginner level** (get it running in 30 minutes)
- 🌿 **Intermediate level** (read source code to learn design)
- 🌲 **Source-code level** (read real production code)
- 🏆 **Easy-vibe style** (small but complete, understand at a glance)

| Chapter | Curated GitHub Projects |
|------|----------------|
| 00 Learning Methodology | [Beginner Navigation](全栈学习路线/00-学习方法论/05-GitHub项目精选-入门导航.md) |
| 01 Python | [Python Projects](全栈学习路线/01-Python-从零到源码/11-GitHub项目精选-Python.md) |
| 02 JavaScript | [JavaScript Projects](全栈学习路线/02-JavaScript-从零到源码/11-GitHub项目精选-JavaScript.md) |
| 03 HTML/CSS | [CSS & Design](全栈学习路线/03-HTML-CSS-现代Web/05-GitHub项目精选-CSS与设计.md) |
| 04 React | [React Ecosystem](全栈学习路线/04-前端框架-React/11-GitHub项目精选-React生态.md) |
| 05 Backend | [Backend in Practice](全栈学习路线/05-后端开发-FastAPI-Node/09-GitHub项目精选-后端实战.md) |
| 06 Database | [Database DevOps](全栈学习路线/06-数据库与工程化/07-GitHub项目精选-数据库DevOps.md) |
| 07 LLM | [LLM Learning](全栈学习路线/07-AI基础-Prompt与LLM/07-GitHub项目精选-LLM学习.md) |
| **08 Agent** ⭐ | [**Agent Landscape**](全栈学习路线/08-AI-Agent-框架与源码/13-GitHub项目精选-Agent全景.md) |
| 09 Graduation Project | [Project Inspiration Library](全栈学习路线/09-综合实战-毕业项目/07-GitHub项目精选-灵感库.md) |

**4 Deep-Dive Topics**:
- 🎬 [Easy-vibe: 30-minute runnable projects](全栈学习路线/_资源库/Easy-vibe专题-30分钟跑起来的项目.md)
- 🛠️ [build-your-own-x Chinese follow-along guide](全栈学习路线/_资源库/build-your-own-x-中文跟做指南.md)
- 📚 [awesome index navigation encyclopedia](全栈学习路线/_资源库/awesome-索引导航大全.md)
- 💼 [Real open-source SaaS teardown](全栈学习路线/_资源库/真实开源SaaS拆解.md)

---

## 🎓 Learning Philosophy

This roadmap adheres to 4 principles:

1. **No shortcuts** — Source-code-level mastery requires the four stages of "understand → imitate → rewrite → teach others".
2. **Project-driven** — Each chapter comes with a complete verification project; you haven't finished until you've built it.
3. **Feynman Technique** — After each section, write a note teaching it to someone else.
4. **Reinventing the wheel** — At the source-code stage, you must hand-write mini-react / mini-langchain / mini-agent.

See [`00-学习方法论/`](全栈学习路线/00-学习方法论/) for the full 8-article methodology tutorial.

---

## 📊 Learning Outcome Indicators

After completing this roadmap, you should be able to:

| Capability | Concrete Performance |
|---------|---------|
| **Programming** | Write production-grade code in Python / TypeScript without relying on frameworks |
| **Full-Stack** | Independently deploy a Web app from 0 (frontend + backend + DB + AI) |
| **AI Agent** | Design, implement, tune, and deploy multi-agent systems |
| **Source-code level** | Read parts of React / LangGraph / CPython source code |
| **Engineering** | Docker / CI/CD / monitoring / testing fully equipped |
| **Job hunting** | Land AI Agent Engineer / Full-Stack Engineer offers |
| **Indie** | Build open-source projects with 100+ GitHub stars |

---

## 📋 Recommended Learning Pace

| Investment | Duration | Suitable For |
|------|------|---------|
| 3 hours/day (weekdays) + 6 hours (weekends) | 12-15 months | Students / lots of free time |
| 1.5 hours/day + 6 hours on weekends | 18-24 months | Full-time workers |
| 5+ hours/day | 8-10 months | Full-time learners |

---

## 🤝 Contributing & Feedback

- 🐛 **Found an error?** [Open an Issue](https://github.com/Karovia/fullstack-ai-agent-roadmap/issues)
- 💡 **Have a suggestion?** [Start a Discussion](https://github.com/Karovia/fullstack-ai-agent-roadmap/discussions)
- ⭐ **Found it useful?** Give it a Star so more people see it
- 🔄 **Want to share?** Feel free to Fork and repost (please retain original author info)

---

## 📜 License

This repository is licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

- ✅ Free to share, repost, and adapt
- ✅ Commercial use (please indicate the source)
- ⚠️ Must retain attribution ("Original author: Karovia")
- ⚠️ Derivative works must use the same license

---

## 🌐 Related Links

- 📂 [Obsidian Official](https://obsidian.md/)
- 🤖 [Anthropic Claude](https://claude.ai/) —— the best assistant for learning AI Agent
- 🎓 [Anthropic Courses](https://github.com/anthropics/courses)
- 🛠️ [build-your-own-x](https://github.com/codecrafters-io/build-your-own-x)

---

## 🙋 Acknowledgements

This roadmap stands on the shoulders of these giants:

- **Anthropic** —— Claude model and Agent design philosophy
- **Andrej Karpathy** —— pioneering teaching of building neural networks from scratch
- **Sebastian Raschka** —— LLMs-from-scratch
- **卡颂 (Kasong)** —— React technical deep-dive
- **Datawhale** —— Chinese AI education ecosystem
- **廖雪峰、阮一峰、张鑫旭** —— Chinese tech enlightenment
- And countless open-source community contributors

---

<p align="center">
<b>⭐ If this roadmap helps you, please give it a Star —— the greatest encouragement for the maintainer ⭐</b>
</p>

<p align="center">
Made with ❤️ in Obsidian · Powered by Claude
</p>
Loading