|
1 | | -# 🐍 Python Bootcamp — Interactive Browser Learner |
| 1 | +# 🐍 Python Bootcamp |
2 | 2 |
|
3 | | -A fully self-contained Python learning platform that runs entirely in your browser. No installs, no terminal, no server. Just download the HTML file and open it. |
| 3 | +**An interactive, browser-based Python learning platform — no installs, no terminal, no setup.** |
4 | 4 |
|
5 | | -    |
| 5 | +Download one HTML file. Double-click. Start learning. |
6 | 6 |
|
7 | 7 | --- |
8 | 8 |
|
9 | | -## ✨ Features |
| 9 | +## ✨ What Is This? |
10 | 10 |
|
11 | | -- **Run Python in the browser** — powered by [Pyodide](https://pyodide.org/) (Python compiled to WebAssembly) |
12 | | -- **19 hands-on lessons** across 10 phases — from Hello World to AI Agents |
13 | | -- **Line-by-line explanations** — toggle to reveal what every line does |
14 | | -- **Built-in code editor** — CodeMirror with Python syntax highlighting, Dracula/Eclipse themes |
15 | | -- **AI Tutor chatbot** — powered by Gemini (free), OpenAI, or Anthropic |
16 | | -- **Progress tracking** — lessons marked complete, persisted to localStorage |
17 | | -- **Cheat sheet** — quick Python reference always one click away |
18 | | -- **Quiz** — 8-question quiz with best-score tracking |
19 | | -- **Dark / light mode** — toggle anytime |
20 | | -- **FastAPI Simulator** — interactive mock REST API (Phase 5) with live mode support |
| 11 | +Python Bootcamp is a self-contained, offline-capable learning app packed into a single `.html` file. It runs entirely in your browser using [Pyodide](https://pyodide.org/) — a full Python runtime compiled to WebAssembly — so you can write and execute real Python code without installing anything. |
| 12 | + |
| 13 | +Built for complete beginners who want to learn Python through hands-on projects, with line-by-line explanations for every single line of code. |
21 | 14 |
|
22 | 15 | --- |
23 | 16 |
|
24 | 17 | ## 🚀 Quick Start |
25 | 18 |
|
26 | | -1. Download `python_bootcamp_standalone.html` |
27 | | -2. Open it in Chrome or Firefox |
28 | | -3. Click any lesson and hit **▶ Run** |
| 19 | +```bash |
| 20 | +# Clone the repo |
| 21 | +git clone https://github.com/mysnoopy/Python-Bootcamp.git |
| 22 | +cd Python-Bootcamp |
| 23 | + |
| 24 | +# Option 1 — just open it |
| 25 | +open python_bootcamp_standalone.html |
| 26 | + |
| 27 | +# Option 2 — serve locally (recommended for AI chat features) |
| 28 | +python3 -m http.server 7777 |
| 29 | +# then visit http://localhost:7777/python_bootcamp_standalone.html |
| 30 | +``` |
29 | 31 |
|
30 | | -> Internet connection required for CDN assets (React, CodeMirror, Pyodide) and the AI Tutor. |
| 32 | +No npm. No pip. No virtual environments. Nothing to install. |
31 | 33 |
|
32 | 34 | --- |
33 | 35 |
|
34 | | -## 📚 Curriculum |
| 36 | +## 📚 Curriculum — 23 Lessons Across 10 Phases |
35 | 37 |
|
36 | 38 | | Phase | Topic | Lessons | |
37 | 39 | |-------|-------|---------| |
38 | | -| 🐍 Phase 1 | Python Basics | 1a: Hello World & Variables · 1b: Conditions & Loops | |
39 | | -| 📦 Phase 2 | Data Types | 2a: Lists & Dictionaries · 2b: Functions | |
40 | | -| 🏗️ Phase 3 | OOP | 3a: Classes & Objects | |
41 | | -| 🔌 Phase 4 | APIs | 4a: REST APIs & HTTP | |
42 | | -| ⚙️ Phase 5 | Frameworks | 5a: FastAPI Backend *(interactive simulator)* | |
43 | | -| 🤖 Phase 6 | AI / LLMs | 6a: AI API — Movie Recommender | |
44 | | -| 🧠 Phase 7 | AI Topics | 7a: Prompt Engineering · 7b: RAG · 7c: AI Agents & Tools | |
45 | | -| 🗄️ Phase 8 | Data & Files | 8a: CSV & JSON · 8b: Mini Database · 8c: Data Analysis | |
46 | | -| 🧪 Phase 9 | Testing & Debugging | 9a: Reading Errors · 9b: Writing Tests · 9c: Debugging Tips | |
47 | | -| 🔄 Phase 10 | Real Projects | 10a: CLI Todo App · 10b: Number Guessing Game · 10c: Budget Tracker | |
48 | | - |
49 | | -**Total:** ~9 hours of guided, project-based learning |
| 40 | +| 🐍 Phase 1 | **Python Basics** | Hello World & Variables, Conditions & Loops, Don't Panic: Reading Errors | |
| 41 | +| 📦 Phase 2 | **Data Types** | Lists & Dictionaries, Functions, String Methods | |
| 42 | +| 🏗️ Phase 3 | **OOP** | Library Book System | |
| 43 | +| 🔌 Phase 4 | **APIs** | Live Weather Fetcher | |
| 44 | +| ⚙️ Phase 5 | **Frameworks** | FastAPI Backend *(interactive simulator)* | |
| 45 | +| 🤖 Phase 6 | **AI / LLMs** | AI API Movie Recommender | |
| 46 | +| 🧠 Phase 7 | **AI Topics** | Prompt Engineering, RAG Knowledge Base, AI Agents & Tools | |
| 47 | +| 🗄️ Phase 8 | **Data & Files** | File I/O, CSV & JSON, Mini Database, Data Analysis | |
| 48 | +| 🧪 Phase 9 | **Testing & Debugging** | Reading Errors, Writing Tests, Debugging Tips | |
| 49 | +| 🔄 Phase 10 | **Real Projects** | CLI Todo App, Number Guessing Game, Budget Tracker | |
50 | 50 |
|
51 | 51 | --- |
52 | 52 |
|
53 | | -## 🤖 AI Tutor Setup |
| 53 | +## 🎯 Features |
54 | 54 |
|
55 | | -Click the 💬 button (bottom right) to open the AI Tutor. Paste in one API key — stored locally and never sent anywhere except the provider's API. |
56 | | - |
57 | | -| Provider | Model | Cost | Get Key | |
58 | | -|----------|-------|------|---------| |
59 | | -| 🟢 Google Gemini | gemini-2.5-flash | **Free** | [aistudio.google.com](https://aistudio.google.com) | |
60 | | -| 🟦 OpenAI | gpt-4o-mini | ~$0.60/1M tokens | [platform.openai.com](https://platform.openai.com) | |
61 | | -| 🟠 Anthropic | claude-haiku-4-5 | ~$0.80/1M tokens | [console.anthropic.com](https://console.anthropic.com) | |
| 55 | +- **Line-by-line explanations** — every code line has a plain-English description, toggleable with 💡 ON/OFF |
| 56 | +- **Built-in code editor** — powered by [CodeMirror](https://codemirror.net/) with syntax highlighting |
| 57 | +- **Run in browser** — real Python execution via [Pyodide](https://pyodide.org/) (WebAssembly) |
| 58 | +- **Memory trick box** — each lesson opens with a key concept to anchor the learning |
| 59 | +- **Progress tracking** — mark lessons done, track completion %, stored in localStorage |
| 60 | +- **AI Chat Tutor** — ask questions about any lesson using your own API key (see below) |
| 61 | +- **Cheat Sheet** — quick-reference syntax guide with one-click copy |
| 62 | +- **Quiz mode** — test yourself across all concepts |
| 63 | +- **Dark / Light theme** — toggle with ☀️ / 🌙 |
| 64 | +- **FastAPI simulator** — interactive REST API sandbox, no server needed |
| 65 | +- **Fully offline** — works without internet after initial load *(Google Fonts and Pyodide CDN require one-time network fetch)* |
62 | 66 |
|
63 | 67 | --- |
64 | 68 |
|
65 | | -## ⚙️ FastAPI Simulator (Phase 5) |
| 69 | +## 🤖 AI Chat Tutor |
66 | 70 |
|
67 | | -Phase 5 includes a full interactive REST API simulator — no server needed. |
| 71 | +The app includes a built-in AI tutor that can answer questions about any lesson. It supports three providers — you bring your own API key: |
68 | 72 |
|
69 | | -- **4 endpoints:** `GET /books`, `POST /books`, `PUT /books/{id}`, `DELETE /books/{id}` |
70 | | -- **Live DB panel** — see your in-memory database update in real time |
71 | | -- **Live Mode** — toggle to send real requests to a local FastAPI server at `localhost:8000` |
| 73 | +| Provider | Model | Status | |
| 74 | +|----------|-------|--------| |
| 75 | +| 🟢 Google Gemini | `gemini-2.5-flash` | ✅ Tested & working | |
| 76 | +| 🟦 OpenAI | `gpt-4o-mini` | ⚠️ Untested — bugs possible | |
| 77 | +| 🟠 Anthropic Claude | `claude-haiku-4-5-20251001` | ⚠️ Untested — bugs possible | |
72 | 78 |
|
73 | | -To run Phase 5 with a real server: |
74 | | -```bash |
75 | | -pip install fastapi uvicorn |
76 | | -python main.py |
77 | | -``` |
| 79 | +> **Note:** Only the **Gemini API key** has been tested end-to-end. The OpenAI and Anthropic integrations are implemented but **have not been tested with real API keys**. If you run into issues with ChatGPT or Claude keys, please [open an issue](https://github.com/mysnoopy/Python-Bootcamp/issues) with the error details — contributions welcome! |
| 80 | +
|
| 81 | +**Getting a free Gemini key (recommended):** |
| 82 | +1. Visit [aistudio.google.com](https://aistudio.google.com) |
| 83 | +2. Click **Get API key** → **Create API key** |
| 84 | +3. Paste into **⚙️ Setup AI** in the top-right corner — takes 30 seconds |
78 | 85 |
|
79 | 86 | --- |
80 | 87 |
|
81 | | -## 🛠️ Tech Stack |
| 88 | +## 🏗️ Tech Stack |
82 | 89 |
|
83 | 90 | | Layer | Technology | |
84 | 91 | |-------|-----------| |
85 | | -| Python runtime | [Pyodide](https://pyodide.org/) 0.24.1 (WASM) | |
86 | | -| UI framework | React 18 | |
87 | | -| Code editor | CodeMirror 5.65.16 | |
88 | | -| JS compiler | Babel Standalone 7.23.10 | |
89 | | -| AI Tutor | Gemini / OpenAI / Anthropic APIs | |
| 92 | +| Python Runtime | [Pyodide](https://pyodide.org/) (Python 3.11 via WebAssembly) | |
| 93 | +| UI Framework | React 18 (Babel standalone — no build step) | |
| 94 | +| Code Editor | CodeMirror 5 | |
| 95 | +| Fonts | Plus Jakarta Sans + Space Mono (Google Fonts) | |
| 96 | +| Storage | `localStorage` (progress + settings) | |
| 97 | +| Deployment | Single `.html` file — zero dependencies | |
90 | 98 |
|
91 | 99 | --- |
92 | 100 |
|
93 | | -## 📁 Files |
| 101 | +## 📁 Project Structure |
94 | 102 |
|
95 | 103 | ``` |
96 | | -python_bootcamp_standalone.html # The entire app — single file, ~2300 lines |
97 | | -main.py # FastAPI backend for Phase 5 live mode |
98 | | -README.md |
| 104 | +Python-Bootcamp/ |
| 105 | +├── python_bootcamp_standalone.html # ← The entire app (one file) |
| 106 | +└── README.md |
99 | 107 | ``` |
100 | 108 |
|
| 109 | +The whole platform — curriculum data, UI, Python runtime loader, AI chat, quiz engine — lives in a single file. |
| 110 | + |
| 111 | +--- |
| 112 | + |
| 113 | +## 🐛 Known Limitations |
| 114 | + |
| 115 | +- **Pyodide cold start** — takes 3–8s on first load (downloading Python WASM runtime ~10MB) |
| 116 | +- **No `sqlite3`** — not included in Pyodide; lessons use dicts/lists instead |
| 117 | +- **No `pandas`** — not available by default; data lessons use `csv` + `statistics` |
| 118 | +- **No `requests`** — use `pyodide.http.open_url` for HTTP (handled inside lessons) |
| 119 | +- **AI lessons require an API key** — they won't execute without one configured |
| 120 | +- **OpenAI / Claude API keys untested** — Gemini is the recommended provider for now |
| 121 | + |
101 | 122 | --- |
102 | 123 |
|
103 | | -## 🔧 Development |
| 124 | +## 🛠️ Local Development |
104 | 125 |
|
105 | | -The entire app is a single HTML file with an embedded React + Babel application. To modify: |
| 126 | +The app is plain HTML + React + Babel — no build tooling required. |
106 | 127 |
|
107 | 128 | 1. Open `python_bootcamp_standalone.html` in VS Code |
108 | | -2. Edit the `<script type="text/babel">` section |
109 | | -3. Refresh the browser — Babel recompiles on every load |
| 129 | +2. Find the `<script type="text/babel">` tag — all app logic lives here |
| 130 | +3. Edit and save |
| 131 | +4. Hard-reload in browser: `Cmd+Shift+R` (Mac) / `Ctrl+Shift+R` (Windows/Linux) |
110 | 132 |
|
111 | | -**Curriculum data** lives in the `curriculum` array near the top of the script. Each lesson has: |
112 | | -- `id`, `title`, `duration`, `project` — metadata |
113 | | -- `memTrick` — mnemonic shown above the editor |
114 | | -- `concepts` — badge chips shown in the phase overview |
115 | | -- `lines` — array of `{code, exp}` objects (the step-by-step code) |
| 133 | +**Version tracking:** Each build includes a version stamp + MD5 checksum on the loading screen (e.g. `v2026-03-09c · #44483a6b`) so you always know exactly which version is running. |
116 | 134 |
|
117 | 135 | --- |
118 | 136 |
|
119 | | -## 🤝 Contributing |
| 137 | +## 🗺️ Roadmap |
120 | 138 |
|
121 | | -PRs welcome! Good first contributions: |
122 | | -- Add new lessons to existing phases |
123 | | -- Fix typos in `exp:` explanation fields |
124 | | -- Add quiz questions |
125 | | -- Improve mobile layout |
| 139 | +- [ ] Add missing lessons: While Loops (1c), Modules & Imports (2c), Python Shortcuts (2d) |
| 140 | +- [ ] Test and fix OpenAI + Anthropic AI chat integrations |
| 141 | +- [ ] Mobile layout improvements |
| 142 | +- [ ] Shareable lesson links |
| 143 | +- [ ] More real-world projects in Phase 10 |
126 | 144 |
|
127 | 145 | --- |
128 | 146 |
|
129 | 147 | ## 📄 License |
130 | 148 |
|
131 | | -MIT — use freely, modify freely, share freely. |
| 149 | +MIT — free to use, fork, and build on. |
| 150 | + |
| 151 | +--- |
| 152 | + |
| 153 | +*Built with ❤️ by [Clarence](https://github.com/mysnoopy) · Octoix AI* |
0 commit comments