Taskboard Pro Development by Vaibhav KumawatTaskboard Pro Development by Vaibhav Kumawat

Taskboard Pro Development

Vaibhav Kumawat

Completed work

Fullstack Engineer

MongoDB

Node.js

React

Computer Software

Taskboard Pro

A modern project management and collaboration platform designed to help teams organize, track, and manage their tasks efficiently with real-time updates and workflow automation.

Introduction

Taskboard Pro is a full-stack task management application built with React, Node.js, Express, and MongoDB. It enables teams to collaborate on projects, manage tasks using a Kanban-style board, communicate via comments, and automate repetitive workflows.

The application offers:

A responsive UI for all devices

Real-time updates via WebSockets

Customizable workflows and automation rules

Detailed analytics to track project progress

Features

Project Management

Project Creation & Organization: Create new projects, add descriptions, and organize work.

Customizable Statuses: Define your own workflow stages (To Do, In Progress, Review, Done, etc.).

Team Collaboration: Invite team members and assign roles (owner, member).

Task Management

Kanban Board View: Drag-and-drop interface for managing tasks.

Task Details: Title, description, assignee, due date, priority, urgency.

Comments & Discussions: Threaded comments on tasks.

Task Assignments: Assign tasks with email notifications.

User Experience

Real-time Updates: Instant changes via WebSocket integration.

Responsive Design: Works on desktop, tablet, and mobile.

Notifications: In-app for assignments, mentions, and status changes.

Workflow Automation

Custom Automation Rules: "If this, then that" style automations.

Triggers: Status change, assignment change, due date passed.

Actions: Move tasks, assign badges, send notifications.

Achievement Badges: Gamification elements.

Security & Access Control

Authentication: Secure user authentication with Firebase.

Role-Based Access: Different permissions for owners/members.

Data Protection: Encrypted storage and secure API endpoints.

API Documentation

All endpoints (except registration/login) require authentication via a Bearer token:

Authorization: Bearer <your-jwt-token>

Projects API

Endpoint Method Description Request Body Response /api/projects GET Get all projects for current user - Array of project objects /api/projects POST Create a new project {title, description} Created project object /api/projects/:projectId GET Get a specific project - Project object /api/projects/:projectId PUT Update a project {title, description} Updated project object /api/projects/:projectId DELETE Delete a project - Success message /api/projects/:projectId/invite POST Invite user to project {email} Success message /api/projects/:projectId/members/:userId DELETE Remove user from project - Success message

Tasks API

Endpoint Method Description Request Body Response /api/tasks POST Create a new task {title, description, projectId, status, assignee, dueDate, priority, isUrgent} Created task object /api/tasks/project/:projectId GET Get all tasks for a project - Array of task objects /api/tasks/user/assigned GET Get tasks assigned to current user - Array of task objects /api/tasks/:taskId GET Get a specific task - Task object /api/tasks/:taskId PUT Update a task Task fields to update Updated task object /api/tasks/:taskId/status PATCH Update task status {status} Updated task object /api/tasks/:taskId DELETE Delete a task - Success message /api/tasks/project/:projectId/statuses PUT Update project statuses {statuses: []} Updated project object

Comments API

Endpoint Method Description Request Body Response /api/comments POST Create a comment {taskId, content} Created comment object /api/comments/task/:taskId GET Get comments for a task - Array of comment objects /api/comments/:commentId DELETE Delete a comment - Success message

Automations API

Endpoint Method Description Request Body Response /api/automations POST Create automation rule Automation object Created automation object /api/automations/project/:projectId GET Get automations for project - Array of automation objects /api/automations/:automationId PUT Update automation Automation fields Updated automation object /api/automations/:automationId DELETE Delete automation - Success message /api/automations/badges GET Get user badges - Array of badge objects /api/automations/notifications GET Get user notifications - Array of notification objects

Database Schema

Click to expand collections

Project

{
  _id: ObjectId,
  title: String,
  description: String,
  createdBy: String, // Firebase UID
  members: [
    {
      userId: String, // Firebase UID
      email: String,
      role: String, // 'owner' or 'member'
      name: String,
      joinedAt: Date
    }
  ],
  statuses: [String], // e.g., ['To Do', 'In Progress', 'Done']
  createdAt: Date,
  updatedAt: Date
}

Task

