https://github.com/d-luca/task_board
A modern desktop task board manager with Kanban interface, multi-project support, and embedded MongoDB. Built with Electron, React, TypeScript, and shadcn/ui. Zero configuration required - MongoDB auto-starts with the app.
https://github.com/d-luca/task_board
electron kanban mongodb react task-management typescript
Last synced: 2 months ago
JSON representation
A modern desktop task board manager with Kanban interface, multi-project support, and embedded MongoDB. Built with Electron, React, TypeScript, and shadcn/ui. Zero configuration required - MongoDB auto-starts with the app.
- Host: GitHub
- URL: https://github.com/d-luca/task_board
- Owner: d-luca
- License: mit
- Created: 2025-11-06T17:44:21.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-12T19:10:46.000Z (8 months ago)
- Last Synced: 2025-11-12T21:10:14.486Z (8 months ago)
- Topics: electron, kanban, mongodb, react, task-management, typescript
- Language: TypeScript
- Homepage:
- Size: 370 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](LICENSE)
## ✨ 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](https://docs.docker.com/get-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](./docs/MONGODB_SETUP.md) for detailed information.
### Installation
```bash
# 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
```bash
# 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](https://code.visualstudio.com/)
- Extensions:
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- TypeScript Hero
- ES7+ React/Redux/React-Native snippets
### Available Commands
```bash
# 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](https://www.electronjs.org/)
- UI components from [Radix UI](https://www.radix-ui.com/) & [shadcn/ui](https://ui.shadcn.com)
- Styled with [Tailwind CSS](https://tailwindcss.com/)
- DB used [MongoDB](https://docs.mongodb.com)
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.