🚀 AI Programming Education Platform

Master AI-Assisted Development Through Interactive Learning

A comprehensive educational platform that teaches AI-assisted programming through hands-on tutorials, practical projects, and best practices.
Features interactive learning modules, modern development workflows, and real-world project implementations.
One-click FREE deployment of your personalized learning environment.

Live Demo · Documentation · Blog · Issues

Share This Project

^{🌟 Pioneering the future of AI-assisted programming education. Built for the next generation of developers.}

📸 Project Screenshots

[!TIP] Explore our interactive learning platform designed for modern developers. See the evolution from Version 1 to the latest Version 2 with enhanced UI/UX.

🌟 Latest Version (Version 2) - Enhanced UI/UX

Version 2 Main Dashboard - Redesigned with modern aesthetics and improved navigation

Version 2 Documentation - Enhanced reading experience with better typography

Version 2 Interface Showcase - Mobile responsive and feature highlights

📱 Previous Version (Version 1) & Version Comparison

📱 Previous Version (Version 1) - Original Design

Version 1 Main Dashboard - Original comprehensive learning modules and navigation

Version 1 Tutorials & Blog - Original interactive content sections

Version 1 Mobile View - Original responsive design foundation

🔄 Version Evolution Highlights:

• ✨ Enhanced Visual Design: Modern color scheme and typography
• 🎨 Improved UI Components: Better buttons, cards, and interactive elements
• 📱 Mobile Optimization: Superior responsive design across all devices
• 🚀 Performance Improvements: Faster loading and smoother interactions

🎬 Demo Video

[!NOTE] Watch our platform in action with this comprehensive demo.

2024-12-14.14-59-17.mp4

Complete platform walkthrough showing all major features

Tech Stack Badges:

Important

This platform demonstrates modern educational technology with interactive learning modules. It combines comprehensive documentation with hands-on tutorials to provide a complete AI programming education experience. Features include step-by-step tutorials, practical projects, and modern development tool integration.

📑 Table of Contents

TOC

• 🚀 AI Programming Education Platform - TOC
  • 🌟 Introduction
  • ✨ Key Features
    • 1 Interactive Learning Modules
    • 2 Comprehensive Tutorial System
    • 3 AI Chat Assistant with RAG
    • * Additional Features
  • 🛠️ Tech Stack
  • 🏗️ Architecture
    • System Architecture
    • AI Chat Architecture
    • Project Structure
  • 🚀 Getting Started
    • Prerequisites
    • Quick Installation
    • Development Mode
  • 🛳 Deployment
    • A Frontend Deployment (Vercel)
    • B Backend Deployment (Cloudflare Workers)
    • C Docker Deployment
  • 📖 Learning Path
    • Beginner Level
    • Intermediate Level
    • Advanced Level
  • 🔌 Integrations
    • Cloudflare Services Pricing
  • ⌨️ Development
    • Local Development
    • Adding Content
  • 🤝 Contributing
  • 📄 License
  • 👥 Team

🌟 Introduction

We are passionate educators and developers creating the next generation of AI programming education. By adopting modern educational technologies and comprehensive learning methodologies, we aim to provide learners with powerful, accessible, and engaging AI programming education.

Whether you're a beginner looking to enter the world of AI programming or an experienced developer seeking to enhance your skills with AI tools, this platform will be your comprehensive learning companion. The platform is actively maintained and we welcome feedback for any issues encountered.

Note

• Node.js >= 18.0 required for development
• Modern web browser for optimal experience
• GitHub account recommended for accessing additional resources
• No prior AI experience required - we start from the basics!

	No installation required! Visit our live demo to start learning immediately.
	Get intelligent answers about the project using AI

Tip

⭐ Star us to receive all updates and new learning content from GitHub!

✨ Key Features

1 Interactive Learning Modules

Experience next-generation educational content through our comprehensive module system. Our innovative approach provides structured learning paths through carefully designed tutorials covering everything from AI communication basics to advanced development workflows.

Interactive learning modules with step-by-step guidance

Key capabilities include:

• 🎯 Progressive Learning: Structured curriculum from basics to advanced
• 🛠️ Hands-on Practice: Real-world projects and exercises
• 📱 Responsive Design: Learn on any device, anywhere
• 🌐 Bilingual Support: Content available in multiple languages

2 Comprehensive Tutorial System

