Skip to content

FEATURES.md

Latest commit

 

History

History
399 lines (309 loc) · 11.3 KB

FEATURES.md

File metadata and controls

399 lines (309 loc) · 11.3 KB
Raw

ProgChain Features Documentation

Overview

ProgChain is an AI-powered learning platform that helps developers learn programming concepts and create structured learning paths. It provides personalized learning experiences through multiple learning modes powered by AI.

🎯 Core Features

1. Topic Explorer - Interactive Learning Paths

What it does: Generates hierarchical learning paths for any programming topic with difficulty-based progression.

Key Features:

  • Hierarchical Topic Trees: Topics are organized in chains (e.g., Python → Async Programming → Asyncio)
  • Difficulty Levels: Each subtopic is categorized as Easy, Medium, or Hard
  • AI-Generated Content: Uses OpenAI to generate relevant subtopics and descriptions
  • Visual Learning Path: Frontend displays topics in an interactive flowchart/tree structure
  • Topic Chains: Persistent learning paths that can be saved and resumed

API Endpoints:

  • POST /topics/generate - Generate subtopics for a given topic path
  • POST /topics/create-topic-chain - Create a new topic learning chain

Database Models:

  • TopicChain: Represents a complete learning journey
  • BaseTopic: Main topic in the chain
  • SubTopic: Specific concepts with difficulty ratings

Example Use Case:

User asks: "Python"
→ System generates: Beginner (Variables, Functions), Intermediate (Classes, Decorators), Advanced (Metaclasses, Async)
→ User selects: "Async Programming"
→ System generates deeper subtopics for async programming

Frontend Component: client/src/components/topics/TopicChain.tsx

2. Explore Mode - Conversational Learning Assistant

What it does: Interactive Q&A system where users can explore any programming topic through conversation.

Key Features:

  • Research Assistant: AI acts as a programming tutor
  • Chat History: Maintains conversation context across sessions
  • Follow-up Questions: Ask clarifying questions on any topic
  • Multi-Model Support: Choose between different OpenAI models (GPT-4, GPT-3.5)
  • Vector Store Integration: Uses FAISS for semantic search and context retrieval
  • Conversation Management: Save, list, and delete exploration sessions

API Endpoints:

  • POST /explore/topic - Start exploring a new topic
  • POST /explore/question - Ask a follow-up question in an existing chat
  • POST /explore/chats/list - Get all saved exploration chats
  • GET /explore/chat/{chat_id} - Retrieve a specific chat session
  • DELETE /explore/chat/{chat_id} - Delete a chat session

Database Models:

  • Chat sessions with full conversation history
  • Message storage with timestamps

Frontend Component: client/src/components/explore/Explore.tsx

Example Flow:

User: "Explain how Python decorators work"
→ AI provides detailed explanation
User: "Can you show me a practical example?"
→ AI provides code examples
User: "How do I create a decorator with arguments?"
→ AI provides advanced examples

3. Learning Threads - Structured Content Generation

What it does: Creates multi-part learning content organized as threads with individual content pieces.

Key Features:

  • Thread Creation: Generate complete learning paths on any topic
  • Content Organization: Each thread contains multiple content pieces
  • Progressive Learning: Content is organized sequentially
  • Interactive Chat: Ask questions about specific content pieces
  • Content Expansion: Generate additional content for existing threads

API Endpoints:

  • POST /threads/create - Create a new thread and generate initial content
  • POST /threads/generate - Generate more content for an existing thread
  • GET /threads/ - List all threads
  • GET /threads/{thread_id} - Get all content for a specific thread
  • POST /threads/chat - Chat about specific thread content
  • GET /threads/chat/{thread_content_id} - Get chat history for content
  • POST /threads/chat/stop - Stop ongoing chat generation

Database Models:

  • Thread: Main learning topic container
  • ThreadContent: Individual learning content pieces
  • ThreadContentChat: Q&A sessions about specific content

Frontend Component: client/src/components/thread/Thread.tsx

Example Use Case:

User creates thread: "Advanced React Patterns"
→ System generates content:
  1. Render Props Pattern
  2. Higher-Order Components
  3. Custom Hooks Pattern
  4. Compound Components
→ User clicks on "Custom Hooks Pattern"
→ User asks: "When should I use custom hooks vs regular functions?"
→ AI provides contextual explanation

🎨 Frontend Features

UI Components

Modern Design System:

  • Dark mode by default
  • Radix UI components (accessible, customizable)
  • Tailwind CSS for styling
  • Framer Motion for animations
  • Responsive layouts

Key UI Features:

  1. Sidebar Navigation: Quick access to all features
  2. Streaming Responses: Real-time AI response display
  3. Markdown Rendering: Rich text formatting with code highlighting
  4. Math Rendering: LaTeX support via KaTeX
  5. Code Syntax Highlighting: Beautiful code blocks
  6. Interactive Flows: Visual node-based topic exploration
  7. Loading Animations: Custom AI thinking animations
  8. Toast Notifications: User feedback system

Frontend Routes

/                  → Explore Mode (default)
/explore           → Conversational Learning
/topics            → Topic Explorer
/threads           → Learning Threads
/history           → Chat History

🔧 Technical Architecture

Backend Stack

Framework: FastAPI (Python 3.11+)

  • Async/await throughout
  • Type hints with Pydantic
  • Automatic API documentation (Swagger/OpenAPI)
  • Server-Sent Events (SSE) for streaming

