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.
Prerequisites
- 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
Design the project management data model
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.
Build the project dashboard
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.
Create the Kanban task board
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.
Implement team assignment and notifications
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.
Build project reports and progress tracking
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 working example
1PROJECT MANAGEMENT TOOL SUMMARY2=====================================34DATA MODEL:5 Project: name, description, owner, members,6 status, start_date, due_date7 Milestone: project, name, due_date, is_completed8 Task: project, milestone, title, description,9 status, assigned_to, priority, due_date,10 estimated_hours, logged_hours11 Comment: task, author, content1213PROJECT DASHBOARD:14 RG: Projects where members contains Current User15 Cards: name, status, progress %, members, due date16 New Project form1718KANBAN BOARD:19 Columns: To Do, In Progress, Review, Done20 RG per column: Tasks filtered by status + project21 Cards: title, assignee, priority, due date22 Quick-add at column top23 Status change: buttons or drag-and-drop2425TEAM FEATURES:26 Assign: dropdown of project members27 Notifications: on assign, complete, comment28 My Tasks: cross-project view for Current User2930REPORTING:31 Completion %: done / total tasks32 Milestone timeline33 Team workload: tasks per member34 Task distribution: pie chart by status35 Project health: on track / at risk / delayedCommon mistakes when building a Project Management Tool in Bubble
Why it's a problem: Not filtering tasks by the current project in the Kanban board
How to avoid: Always include project = current project as a constraint on all task searches in the board
Why it's a problem: Allowing non-members to view or edit project tasks
How to avoid: Add Privacy Rules on Task and Project Data Types to restrict access to project members only
Why it's a problem: Calculating progress by counting milestones instead of tasks
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a project management tool in Bubble.io with Kanban boards, task assignment, milestones, and team collaboration. What data model should I use?
Help me build a project management app with a project dashboard, Kanban task board with To Do/In Progress/Review/Done columns, team assignment with notifications, and project progress reporting.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation