princemuel / kanban-task-manager

Task Management App (WIP)

Kanban Task Manager (In Progress)

The Kanban board is an easy-to-use agile project management tool using the Kanban methodology that helps you to visualize and manage workflows. It can be physical or digital and features columns representing stages of a process. Cards are used to track individual tasks and activities as they progress through the stages in a production pipeline. Tasks are arranged in columns according to their current status such as 'todo', 'doing' and 'done'. Columns can be added and named to be more specific to the needs of the team. The board allows the team to track potential bottlenecks in the pipeline if too many tasks end up sitting in one column. It also allows the team to estimate lead times for tasks in the pipeline.

Table of contents

• Kanban Task Manager (In Progress)
  • Table of contents
  • Overview
    • Screenshot
    • Project Links
  • My process
    • Building with
    • The challenge (Situation)
    • Expected Behaviour (Tasks)
  • Author

Overview

This project uses the STAR approach. Find out more about the Kanban methodology using the following resources

• Kanban
• Kanban Board
• Microsoft Devops
• Atlassian

Screenshot

Project Links

Press . on the keyboard to view this project's code in the github.dev code editor just like in Visual Studio Code

• Solution URL: Repository
• Live Site URL: Live Site

My process

Building with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind CSS - For composing component styles using utility classes

The challenge (Situation)

View the User Stories at the User Stories Markdown File

Expected Behaviour (Tasks)

• Boards
  • Clicking different boards in the sidebar will change to the selected board.
  • Clicking "Create New Board" in the sidebar opens the "Add New Board" modal.
  • Clicking in the dropdown menu "Edit Board" opens up the "Edit Board" modal where details can be changed.
  • Columns are added and removed for the Add/Edit Board modals.
  • Deleting a board deletes all columns and tasks and requires confirmation.
• Columns
  • A board needs at least one column before tasks can be added. If no columns exist, the "Add New Task" button in the header is disabled.
  • Clicking "Add New Column" opens the "Edit Board" modal where columns are added.
• Tasks
  • Adding a new task adds it to the bottom of the relevant column.
  • Updating a task's status will move the task to the relevant column. If taking on the drag and drop bonus, dragging a task to a different column will also update the status.

Author

• Website - Samuel Chukwuzube
• LinkedIn - @princemuel
• Twitter - @iamprincemuel