Skip to content

Commit 5dd3f71

Browse files
committed
v2026-03-09c: redesign dark theme + 23 lessons + version stamps
1 parent 65dc7bf commit 5dd3f71

2 files changed

Lines changed: 311 additions & 512 deletions

File tree

‎README.md‎

Lines changed: 97 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,153 @@
1-
# 🐍 Python Bootcamp — Interactive Browser Learner
1+
# 🐍 Python Bootcamp
22

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.**
44

5-
![Python](https://img.shields.io/badge/Python-3.x-blue) ![Pyodide](https://img.shields.io/badge/Pyodide-0.24.1-green) ![React](https://img.shields.io/badge/React-18-61DAFB) ![License](https://img.shields.io/badge/license-MIT-lightgrey)
5+
Download one HTML file. Double-click. Start learning.
66

77
---
88

9-
## ✨ Features
9+
## ✨ What Is This?
1010

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.
2114

2215
---
2316

2417
## 🚀 Quick Start
2518

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+
```
2931

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.
3133

3234
---
3335

34-
## 📚 Curriculum
36+
## 📚 Curriculum — 23 Lessons Across 10 Phases
3537

3638
| Phase | Topic | Lessons |
3739
|-------|-------|---------|
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 |
5050

5151
---
5252

53-
## 🤖 AI Tutor Setup
53+
## 🎯 Features
5454

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)*
6266

6367
---
6468

65-
## ⚙️ FastAPI Simulator (Phase 5)
69+
## 🤖 AI Chat Tutor
6670

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:
6872

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 |
7278

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
7885

7986
---
8087

81-
## 🛠️ Tech Stack
88+
## 🏗️ Tech Stack
8289

8390
| Layer | Technology |
8491
|-------|-----------|
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 |
9098

9199
---
92100

93-
## 📁 Files
101+
## 📁 Project Structure
94102

95103
```
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
99107
```
100108

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+
101122
---
102123

103-
## 🔧 Development
124+
## 🛠️ Local Development
104125

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.
106127

107128
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)
110132

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.
116134

117135
---
118136

119-
## 🤝 Contributing
137+
## 🗺️ Roadmap
120138

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
126144

127145
---
128146

129147
## 📄 License
130148

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

Comments
 (0)