{
  _id: ObjectId,
  title: String,
  description: String,
  projectId: ObjectId, // ref: Project
  status: String,
  assignee: {
    userId: String,
    email: String,
    name: String
  },
  dueDate: Date,
  isUrgent: Boolean,
  priority: String, // '', 'low', 'medium', 'high'
  createdBy: String,
  createdAt: Date,
  updatedAt: Date
}

Comment

{
  _id: ObjectId,
  taskId: ObjectId, // ref: Task
  projectId: ObjectId, // ref: Project
  content: String,
  author: {
    userId: String,
    name: String,
    email: String,
    photoURL: String
  },
  createdAt: Date,
  updatedAt: Date
}

Automation

{
  _id: ObjectId,
  projectId: ObjectId, // ref: Project
  name: String,
  isActive: Boolean,
  trigger: {
    type: String, // 'STATUS_CHANGE', 'ASSIGNMENT_CHANGE', 'DUE_DATE_PASSED'
    fromStatus: String,
    toStatus: String,
    assigneeEmail: String
  },
  action: {
    type: String, // 'MOVE_TASK', 'ASSIGN_BADGE', 'SEND_NOTIFICATION'
    targetStatus: String,
    badgeName: String,
    notificationText: String,
    notifyAssignee: Boolean,
    notifyCreator: Boolean,
    notifyProjectOwners: Boolean
  },
  createdBy: String,
  createdAt: Date,
  updatedAt: Date
}

Badge

{
  _id: ObjectId,
  userId: String,
  name: String,
  description: String,
  projectId: ObjectId, // ref: Project
  taskId: ObjectId, // ref: Task
  automationId: ObjectId, // ref: Automation
  awardedAt: Date
}

Notification

{
  _id: ObjectId,
  userId: String,
  type: String, // 'TASK_ASSIGNED', 'TASK_UPDATED', 'COMMENT_ADDED', 'AUTOMATION_TRIGGERED'
  title: String,
  content: String,
  relatedProjectId: ObjectId, // ref: Project
  relatedTaskId: ObjectId, // ref: Task
  isRead: Boolean,
  createdAt: Date
}

Database Schema Diagram

┌─────────────┐       ┌─────────────┐
│  Project    │       │   Task      │
├─────────────┤       ├─────────────┤
│ _id         │<──────│ projectId   │
│ members[]   │       │ assignee    │
│ statuses[]  │       │ ...         │
└─────┬───────┘       └─────┬───────┘
      │                     │
      ▼                     ▼
┌─────────────┐       ┌─────────────┐
│ Automation  │<──────│ Comment     │
├─────────────┤       ├─────────────┤
│ projectId   │       │ projectId   │
│ action      │       │ taskId      │
│ ...         │       │ ...         │
└─────┬───────┘       └─────┬───────┘
      │                     │
      ▼                     ▼
┌─────────────┐       ┌─────────────┐
│   Badge     │<──────│ Notification│
└─────────────┘       └─────────────┘

System Architecture

┌──────────────┐           ┌──────────────┐           ┌──────────────┐
│ React Frontend│◄───────►│ Express API  │◄───────►  │  MongoDB     │
│   (Vite)     │  HTTP    │  (Node.js)   │           │              │
└──────────────┘           └──────────────┘           └──────────────┘
        │                        │
        ▼                        ▼
    WebSocket                Socket.io
      (Client)                (Server)

┌──────────────┐
│  Firebase    │
│Authentication│
└──────────────┘

Getting Started

Prerequisites

Node.js (v16 or higher)

MongoDB

Firebase account for authentication

Installation

Clone the repository

git clone https://github.com/Va16hav07/Taskboard-pro.git
cd Taskboard-pro

Install dependencies for backend and frontend

# Backend
cd Backend
npm install

# Frontend
cd ../Frontend
npm install

Create environment files

# Backend
touch .env

# Frontend
touch .env

Set environment variables

Backend (.env):

# Firebase Configuration
FIREBASE_TYPE=service_account
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_PRIVATE_KEY_ID=your-private-key-id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYour Private Key Content\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxx@your-project-id.iam.gserviceaccount.com
FIREBASE_CLIENT_ID=your-client-id
FIREBASE_AUTH_URI=https://accounts.google.com/o/oauth2/auth
FIREBASE_TOKEN_URI=https://oauth2.googleapis.com/token
FIREBASE_AUTH_PROVIDER_CERT_URL=https://www.googleapis.com/oauth2/v1/certs
FIREBASE_CLIENT_CERT_URL=https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-xxxx%40your-project-id.iam.gserviceaccount.com

