Planner

Beautiful and easy-to-use Bullet Journal task management.

---

About

Planner is a minimalist Bullet Journal-inspired task manager designed to help you organize your tasks with focus and clarity.

It supports daily planning, monthly organization, habit tracking, collections, tags and filters through a clean and distraction-free interface.

Features

• Daily, Monthly, and Habits Views: Flexible layouts to manage tasks, schedule events, and log habit completions.
• Collections, Tags, and Filters: Rich hierarchical collection trees and flexible classification rules.
• PWA (Progressive Web App) Support: Fully installable on Desktop, iOS, and Android devices. Custom launch configurations and optimized asset precaching.
• Offline Mode & Local-First Flow: Browse the app shell and cached data offline, and seamlessly queue writes (POST, PATCH, PUT, DELETE) inside an IndexedDB-backed mutation store.
• Background Sync & ID Remapping: Automatically replays queued offline operations in strict FIFO order on reconnection. Automatically resolves client-minted temporary IDs with server-assigned IDs to prevent desyncing subsequent modifications.
• Debounced Connectivity Indicator: Small, non-intrusive network status pill with a debounced delay to prevent flashing and a sleek glassmorphic blur style.
• Real-Time WebSockets: Live synchronizations across tabs and devices via Socket.IO.
• List and Kanban Visualizations: Multiple ways to visualize your workspace.
• Modern Routing Architecture: Built on React Router v7 with declarative Splat path configuration.

Tech Stack

Installation

Requirements

• Node.js 20 or newer
• Docker and Docker Compose

Setup

cp .env.example .env

# Installs deps, runs migrations, starts api (4000) + app (5173) + Postgres + Redis
docker compose up -d

Open http://localhost:5173 in your browser.

Project Structure

planner/
├── api/
│   ├── src/
│   │   ├── index.ts
│   │   ├── middleware/
│   │   ├── routes/
│   │   ├── services/
│   │   └── db/
│   └── package.json
├── app/
│   ├── src/
│   │   ├── pages/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── stores/
│   │   ├── api/
│   │   └── utils/
│   └── package.json
├── docs/
└── compose.yml

Architecture

See DESIGN.md for detailed design system specification, component library, and visual guidelines. Data flow, service architecture, and real-time sync mechanisms documented in CLAUDE.md.

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a branch:

git checkout -b feature/my-feature

3. Commit your changes:

git commit -m "feat: add my feature"

4. Push the branch:

git push origin feature/my-feature

5. Open a pull request.

License

This project is licensed under the MIT License.