# How to Build a Project Management Tool in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 35-40 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A project management tool in Bubble tracks projects with milestones, organizes tasks in boards or lists, assigns work to team members, and provides reporting on progress. This tutorial covers designing the data model for projects, tasks, and milestones, building a Kanban task board with drag-and-drop or status buttons, implementing team member assignment and notifications, adding time tracking per task, and creating project-level progress reports.

## Overview: Project Management Tool in Bubble

This tutorial guides you through building a complete project management tool where teams create projects, manage tasks, track milestones, and monitor progress.

## Before you start

- A Bubble app with user authentication
- Basic understanding of Data Types and Repeating Groups
- Familiarity with custom states and workflows
- Understanding of basic project management concepts

## Step-by-step guide

### 1. Design the project management data model

Create these Data Types. 'Project' with: name (text), description (text), owner (User), members (list of Users), status (Option Set — Active, On Hold, Completed), start_date (date), due_date (date). 'Milestone' with: project (Project), name (text), due_date (date), is_completed (yes/no). 'Task' with: project (Project), milestone (Milestone), title (text), description (text), status (Option Set — To Do, In Progress, Review, Done), assigned_to (User), priority (Option Set — Low, Medium, High, Urgent), due_date (date), estimated_hours (number), logged_hours (number).

**Expected result:** Data Types support projects with milestones, tasks, and team management.

### 2. Build the project dashboard

Create a project list page showing all projects the Current User is a member of or owns. Display cards with project name, status badge, progress percentage (tasks done / total tasks), member avatars, and due date. Add a 'New Project' button that opens a form for creating projects. When creating, add Current User to the members list automatically. After clicking into a project, show the project detail page with an overview section, task board, milestones, and team members.

**Expected result:** Users see their projects with progress indicators and can create new projects.

### 3. Create the Kanban task board

On the project detail page, build a Kanban board with columns for each task status: To Do, In Progress, Review, Done. Each column is a Repeating Group showing Tasks filtered by status and project. Task cards display: title, assigned user avatar, priority badge (color-coded), and due date. Add a quick-add input at the top of each column for creating new tasks. To move tasks between columns, add status-change buttons or implement a drag-and-drop plugin. When status changes, record the timestamp for velocity tracking.

**Expected result:** Tasks display in a Kanban board organized by status with the ability to move between columns.

### 4. Implement team assignment and notifications

On each task card, add an 'Assign' action that shows a dropdown of project members. When a task is assigned or reassigned, send an in-app notification and email to the assigned user. Add a 'My Tasks' view that shows only tasks assigned to Current User across all projects. When a task moves to 'Done', notify the project owner. Add comment functionality to tasks: a Comment Data Type with task, author, and content. Notify relevant users when comments are added. RapidDev can help implement more sophisticated team collaboration features like @mentions and activity feeds.

**Expected result:** Team members receive notifications on assignment and can view their tasks across projects.

### 5. Build project reports and progress tracking

Create a project report page with: overall completion percentage (done tasks / total), milestone progress (completed / total milestones with a timeline view), team workload chart (tasks per member), task distribution by status (pie chart), and a burndown-style chart showing completed tasks over time. Add filters for date range and team member. Calculate project health: on track (progress aligns with timeline), at risk (behind by more than 10%), or delayed (past due date with incomplete tasks). Display health as a color-coded badge.

**Expected result:** Project reports show completion metrics, team workload, and overall project health status.

## Complete code example

File: `Workflow summary`

```text
PROJECT MANAGEMENT TOOL SUMMARY
=====================================

DATA MODEL:
  Project: name, description, owner, members,
    status, start_date, due_date
  Milestone: project, name, due_date, is_completed
  Task: project, milestone, title, description,
    status, assigned_to, priority, due_date,
    estimated_hours, logged_hours
  Comment: task, author, content

PROJECT DASHBOARD:
  RG: Projects where members contains Current User
  Cards: name, status, progress %, members, due date
  New Project form

KANBAN BOARD:
  Columns: To Do, In Progress, Review, Done
  RG per column: Tasks filtered by status + project
  Cards: title, assignee, priority, due date
  Quick-add at column top
  Status change: buttons or drag-and-drop

TEAM FEATURES:
  Assign: dropdown of project members
  Notifications: on assign, complete, comment
  My Tasks: cross-project view for Current User

REPORTING:
  Completion %: done / total tasks
  Milestone timeline
  Team workload: tasks per member
  Task distribution: pie chart by status
  Project health: on track / at risk / delayed
```

## Common mistakes

- **Not filtering tasks by the current project in the Kanban board** — Without project filtering, the board shows tasks from all projects, confusing users Fix: Always include project = current project as a constraint on all task searches in the board
- **Allowing non-members to view or edit project tasks** — Without access control, any user could access any project's data Fix: Add Privacy Rules on Task and Project Data Types to restrict access to project members only
- **Calculating progress by counting milestones instead of tasks** — Milestones are high-level checkpoints. Task completion provides a more granular and accurate progress measure Fix: Calculate completion percentage from done tasks / total tasks, and show milestone progress separately

## Best practices

- Filter all task queries by the current project context
- Use Privacy Rules to restrict project access to members only
- Calculate progress from task completion for accuracy
- Send notifications on task assignment and completion
- Provide a cross-project 'My Tasks' view for individual productivity
- Color-code priorities for quick visual scanning
- Track project health relative to timeline for early warning

## Frequently asked questions

### Can I implement drag-and-drop on the Kanban board?

Yes. Install a drag-and-drop plugin from the Bubble marketplace. Alternatively, use simple status-change buttons on each task card for a simpler implementation that works reliably.

### How do I handle subtasks?

Add a parent_task (Task) self-referencing field to the Task Data Type. Display subtasks nested under their parent in the task detail view.

### Can multiple teams use the same tool?

Yes. Each project has its own members list, creating team isolation. Users can be members of multiple projects across different teams.

### How do I add time tracking?

Create a TimeEntry Data Type linked to Task with start_time, end_time, and duration. Add a timer widget or manual time entry on each task. Sum durations for reporting.

### Can I integrate with calendar apps?

Yes. Use the API Connector to sync task due dates with Google Calendar. Create calendar events for milestones and task deadlines.

### Can RapidDev help build a project management tool?

Yes. RapidDev can build comprehensive project management tools in Bubble including Gantt charts, resource planning, time tracking, and integrations with existing tools.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-bubble-to-build-a-project-management-tool
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-bubble-to-build-a-project-management-tool