Skip to content

README.md

Latest commit

 

History

History
214 lines (168 loc) · 5.66 KB

README.md

File metadata and controls

214 lines (168 loc) · 5.66 KB

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
  1. Start the application
node server.js

Or use the start script:

node start.js
  1. 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! 📚✨