Revolutionary tutorial system that transforms how learners interact with AI programming concepts. With our structured approach and practical examples, students can master AI-assisted development while building real projects.

Available Learning Tracks:

• Environment Setup: Development environment configuration
• Basic Concepts: AI communication and prompt engineering
• Tool Mastery: Cursor, v0, and modern development tools
• Project Implementation: Complete project walkthroughs
• Advanced Topics: AI drawing, chat systems, and Coze integration

3 AI Chat Assistant with RAG

An intelligent AI chat assistant powered by Cloudflare Workers AI, providing real-time Q&A support based on the course content. The assistant uses Retrieval-Augmented Generation (RAG) to provide accurate, context-aware answers.

sequenceDiagram
    participant User
    participant ChatWidget
    participant Worker as Cloudflare Worker
    participant Vectorize
    participant AI as Workers AI

    User->>ChatWidget: Ask question
    ChatWidget->>Worker: POST /api/chat
    Worker->>Vectorize: Search relevant docs
    Vectorize-->>Worker: Return matching chunks
    Worker->>AI: Generate response with context
    AI-->>Worker: Stream response
    Worker-->>ChatWidget: SSE stream
    ChatWidget-->>User: Display answer

Loading

Key Capabilities:

• 🤖 Intelligent Q&A: Answers questions based on course documentation
• 📚 RAG-Powered: Uses vector search to find relevant content
• 🌊 Streaming Responses: Real-time typing effect for better UX
• 🌐 Bilingual Support: Supports both Chinese and English
• 🎨 Theme Aware: Adapts to light/dark mode automatically

* Additional Features

Beyond the core learning modules, this platform includes:

• 🤖 AI Chat Assistant: Intelligent Q&A powered by Cloudflare Workers AI
• 📚 Rich Documentation: Comprehensive guides and references
• 🎨 Modern UI/UX: Beautiful design with dark/light themes
• 📝 Blog System: Regular updates and insights
• 🔍 Search Functionality: Find content quickly and easily (Algolia)
• 📊 Progress Tracking: Monitor your learning journey
• 💻 Code Examples: Interactive code snippets and demos
• 🚀 One-Click Deploy: Easy deployment to your own instance
• 📱 Mobile Optimized: Perfect experience on all devices
• 🌐 i18n Support: Full internationalization (Chinese & English)

✨ New content and features are continuously added as the field evolves.

🛠️ Tech Stack

Docusaurus 3.8

React 18

TypeScript

Workers AI

MDX

Vercel

Frontend Stack:

• Framework: Docusaurus 3.8.1 with React 18
• Styling: CSS3 + Custom Design System
• Content: MDX for rich interactive documentation
• Analytics: Vercel Analytics integration
• Search: Algolia DocSearch integration
• i18n: Chinese (zh-Hans) and English support
• Components: Custom React components (ChatWidget, BackToTop, etc.)

Backend Stack (AI Chat):

• Runtime: Cloudflare Workers (Edge Computing)
• AI Model: Llama 3.1 8B Instruct via Workers AI
• Embeddings: BGE Base EN v1.5 (768 dimensions)
• Vector Database: Cloudflare Vectorize (~4,800 document chunks)
• Session Storage: Cloudflare KV
• API: RESTful with SSE streaming

Development Tools:

• Build System: Rspack-based Docusaurus build (@docusaurus/faster)
• Development Server: Hot reload development environment
• Content Management: File-based content system with versioning
• Deployment: Vercel (Frontend) + Cloudflare Workers (Backend)
• Version Control: Git-based workflow

Tip

Each technology was selected for educational effectiveness, ease of maintenance, and optimal learning experience.

🏗️ Architecture

System Architecture

Tip

This architecture supports easy content management and scalable educational delivery, making it perfect for educational institutions and self-learners.

graph TB
    subgraph "Frontend - Docusaurus"
        A[MDX Documentation] --> B[React Components]
        B --> C[ChatWidget]
        B --> D[Theme Components]
        C --> E[i18n Support]
    end

    subgraph "Backend - Cloudflare Workers"
        F[Worker Entry] --> G[Chat Handler]
        G --> H[RAG Module]
        H --> I[Vectorize Search]
        H --> J[Workers AI]
        G --> K[KV Sessions]
    end

    subgraph "Deployment"
        L[Vercel CDN]
        M[Cloudflare Edge]
    end

    C -->|API Request| F
    J -->|Llama 3.1 8B| G
    I -->|BGE Embeddings| H
    A --> L
    F --> M

