A modern, intuitive task management application built with React, TypeScript, and ShadCN components. This application provides a powerful interface for organizing tasks into projects with hierarchical relationships, drag-and-drop functionality, and persistent storage.

• Task Management: Add, edit, and delete tasks with ease
• Project Organization: Organize tasks into projects and sub-tasks
• Hierarchical Structure: Create multi-level task hierarchies with parent-child relationships
• Drag & Drop: Intuitive drag-and-drop interface for reordering tasks and creating hierarchical relationships
• Persistent Storage: All data is stored in localStorage, ensuring your tasks persist across browser sessions

• Modern Design: Built with ShadCN components for a clean, professional look
• Responsive Layout: Works seamlessly across desktop and mobile devices
• Expandable Rows: Expand/collapse functionality for tasks with sub-tasks
• Visual Hierarchy: Clear visual indicators for task hierarchy levels
• Editable Cells: In-line editing for quick task updates

• Export Functionality: Export tasks as HTML table with proper hierarchy classes
• Column Customization: Show/hide columns based on your workflow needs
• Rich Text Editing: Enhanced text editing capabilities for detailed task descriptions
• Tooltip Support: Contextual help and information throughout the interface

Each task row includes:

• Drag Handle: For reordering and hierarchy management
• Expand/Collapse Button: For tasks with children (sub-tasks)
• Delete Button: Quick task removal
• Editable Cells: Click-to-edit functionality for all task properties
• Add New Row: Empty row at the bottom for quick task addition

• Frontend Framework: React 19.1.0
• Language: TypeScript
• Build Tool: Vite 7.0.4
• Styling: Tailwind CSS 4.1.11
• UI Components: ShadCN/UI with Radix UI primitives
• Drag & Drop: React DnD with HTML5 backend
• Icons: Lucide React and Fluent UI React Icons
• Rich Text: React Simple WYSIWYG

• Node.js (v18 or higher)
• npm, bun, or yarn package manager
• Docker (optional, for containerized deployment)

# Clone the repository
git clone <repository-url>
cd Planner

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

# Clone the repository
git clone <repository-url>
cd Planner

# Install dependencies
bun install

# Start development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

# Run linting
bun run lint

The application will be available at http://localhost:5173 (or the next available port).

# Pull and run the latest image
docker run -p 43801:43801 hamcker/planner:latest

The application will be available at http://localhost:43801.

# Build the Docker image
docker build -t planner-app .

# Run the container
docker run -p 43801:43801 planner-app

Create a docker-compose.yml file:

version: '3.8'
services:
  planner:
    image: hamcker/planner:latest
    ports:
      - "43801:43801"
    restart: unless-stopped

Run with:

docker-compose up -d

1. Add Your First Task: Use the empty row at the bottom to create your first task
2. Create Sub-tasks: Drag tasks to create hierarchical relationships
3. Edit Tasks: Click on any cell to edit task details
4. Expand/Collapse: Use the expand button to show/hide sub-tasks
5. Reorder Tasks: Drag tasks to reorder them within the same level

• Click the export button to download your tasks as an HTML table
• Exported tables include hierarchy classes (level-0, level-1, etc.)
• Only visible columns are included in the export

• All tasks are automatically saved to your browser's localStorage
• No data is lost when you refresh the page or close the browser
• To reset all data, clear your browser's localStorage for the domain

src/
├── components/
│   ├── Gantt/                 # Gantt chart components (future feature)
│   ├── Table/                 # Task table components
│   │   ├── Table.tsx         # Main table component
│   │   ├── TableRow.tsx      # Individual task row
│   │   ├── types.ts          # TypeScript type definitions
│   │   └── index.ts          # Component exports
│   └── ui/                   # Reusable UI components
│       ├── button.tsx        # Button component
│       ├── ColumnChooser.tsx # Column visibility selector
│       ├── RichTextEditor.tsx # Rich text editing
│       └── tooltip.tsx       # Tooltip component
├── lib/
│   └── utils.ts              # Utility functions
├── assets/                   # Static assets
├── App.tsx                   # Main application component
├── main.tsx                  # Application entry point
└── index.css                 # Global styles

The application can be configured using environment variables:

# Development
VITE_APP_TITLE=Planner
VITE_PORT=5173

# Production
VITE_BUILD_PATH=dist

• Styling: Modify tailwind.config.js for custom themes
• Components: Extend ShadCN components in src/components/ui/
• Types: Update TypeScript definitions in src/components/Table/types.ts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

• ESLint: Configured with React and TypeScript rules
• TypeScript: Strict type checking enabled
• Prettier: Code formatting (recommended to configure)

The built application can be deployed to any static hosting service:

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront
• Firebase Hosting

The Docker image can be deployed to:

• Docker Hub
• AWS ECS/Fargate
• Google Cloud Run
• Azure Container Instances
• Kubernetes clusters

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

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

Hamed Zakeri Miyab (Hamit Zekeriya)

• Gantt Chart View: Visual timeline representation of tasks
• Due Dates: Task scheduling and deadline management
• Priority Levels: Task prioritization system
• Search & Filter: Advanced task filtering capabilities
• Collaboration: Multi-user support and sharing
• Data Export: Additional export formats (JSON, CSV, PDF)
• Themes: Dark mode and custom theme support
• Mobile App: Native mobile applications

• Virtual scrolling for large task lists
• Optimistic updates for better UX
• Offline support with service workers
• Advanced caching strategies

Built with ❤️ using React, TypeScript, and modern web technologies.