|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +A React + TypeScript single-page application for QPython+ course navigation, built with Vite. |
| 8 | + |
| 9 | +## Tech Stack |
| 10 | + |
| 11 | +- React 18 + TypeScript |
| 12 | +- Vite (build tool) |
| 13 | +- Tailwind CSS (styling) |
| 14 | +- React Router 6 (routing) |
| 15 | +- Zustand (state management - available if needed) |
| 16 | +- Lucide React (icons) |
| 17 | + |
| 18 | +## Development |
| 19 | + |
| 20 | +```bash |
| 21 | +npm install # Install dependencies |
| 22 | +npm run dev # Start dev server |
| 23 | +npm run build # Build for production (outputs to dist/) |
| 24 | +npm run preview # Preview production build |
| 25 | +``` |
| 26 | + |
| 27 | +## Architecture |
| 28 | + |
| 29 | +``` |
| 30 | +src/ |
| 31 | +├── components/ # Reusable UI components |
| 32 | +├── context/ # React context (LanguageContext) |
| 33 | +├── i18n/ # Translation files (translations.json) |
| 34 | +├── lib/ # Utilities (cn helper) |
| 35 | +├── pages/ # Route pages (CoursesPage) |
| 36 | +├── types/ # TypeScript types |
| 37 | +├── App.tsx # Root component with routes |
| 38 | +├── main.tsx # Entry point |
| 39 | +public/ |
| 40 | +├── assets/ # Images |
| 41 | +├── data/ |
| 42 | +│ └── courses.json # Course data (edit this to add courses) |
| 43 | +``` |
| 44 | + |
| 45 | +## Key Files |
| 46 | + |
| 47 | +- `public/data/courses.json` - Course data file. Edit this to add/modify courses. |
| 48 | +- `src/i18n/translations.json` - UI translations (zh/en) |
| 49 | +- `src/context/LanguageContext.tsx` - Language switching logic |
| 50 | +- `src/pages/CoursesPage.tsx` - Main courses listing page |
| 51 | + |
| 52 | +## Adding Courses |
| 53 | + |
| 54 | +Edit `public/data/courses.json`: |
| 55 | + |
| 56 | +```json |
| 57 | +{ |
| 58 | + "courses": [ |
| 59 | + { |
| 60 | + "id": "unique-id", |
| 61 | + "title": "Course Title", |
| 62 | + "description": "Course description", |
| 63 | + "image": "/assets/course-image.png", |
| 64 | + "url": "https://example.com", |
| 65 | + "tags": ["python", "beginner"], |
| 66 | + "difficulty": "beginner" |
| 67 | + } |
| 68 | + ] |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | +## Notes |
| 73 | + |
| 74 | +- Language auto-detects from browser (`navigator.language`) |
| 75 | +- Courses open in new tab via standard `<a>` (no app-specific navigation) |
| 76 | +- Images go in `public/assets/` |
0 commit comments