Loading

AI Chat Architecture

The AI Chat system uses a RAG (Retrieval-Augmented Generation) architecture to provide accurate, context-aware responses:

flowchart LR
    subgraph "Document Processing"
        A[MDX Files] -->|Parse| B[Text Chunks]
        B -->|Embed| C[Vector Store]
    end

    subgraph "Query Processing"
        D[User Query] -->|Embed| E[Query Vector]
        E -->|Search| C
        C -->|Top 3 Matches| F[Context]
    end

    subgraph "Response Generation"
        F --> G[System Prompt]
        D --> G
        G -->|Llama 3.1| H[AI Response]
        H -->|SSE Stream| I[Chat UI]
    end

Loading

Component	Technology	Purpose
Vector DB	Cloudflare Vectorize	Store 4,800+ document embeddings
Embeddings	BGE Base EN v1.5	Convert text to 768-dim vectors
LLM	Llama 3.1 8B Instruct	Generate conversational responses
Sessions	Cloudflare KV	Maintain conversation history
Streaming	Server-Sent Events	Real-time response delivery

Project Structure

ai-programming-teaching-project/
├── docs/                        # Current version documentation
│   ├── basics/                  # Fundamental concepts
│   ├── practice/                # Project implementations
│   └── website/                 # Website development tutorials
├── versioned_docs/              # Versioned documentation
│   ├── version-2024-winter/     # Winter 2024 curriculum
│   └── version-2025-summer/     # Summer 2025 curriculum
├── blog/                        # Blog posts
├── i18n/                        # Internationalization
│   ├── en/                      # English translations
│   └── zh-Hans/                 # Chinese translations
├── src/
│   ├── components/              # React components
│   │   ├── ChatWidget/          # AI Chat assistant
│   │   ├── BackToTop/           # Back to top button
│   │   ├── HomepageFeatures/    # Homepage features
│   │   └── WaveAnimation/       # Wave animation
│   ├── pages/                   # Custom pages
│   ├── theme/                   # Theme customizations
│   └── css/                     # Global styles
├── worker/                      # Cloudflare Worker backend
│   ├── src/
│   │   ├── index.ts             # Worker entry point
│   │   ├── chat.ts              # Chat logic & streaming
│   │   ├── rag.ts               # RAG & vector search
│   │   └── types.ts             # TypeScript types
│   ├── scripts/
│   │   └── seed-vectors.ts      # Document vectorization
│   ├── wrangler.toml            # Cloudflare configuration
│   └── package.json             # Worker dependencies
├── static/                      # Static assets
├── docusaurus.config.js         # Docusaurus configuration
├── sidebars.js                  # Sidebar configuration
└── package.json                 # Project dependencies

🚀 Getting Started

Prerequisites

Important

Ensure you have the following installed:

• Node.js 18.0+ (Download)
• npm/yarn/pnpm package manager
• Git (Download)
• Modern web browser

Quick Installation

1. Clone Repository

git clone https://github.com/ChanMeng666/ai-programming-teaching-project.git
cd ai-programming-teaching-project

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Start Development Server

npm start

🎉 Success! Open http://localhost:3000 to access the learning platform.

Development Mode

# Start with hot reload
npm start

# Build for production
npm run build

# Serve production build
npm run serve

# Clear cache
npm run clear

🛳 Deployment

Important

This project requires deploying both the frontend (Vercel) and backend (Cloudflare Workers) for full functionality.

A Frontend Deployment (Vercel)

One-Click Deploy:

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

B Backend Deployment (Cloudflare Workers)

Prerequisites:

• Cloudflare account with Workers enabled
• Wrangler CLI installed

Step 1: Configure Cloudflare Resources

cd worker

# Login to Cloudflare
npx wrangler login

# Create KV namespace for sessions
npx wrangler kv namespace create CHAT_SESSIONS

# Create Vectorize index for RAG
npx wrangler vectorize create docs-index --dimensions=768 --metric=cosine

Step 2: Update wrangler.toml

name = "ai-chat-worker"
main = "src/index.ts"
compatibility_date = "2024-12-01"
compatibility_flags = ["nodejs_compat"]

[ai]
binding = "AI"

[[kv_namespaces]]
binding = "CHAT_SESSIONS"
id = "<YOUR_KV_ID>"