# App Configuration
PORT=3000
NODE_ENV=development

# JWT Secret
JWT_SECRET=your-jwt-secret

Frontend (.env):

# Firebase Configuration
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id

# API Configuration
VITE_API_URL=http://localhost:3000/api

# Feature Flags
VITE_ENABLE_PREMIUM_FEATURES=false

Start the development servers

# Backend
cd Backend
npm run dev

# Frontend (in another terminal)
cd Frontend
npm run dev

Frontend: http://localhost:5173 Backend API: http://localhost:5000

Like this project

Completed work

Posted Jul 10, 2025

Developed Taskboard Pro, a task management app with React, Node.js, and MongoDB.

Likes

Views

Taskboard Pro Development

Vaibhav Kumawat

Completed work

Fullstack Engineer

MongoDB

Node.js

React

Computer Software

Taskboard Pro

A modern project management and collaboration platform designed to help teams organize, track, and manage their tasks efficiently with real-time updates and workflow automation.

Introduction

The application offers:

A responsive UI for all devices

Real-time updates via WebSockets

Customizable workflows and automation rules

Detailed analytics to track project progress

Features

Project Management

Project Creation & Organization: Create new projects, add descriptions, and organize work.

Customizable Statuses: Define your own workflow stages (To Do, In Progress, Review, Done, etc.).

Team Collaboration: Invite team members and assign roles (owner, member).

Task Management

Kanban Board View: Drag-and-drop interface for managing tasks.

Task Details: Title, description, assignee, due date, priority, urgency.

Comments & Discussions: Threaded comments on tasks.

Task Assignments: Assign tasks with email notifications.

User Experience

Real-time Updates: Instant changes via WebSocket integration.

Responsive Design: Works on desktop, tablet, and mobile.

Notifications: In-app for assignments, mentions, and status changes.

Workflow Automation

Custom Automation Rules: "If this, then that" style automations.

Triggers: Status change, assignment change, due date passed.

Actions: Move tasks, assign badges, send notifications.

Achievement Badges: Gamification elements.

Security & Access Control

Authentication: Secure user authentication with Firebase.

Role-Based Access: Different permissions for owners/members.

Data Protection: Encrypted storage and secure API endpoints.

API Documentation

All endpoints (except registration/login) require authentication via a Bearer token:

Authorization: Bearer <your-jwt-token>

Projects API

Tasks API

Comments API

Automations API

Database Schema

Click to expand collections

Project

{
  _id: ObjectId,
  title: String,
  description: String,
  createdBy: String, // Firebase UID
  members: [
    {
      userId: String, // Firebase UID
      email: String,
      role: String, // 'owner' or 'member'
      name: String,
      joinedAt: Date
    }
  ],
  statuses: [String], // e.g., ['To Do', 'In Progress', 'Done']
  createdAt: Date,
  updatedAt: Date
}

Task

{
  _id: ObjectId,
  title: String,
  description: String,
  projectId: ObjectId, // ref: Project
  status: String,
  assignee: {
    userId: String,
    email: String,
    name: String
  },
  dueDate: Date,
  isUrgent: Boolean,
  priority: String, // '', 'low', 'medium', 'high'
  createdBy: String,
  createdAt: Date,
  updatedAt: Date
}

Comment

{
  _id: ObjectId,
  taskId: ObjectId, // ref: Task
  projectId: ObjectId, // ref: Project
  content: String,
  author: {
    userId: String,
    name: String,
    email: String,
    photoURL: String
  },
  createdAt: Date,
  updatedAt: Date
}

Automation

{
  _id: ObjectId,
  projectId: ObjectId, // ref: Project
  name: String,
  isActive: Boolean,
  trigger: {
    type: String, // 'STATUS_CHANGE', 'ASSIGNMENT_CHANGE', 'DUE_DATE_PASSED'
    fromStatus: String,
    toStatus: String,
    assigneeEmail: String
  },
  action: {
    type: String, // 'MOVE_TASK', 'ASSIGN_BADGE', 'SEND_NOTIFICATION'
    targetStatus: String,
    badgeName: String,
    notificationText: String,
    notifyAssignee: Boolean,
    notifyCreator: Boolean,
    notifyProjectOwners: Boolean
  },
  createdBy: String,
  createdAt: Date,
  updatedAt: Date
}

Badge

{
  _id: ObjectId,
  userId: String,
  name: String,
  description: String,
  projectId: ObjectId, // ref: Project
  taskId: ObjectId, // ref: Task
  automationId: ObjectId, // ref: Automation
  awardedAt: Date
}

