Multi-Project Task Board Manager

A modern desktop application for managing multiple task boards (projects) with a beautiful kanban-style interface. Built with Electron, React, TypeScript, MongoDB, Tailwind CSS, and shadcn/ui.

✨ Features

• 🎯 Multi-Project Support: Manage multiple task boards, each representing a different project
• 📋 Kanban Board: Visual drag-and-drop interface with To Do, In Progress, and Done columns
• 🎨 Modern UI: Beautiful, accessible components using shadcn/ui and Tailwind CSS
• 🗄️ Persistent Storage: MongoDB database for reliable data persistence with auto-startup
• ⚡ Fast & Responsive: Built with Vite for lightning-fast development and builds
• 🔒 Type-Safe: Full TypeScript support throughout the stack
• 🖥️ Cross-Platform: Native desktop app for Windows, macOS, and Linux
• 🎯 Task Management: Priority levels, due dates, labels, and checklists
• 🔄 Zero Configuration: MongoDB automatically starts with the app - no setup required
• 📱 System Tray Integration: Run in background with quick access from system tray
• 💾 Easy Import/Export: Backup and restore your data easily

🚀 Quick Start

Prerequisites

• Node.js v18 or higher
• pnpm (install with: npm install -g pnpm)
• Docker (for development only - Install Docker)

Note: MongoDB is automatically managed by the app:

• Development: Uses Docker (auto-starts when you run pnpm dev)
• Production: Embedded MongoDB included in the app (no external dependencies)
• First Run: May take 2-5 minutes to download MongoDB binaries (~50-100 MB)
• Subsequent Runs: Starts instantly using cached binaries

See MongoDB Setup Guide for detailed information.

Installation

# Clone the repository
cd /your/path/here

# Install dependencies
pnpm install


### Development

```bash
# Start the development server (MongoDB auto-starts via Docker)
pnpm dev

# Or manually manage MongoDB:
pnpm mongo:start   # Start MongoDB
pnpm mongo:stop    # Stop MongoDB
pnpm mongo:logs    # View MongoDB logs

The app will open in a new window with hot reload enabled.

Build

# Build for production
pnpm build

# Package for Windows
pnpm build:win

# Package for macOS
pnpm build:mac

# Package for Linux
pnpm build:linux

First Launch (Production Build)

When you run the built application for the first time:

1. Loading Screen Appears: You'll see a loading screen with progress messages
2. Binary Download: MongoDB binaries (~50-100 MB) will be downloaded automatically
   • This takes 2-5 minutes depending on your internet speed
   • Progress messages keep you informed of what's happening
3. Automatic Startup: Once download completes, the app starts automatically
4. Subsequent Launches: Take only 2-5 seconds using cached binaries

Tip: If the loading screen shows a warning after 2 minutes, check your internet connection. The app will timeout after 5 minutes if download fails.

🏗️ Technology Stack

Frontend

• React 18+ - Modern UI library with hooks
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Accessible component library
• @dnd-kit - Drag and drop functionality
• Zustand - Lightweight state management
• React Hook Form + Zod - Form validation

Desktop Framework

• Electron - Cross-platform desktop framework
• Electron Builder - Packaging and distribution

Backend & Database

• MongoDB - Document database
• Mongoose - MongoDB ODM
• Node.js - JavaScript runtime

Development Tools

• Vite - Fast build tool
• pnpm - Efficient package manager
• ESLint - Code linting
• Prettier - Code formatting

📁 Project Structure

task_board/
├── src/
│   ├── main/                    # Electron main process
│   │   ├── index.ts
│   │   ├── database/            # MongoDB models and services
│   │   └── ipc/                 # IPC handlers
│   ├── preload/                 # Preload scripts
│   │   └── index.ts             # IPC bridge
│   └── renderer/                # React frontend
│       ├── src/
│       │   ├── components/      # React components
│       │   │   ├── ui/          # shadcn/ui components
│       │   │   ├── layout/      # Layout components
│       │   │   ├── project/     # Project components
│       │   │   └── task/        # Task components
│       │   ├── hooks/           # Custom React hooks
│       │   ├── store/           # Zustand stores
│       │   ├── types/           # TypeScript types
│       │   └── lib/             # Utilities
│       └── index.html
├── package.json
├── electron.vite.config.ts
├── tailwind.config.js
└── components.json              # shadcn/ui config

🎯 Key Features Details

Multi-Project Management

• Create and manage multiple independent task boards
• Quick project switching with keyboard shortcuts
• Project customization (colors, icons, settings)
• Archive completed projects

Task Board

• Kanban-style board with drag-and-drop

Desktop Integration

• System tray integration: Minimize to tray, quick access to common actions
• Native notifications: Desktop notifications for important events
• Keyboard shortcuts:
  • Ctrl/Cmd + N - New Task
  • Ctrl/Cmd + Shift + N - New Project
  • Ctrl/Cmd + E - Export Data
  • Ctrl/Cmd + I - Import Data
  • Ctrl/Cmd + Shift + T - Toggle window visibility
• Window state persistence: Remember size, position, and maximized state
• Cross-platform support: Consistent experience on Windows, macOS, and Linux
• Comprehensive logging: Access logs via Help → Open Log File for troubleshooting descriptions

Desktop Integration

🛠️ Development

Recommended IDE Setup

• VS Code
• Extensions:
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • TypeScript Hero
  • ES7+ React/Redux/React-Native snippets

Available Commands

# Development
pnpm dev              # Start development server (auto-starts MongoDB)
pnpm start            # Start built app in preview mode

# Building
pnpm build            # Build for production
pnpm build:win        # Build Windows installer
pnpm build:mac        # Build macOS installer
pnpm build:linux      # Build Linux installer

# MongoDB Management (Development)
pnpm mongo:start      # Start Docker MongoDB manually
pnpm mongo:stop       # Stop Docker MongoDB
pnpm mongo:logs       # View MongoDB logs

# Code Quality
pnpm typecheck        # Type checking
pnpm lint             # Run ESLint
pnpm format           # Format code with Prettier
```bash
pnpm dev              # Start development server
pnpm build            # Build for production
pnpm typecheck        # Type checking
pnpm lint             # Run ESLint
pnpm format           # Format code with Prettier

Development Workflow

🐛 Troubleshooting

App Won't Open After Installation

1. Check the log file: Help → Open Log File (or %APPDATA%\taskboard\logs\)
2. Ensure you have a stable internet connection (first run downloads MongoDB binaries)
3. Wait up to 5 minutes on first launch for MongoDB setup
4. Try running as administrator if permission errors occur

MongoDB Connection Issues

• Development: Ensure Docker is running (docker ps should show dt_mongo)
• Production: Check logs for detailed error messages
• Network: If behind a proxy, MongoDB download may fail

Loading Screen Stuck

• If stuck for more than 5 minutes, close and restart the app
• Check internet connection
• Review logs for timeout or network errors
• Try deleting %APPDATA%\taskboard\mongodb-binaries and restarting

🙏 Acknowledgments

• Built with Electron
• UI components from Radix UI & shadcn/ui
• Styled with Tailwind CSS
• DB used MongoDB

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.