[[vectorize]]
binding = "VECTORIZE"
index_name = "docs-index"

[vars]
CORS_ORIGIN = "*"

Step 3: Deploy Worker

# Install dependencies
npm install

# Deploy to Cloudflare
npx wrangler deploy

Step 4: Seed Vector Database

# Run document vectorization
npm run seed

C Docker Deployment

# Build Docker image
docker build -t ai-programming-platform .

# Run container
docker run -p 3000:3000 ai-programming-platform

Deployment Architecture

graph LR
    subgraph "User"
        A[Browser]
    end

    subgraph "Vercel"
        B[Static Site CDN]
    end

    subgraph "Cloudflare"
        C[Workers Edge]
        D[KV Storage]
        E[Vectorize]
        F[Workers AI]
    end

    A -->|HTTPS| B
    A -->|API Calls| C
    C --> D
    C --> E
    C --> F

Loading

📖 Learning Path

Beginner Level

Getting Started (Week 1-2):

1. Environment Setup - Configure your development environment
2. AI Communication - Learn effective AI interaction
3. Markdown Basics - Master documentation formatting

Intermediate Level

Tool Mastery (Week 3-5):

1. Cursor Editor - Advanced code editing with AI
2. v0 Platform - Rapid prototyping and development
3. Workflow Integration - Streamlined development processes

Advanced Level

Project Implementation (Week 6-8):

1. Complete Projects - Build real-world applications
2. AI Drawing - Creative AI applications
3. Chat Systems - Conversational AI development

Note

Each module includes hands-on exercises, practical examples, and assessment opportunities.

🔌 Integrations

We support integration with leading development and AI platforms:

Category	Platform	Status	Description
AI Chat	Cloudflare Workers AI	✅ Active	Llama 3.1 8B for intelligent Q&A
Vector Search	Cloudflare Vectorize	✅ Active	RAG-powered document retrieval
Session Storage	Cloudflare KV	✅ Active	Conversation history management
Code Editors	Cursor	✅ Active	AI-assisted code editing tutorials
Development	v0 Platform	✅ Active	Rapid prototyping guides
Deployment	Vercel	✅ Active	Frontend hosting & CDN
Search	Algolia DocSearch	✅ Active	Full-text documentation search
AI Tools	Coze	✅ Active	Chatbot development tutorials
Analytics	Vercel Analytics	✅ Active	Usage tracking & insights

Cloudflare Services Pricing

Service	Free Tier	Paid Pricing
Workers AI	10,000 Neurons/day	$0.011/1,000 Neurons
KV Storage	100K reads/day, 1GB	$0.50/million reads
Vectorize	30M queried dims/month	$0.01/million dims

Note

For typical educational usage (~50 daily conversations), the platform operates within free tier limits.

⌨️ Development

Local Development

Setup Development Environment:

# Clone repository
git clone https://github.com/ChanMeng666/ai-programming-teaching-project.git
cd ai-programming-teaching-project

# Install dependencies
npm install

# Start development server
npm start

Adding Content

Creating New Documentation:

# Create new doc file
touch docs/new-topic/index.mdx

Adding Blog Posts:

# Create new blog post
touch blog/YYYY-MM-DD-post-title.mdx

Content Structure:

---
title: Your Title
sidebar_position: 1
---

# Your Content

Your educational content here...

🤝 Contributing

We welcome contributions! Here's how you can help improve this educational platform:

Content Contributions:

• 📚 Add new tutorials and learning modules
• 🐛 Fix typos and improve existing content
• 💡 Suggest new topics and learning paths
• 🌐 Help with translations and localization

Technical Contributions:

• 🔧 Improve platform functionality
• 🎨 Enhance UI/UX design
• 📱 Optimize mobile experience
• ⚡ Performance improvements

Pull Request Process:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Open Source Benefits:

• ✅ Free for educational use
• ✅ Modification allowed
• ✅ Distribution permitted
• ✅ Commercial use allowed

👥 Team

Chan Meng Creator & Lead Developer UI/UX Designer & Full Stack Developer

🙋‍♀️ Author

Chan Meng

• LinkedIn: chanmeng666
• GitHub: ChanMeng666
• Email: chanmeng.dev@gmail.com
• Website: chanmeng.live

---

🚀 Building the Future of AI Programming Education 🌟
Empowering developers and learners worldwide

⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ by the AI Programming Education team

---