Notification

{
  _id: ObjectId,
  userId: String,
  type: String, // 'TASK_ASSIGNED', 'TASK_UPDATED', 'COMMENT_ADDED', 'AUTOMATION_TRIGGERED'
  title: String,
  content: String,
  relatedProjectId: ObjectId, // ref: Project
  relatedTaskId: ObjectId, // ref: Task
  isRead: Boolean,
  createdAt: Date
}

Database Schema Diagram

┌─────────────┐       ┌─────────────┐
│  Project    │       │   Task      │
├─────────────┤       ├─────────────┤
│ _id         │<──────│ projectId   │
│ members[]   │       │ assignee    │
│ statuses[]  │       │ ...         │
└─────┬───────┘       └─────┬───────┘
      │                     │
      ▼                     ▼
┌─────────────┐       ┌─────────────┐
│ Automation  │<──────│ Comment     │
├─────────────┤       ├─────────────┤
│ projectId   │       │ projectId   │
│ action      │       │ taskId      │
│ ...         │       │ ...         │
└─────┬───────┘       └─────┬───────┘
      │                     │
      ▼                     ▼
┌─────────────┐       ┌─────────────┐
│   Badge     │<──────│ Notification│
└─────────────┘       └─────────────┘

System Architecture

┌──────────────┐           ┌──────────────┐           ┌──────────────┐
│ React Frontend│◄───────►│ Express API  │◄───────►  │  MongoDB     │
│   (Vite)     │  HTTP    │  (Node.js)   │           │              │
└──────────────┘           └──────────────┘           └──────────────┘
        │                        │
        ▼                        ▼
    WebSocket                Socket.io
      (Client)                (Server)

┌──────────────┐
│  Firebase    │
│Authentication│
└──────────────┘

Getting Started

Prerequisites

Node.js (v16 or higher)

MongoDB

Firebase account for authentication

Installation

Clone the repository

git clone https://github.com/Va16hav07/Taskboard-pro.git
cd Taskboard-pro

Install dependencies for backend and frontend

# Backend
cd Backend
npm install

# Frontend
cd ../Frontend
npm install

Create environment files

# Backend
touch .env

# Frontend
touch .env

Set environment variables

Backend (.env):

# Firebase Configuration
FIREBASE_TYPE=service_account
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_PRIVATE_KEY_ID=your-private-key-id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYour Private Key Content\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxx@your-project-id.iam.gserviceaccount.com
FIREBASE_CLIENT_ID=your-client-id
FIREBASE_AUTH_URI=https://accounts.google.com/o/oauth2/auth
FIREBASE_TOKEN_URI=https://oauth2.googleapis.com/token
FIREBASE_AUTH_PROVIDER_CERT_URL=https://www.googleapis.com/oauth2/v1/certs
FIREBASE_CLIENT_CERT_URL=https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-xxxx%40your-project-id.iam.gserviceaccount.com

# App Configuration
PORT=3000
NODE_ENV=development

# JWT Secret
JWT_SECRET=your-jwt-secret

Frontend (.env):

# Firebase Configuration
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id

# API Configuration
VITE_API_URL=http://localhost:3000/api

# Feature Flags
VITE_ENABLE_PREMIUM_FEATURES=false

Start the development servers

# Backend
cd Backend
npm run dev

# Frontend (in another terminal)
cd Frontend
npm run dev

Frontend: http://localhost:5173 Backend API: http://localhost:5000

Like this project

Completed work

Posted Jul 10, 2025

Developed Taskboard Pro, a task management app with React, Node.js, and MongoDB.

Likes

Views

Taskboard Pro Development

Taskboard Pro

Table of Contents

Introduction

Features

Project Management

Task Management

User Experience

Workflow Automation

Security & Access Control

API Documentation

Projects API

Tasks API

Comments API

Automations API

Database Schema

Project

Task

Comment

Automation

Badge

Notification

Database Schema Diagram

System Architecture

Getting Started

Prerequisites

Installation

Taskboard Pro Development

Taskboard Pro

Table of Contents

Introduction

Features

Project Management

Task Management

User Experience

Workflow Automation

Security & Access Control

API Documentation

Projects API

Tasks API

Comments API

Automations API

Database Schema

Project

Task

Comment

Automation

Badge

Notification

Database Schema Diagram

System Architecture

Getting Started

Prerequisites

Installation