Learning System Web App

A comprehensive learning management system that automatically detects and loads Markdown lessons from the ./lessons/ directory, extracts action items, and provides progress tracking with milestone markers.

Features

🚀 Automatic Lesson Detection

• Scans ./lessons/ directory for Markdown files
• Automatically loads and parses lesson content
• Extracts action items from "What I Should Try Next" sections

📊 Progress Tracking

• Track completion of individual action items
• Visual progress bars and percentages
• Milestone system with achievement badges
• Persistent progress storage (JSON file)

📱 Modern Web Interface

• Dashboard: Overview of all lessons and progress
• Lessons: Browse and read full lesson content
• Action Items: Filter and manage tasks by lesson, status, or category
• Responsive design that works on all devices

🎯 Smart Action Item Extraction

The system intelligently extracts action items from markdown files by:

• Finding sections titled "What I Should Try Next"
• Parsing numbered lists with bold titles (1. **Title** description)
• Organizing items by category (### headers)
• Including sub-items and detailed descriptions

Quick Start

Prerequisites

• Node.js (no external dependencies required)
• Markdown lesson files in ./lessons/ directory

Installation & Setup

1. Clone or download the Learning System

cd /path/to/learning-system

2. Start the application

node server.js

Or use the start script:

node start.js

3. Open your browser Navigate to http://localhost:3000

Adding Lessons

1. Create Markdown files in the ./lessons/ directory
2. Include a "What I Should Try Next" section with action items
3. The system will automatically detect and load them

Example Lesson Structure

# Lesson Title

## Overview
Brief description of what this lesson covers...

## Key Concepts
Main concepts explained...

## What I Should Try Next

### Immediate Actions
1. **First action** - Description of what to do
2. **Second action** - More details here

### Advanced Topics
1. **Advanced task** - For when you're ready
2. **Expert level** - Challenge yourself

### Best Practices
- Always test your work
- Document your progress
- Share with others

File Structure

learning-system/
├── server.js              # Main server application
├── start.js               # Startup script
├── package.json           # Project configuration
├── progress.json          # Progress data (auto-generated)
├── lessons/               # Markdown lesson files
│   ├── lesson1.md
│   └── lesson2.md
├── public/                # Frontend assets
│   ├── index.html         # Main web interface
│   ├── css/
│   │   └── styles.css     # Application styles
│   └── js/
│       └── app.js         # Frontend JavaScript
└── README.md              # This file

API Endpoints

GET /api/lessons

Returns all lessons with extracted action items and progress data.

Response:

[
  {
    "id": "lesson-name",
    "title": "Lesson Title",
    "overview": "Brief description...",
    "content": "Full markdown content...",
    "actionItems": [
      {
        "id": "action-1",
        "title": "Action Title",
        "description": "Detailed description",
        "category": "Category Name",
        "completed": false,
        "difficulty": "medium"
      }
    ],
    "totalItems": 10,
    "completedItems": 3,
    "progress": 30
  }
]

POST /api/progress

Update progress for a specific action item.

Request body:

{
  "lessonId": "lesson-name",
  "itemId": "action-1",
  "completed": true
}

Features in Detail

Dashboard

• Progress Overview: Visual cards showing completion status for each lesson
• Milestones: Achievement system with 6 levels (Getting Started → Completed!)
• Recent Activity: Track your learning journey (planned feature)

Lesson Browser

• Browse all available lessons
• Click to view full lesson content in modal
• See progress and action item counts at a glance

Action Items Manager

• Filter by lesson, completion status, or category
• Check off completed items
• See difficulty levels and descriptions
• Track which lesson each item belongs to

Progress Persistence

• All progress automatically saved to progress.json
• Survives server restarts
• Can be backed up or transferred

Customization

Adding New Lesson Formats

Modify the extractActionItems() function in server.js to support different markdown patterns.

Styling

Edit public/css/styles.css to customize the appearance. The CSS uses CSS custom properties for easy theming.

Milestones

Modify the milestone definitions in public/js/app.js to add custom achievement levels.

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile responsive design
• Progressive enhancement

Troubleshooting

Lessons not loading

• Ensure markdown files are in ./lessons/ directory
• Check that files have .md extension
• Verify "What I Should Try Next" section exists

Action items not extracted

• Ensure proper markdown formatting:
  • Use ### Category Name for categories
  • Use 1. **Title** description for numbered items
  • Include "What I Should Try Next" section

Progress not saving

• Check file permissions in the project directory
• Ensure server has write access for progress.json

License

MIT License - Feel free to modify and distribute.

Contributing

This is a self-contained learning system. Feel free to fork and customize for your needs!

---

Happy Learning! 📚✨