AI Integration:

  • OpenAI API: GPT-4, GPT-3.5 for content generation
  • LangChain: Orchestration framework
  • LangGraph: Advanced AI workflows
  • FAISS: Vector similarity search

Database:

  • SQLite with async support (aiosqlite)
  • SQLAlchemy ORM (async)
  • Database models with mixins (timestamps, public IDs)

Frontend Stack

Framework: React 18 + TypeScript

  • Vite for build tooling
  • React Router for navigation
  • Redux Toolkit for state management

UI Libraries:

  • Radix UI primitives
  • Tailwind CSS
  • shadcn/ui components
  • Framer Motion animations
  • Lucide React icons

Rendering:

  • React Markdown for content
  • Syntax highlighting
  • Math rendering (KaTeX)

🌟 Unique Selling Points

1. Multi-Modal Learning

ProgChain offers different learning approaches:

  • Topic exploration (structured)
  • Conversational learning (flexible)
  • Thread-based learning (sequential)

2. AI-Powered Personalization

  • Content adapts to user's learning path
  • Difficulty levels automatically adjusted
  • Context-aware responses
  • Follow-up question support

3. Real-Time Streaming

  • No waiting for complete responses
  • Progressive content loading
  • Better user experience
  • Efficient resource usage

4. Comprehensive Coverage

  • Any programming language
  • Any framework or technology
  • Theoretical concepts
  • Practical examples

📊 Feature Comparison

Feature ProgChain Stack Overflow Coursera
AI-Powered Q&A ✅ ❌ ❌
Topic Exploration ✅ ❌ ✅
Streaming Responses ✅ ❌ ❌
Personalized Paths ✅ ❌ ✅
Free to Use ✅* ✅ Partial

*Requires OpenAI API key

🎓 Learning Workflows

Beginner Workflow

1. Start with Explore Mode
   → Ask: "What is Python?"
   → Get foundational explanation

2. Use Topic Explorer
   → Generate learning path for Python
   → Follow beginner → intermediate → advanced

3. Review with Threads
   → Create structured content
   → Study systematically

Intermediate Workflow

1. Create Learning Thread
   → Topic: "Advanced JavaScript Patterns"
   → Get structured multi-part content

2. Deep Dive with Explore Mode
   → Ask specific questions
   → Get detailed explanations

3. Build Knowledge Base
   → Save important conversations
   → Create topic chains

Advanced Workflow

1. Thread-Based Learning
   → Create comprehensive topic threads
   → Study each section systematically

2. Specialized Topics
   → Explore cutting-edge concepts
   → Generate custom learning paths
   → Deep technical discussions

🔮 Future Feature Possibilities

Based on the current architecture, here are potential features:

Planned/In Development

  1. User Authentication - Personal accounts
  2. Progress Tracking - Learning analytics
  3. Code Execution - Run code in browser
  4. Collaborative Learning - Share with others
  5. Spaced Repetition - Memory retention

Technical Enhancements

  1. PostgreSQL Migration - Better scalability
  2. Redis Caching - Faster responses
  3. Rate Limiting - Fair usage
  4. Multi-Language Support - i18n
  5. Mobile App - React Native

Learning Features

  1. Quiz Generation - Test knowledge
  2. Code Challenges - Practice problems
  3. Video Integration - Multimedia learning
  4. Peer Review - Community feedback
  5. Flashcards - Quick review

💡 Use Cases

1. Self-Taught Developers

  • Learn new languages systematically
  • Get instant answers to questions
  • Build structured knowledge

2. Professional Development

  • Learn new frameworks quickly
  • Stay current with technology
  • Deep dive into specific topics

3. Students

  • Supplement coursework
  • Get additional explanations
  • Practice for exams

4. Technical Writers

  • Research topics thoroughly
  • Generate structured content
  • Understand complex concepts

🎯 Getting Started

Quick Start

  1. Explore Mode: Ask any programming question
  2. Topic Explorer: Enter a technology you want to learn
  3. Threads: Generate structured learning content

Best Practices

  • Start broad, then go deep
  • Use multiple learning modes
  • Save important conversations
  • Follow difficulty progressions

📈 Feature Metrics

Current Capabilities

  • 3 Main Learning Modes
  • 9+ API Endpoints
  • 35+ Frontend Components
  • Multiple AI Models Supported
  • Unlimited Topics Coverage
  • Real-time Streaming
  • Vector Search Enabled

🔗 Feature Dependencies

Core Infrastructure:
├── FastAPI (Backend)
├── React (Frontend)
├── OpenAI API (AI)
└── SQLite (Database)

Learning Features:
├── Topic Explorer
│   ├── AI Generation
│   ├── Difficulty Rating
│   └── Visual Display
│
├── Explore Mode
│   ├── Conversation AI
│   ├── Vector Search
│   └── Chat History
│
└── Threads
    ├── Content Generation
    ├── Thread Management
    └── Interactive Chat

📝 Summary

ProgChain is a focused AI-powered learning platform that combines:

  • Structured learning (Topic Explorer, Threads)
  • Conversational learning (Explore Mode)
  • Modern technology (Real-time streaming, Vector search)
  • Flexible architecture (Extensible, modular)

It's designed to help developers at all levels learn more effectively by providing multiple learning modes, AI assistance, and personalized experiences focused on deep understanding and structured knowledge building.