project-manager

project management following a tree-like architecture

Minimalist Project Manager

A hierarchical project management tool built with vanilla HTML, CSS, and JavaScript. This single-page application provides a clean, dark-themed interface for organizing projects, areas, components, folders, and todos with advanced search, filtering, and data management capabilities.

🚀 Features

Hierarchical Organization

• Projects: Top-level containers for your work
• Areas: Organize projects into functional areas
• Components: Break down areas into specific components
• Folders: Create nested folder structures
• TODOs: Track tasks with priorities and statuses

Advanced Task Management

• TODO Categories: Build vs Fix tasks
• Priority Levels: Critical, High, Medium, Low
• Status Tracking: Pending, In Progress, Done
• Progress Visualization: Automatic progress bars and completion stats

Powerful Search & Filtering

• Real-time Search: Search across names, descriptions, types, and metadata
• Multi-criteria Filtering: Filter by priority and status
• Smart Results: Auto-expand matching nodes and ancestors
• Combined Filtering: Use search and filters simultaneously

Tree Navigation

• Expandable Tree View: Hierarchical sidebar navigation
• Expand/Collapse All: Quick tree state management
• Visual Indicators: Color-coded node types and status indicators
• Breadcrumb Navigation: Easy path tracking

Data Management

• Local Storage: Automatic data persistence
• Import/Export: JSON-based backup and restore
• Real-time Updates: Instant UI updates on changes
• State Preservation: Remembers expanded nodes and selections

User Experience

• Dark Theme: Easy on the eyes with VS Code-inspired design
• Responsive Layout: Works on desktop and tablet devices
• Keyboard Friendly: Accessible interface design
• Inline Editing: Quick status and priority updates

🎯 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No server setup required - runs entirely in the browser

Installation

1. Download the HTML file or clone this repository
2. Open index.html in your web browser
3. Start creating your project hierarchy!

First Steps

1. Create a Project: Click the "+ New Project" button in the header
2. Add Structure: Use the tree actions or main content buttons to add areas, components, and folders
3. Create TODOs: Add tasks with priorities and track their progress
4. Organize: Use the search and filters to navigate large hierarchies

📋 Usage Guide

Creating Content

• New Project: Use the header button to create top-level projects
• Add Children: Click the "+" button next to any node or use the main content area buttons
• Edit Items: Click the pencil icon or select a node to edit in the main area

Navigation

• Tree View: Click nodes in the sidebar to select and view details
• Expand/Collapse: Use arrow icons or the "Expand All"/"Collapse All" buttons
• Breadcrumbs: Click breadcrumb items to navigate up the hierarchy

Search & Filtering

• Search: Type in the search box to find items by name, description, or metadata
• Filter by Priority: Click priority buttons to show only specific priority levels
• Filter by Status: Click status buttons to show only specific statuses
• Clear Filters: Use the "Clear All" button to reset all filters

TODO Management

• Categories: Choose between "Build" (new features) and "Fix" (bug fixes)
• Priorities: Set Critical, High, Medium, or Low priority levels
• Status Updates: Change status inline or in the detailed view
• Progress Tracking: View completion percentages and statistics

Data Management

• Auto-save: All changes are automatically saved to browser localStorage
• Export: Download your entire project structure as a JSON file
• Import: Upload a previously exported JSON file to restore data
• Backup: Regular exports recommended for data safety

🏗️ Data Structure

Node Types Hierarchy

Project
├── Area
│   ├── Component
│   │   ├── Folder
│   │   └── TODO
│   ├── Folder
│   └── TODO
├── Folder
└── TODO

Node Properties

• Basic: id, type, name, description, createdAt, updatedAt
• TODO-specific: status, category, priority
• Relationships: children[] array for nested items

TODO Categories

• Build: New features, enhancements, additions
• Fix: Bug fixes, corrections, maintenance

Priority Levels

• Critical: Urgent, blocking issues
• High: Important, high-impact tasks
• Medium: Standard priority items
• Low: Nice-to-have, low-impact tasks

Status Types

• Pending: Not started
• In Progress: Currently being worked on
• Done: Completed tasks

🔧 Technical Details

Technology Stack

• Frontend: Vanilla HTML5, CSS3, JavaScript (ES6+)
• Storage: Browser localStorage
• Styling: CSS Custom Properties (CSS Variables)
• Architecture: Single-page application with component-like structure

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Performance

• Efficient tree rendering with minimal DOM manipulation
• Local storage for instant data access
• Optimized search algorithms for real-time filtering
• Memory-efficient state management

Data Storage

// localStorage keys
'projectManagerData'  // Main data structure
'expandedNodes'       // Tree expansion state

Export Format

{
  "data": {
    "version": "1.0",
    "organization": "My Organization",
    "projects": [...]
  },
  "expandedNodes": ["node_id_1", "node_id_2"],
  "exportedAt": "2024-01-01T00:00:00.000Z"
}

📁 File Structure

project-manager/
├── index.html          # Complete single-file application
├── README.md          # This documentation
└── examples/          # Example project files (optional)
    ├── sample-export.json
    └── templates/

🎨 Customization

Theme Colors

Modify CSS custom properties in the :root selector:

:root {
  --color-project: #4a9eff;     /* Project nodes */
  --color-area: #4ec9b0;        /* Area nodes */
  --color-component: #dcdcaa;   /* Component nodes */
  --priority-critical: #ff4757; /* Critical priority */
  /* ... more variables ... */
}

Node Type Rules

Modify the getAllowedChildTypes() method to change hierarchy rules:

getAllowedChildTypes(nodeType) {
  const rules = {
    'project': ['area', 'folder', 'todo'],
    'area': ['component', 'folder', 'todo'],
    // ... customize as needed
  };
  return rules[nodeType] || [];
}

🤝 Contributing

This is a single-file application perfect for customization:

1. Fork or copy the HTML file
2. Modify the code to suit your needs
3. Test in multiple browsers
4. Share your improvements!

Common Enhancement Ideas

• Add due dates to TODOs
• Implement time tracking
• Add file attachments
• Create project templates
• Add collaboration features
• Implement data synchronization

📝 License

This project is open source and available under the MIT License.

🆘 Support

Troubleshooting

• Data Loss: Use regular exports as backups
• Performance: Large hierarchies (1000+ nodes) may slow down search
• Browser Issues: Clear localStorage and refresh if problems occur

FAQ

Q: Can I use this for team collaboration? A: Currently, this is a single-user application with local storage. For team use, consider implementing a backend with data synchronization.

Q: How much data can I store? A: Limited by browser localStorage (typically 5-10MB). For large projects, regular exports are recommended.

Q: Can I customize the node types? A: Yes! Modify the JavaScript code to add new node types and hierarchy rules.

Q: Is my data secure? A: Data is stored locally in your browser. Use exports for backups and be cautious on shared computers.

---

Made with ❤️ using vanilla web technologies

A minimalist approach to project management that grows with your needs.