AppFlowy-IO/AppFlowy

Fork

You've already forked AppFlowy

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 12:56:59 +00:00

Code Issues 952 Projects Packages Wiki Activity

[GH-ISSUE #1728] [FR] AppFlowy Kanban board UI #662

New issue

Closed

opened 2026-03-23 20:39:23 +00:00 by mirror · 1 comment

mirror commented

2026-03-23 20:39:23 +00:00

Owner

Copy link

Originally created by @appflowy on GitHub (Jan 19, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1728

Originally assigned to: @Ascarbek on GitHub.

Description

Implement the Kanban Board of AppFlowy

In addition, these have been implemented in Flutter, you can refer to the implementation inside to organize your code or you can download the release AppFlowy to experience the interaction.

Prerequisites:

Follow this guide to see AppFlowy design principle and set up your development environment

Checklist

UI Sub Tasks

Make /kanban route
Heading and subheading UI with icon
Grid, Board and Group by text UI with icon
Group by dropdown UI
Search component UI
Setting up the kanban board with todo, In progress, complete, and new block columns UI
Column header component UI
Columns header component more option icon with dropdown UI along with search component
Column footer component UI
Card component UI
Card image UI
Card heading and date UI
Card more option icon with dropdown UI along with search component
Card tags/chips UI
Card multi tags/chips dropdown UI
Card progress bar UI along with percentage
Card user image and name heading UI

APIS Integration Sub Tasks

Implement Grid view
Implement Board view (Design missing)
Implement Group by dropdown functionality
Implement search functionality ie by name etc
Update the status label, color and count in columns header
Implement search functionality in column header dropdown
Implement status label in in column header dropdown
Implement status color in in column header dropdown
Implement delete functionality in column header dropdown
Implement hide column functionality in column header dropdown
Implement add new functionality on click of plus icon in column header dropdown(tbd)
Implement add new block functionality
Show dynamically card title and date
Assign multiple tags/chips functionality on card
Implement progress bar functionality with percentage on card
Show dynamically user image and name on card
Implement search functionality in card dropdown
Implement copy link functionality in card dropdown
Implement duplicate functionality in card dropdown
Implement delete functionality in card dropdown
Text dropdown in card (tbd)
Implement card drag functionality
Implement add new functionality in column footer

Required

Use React-TS to build the UI and follow the react design principles
Lint: https://github.com/prettier/prettier - https://prettier.io/docs/en/editors.html
i18n: https://github.com/i18next/react-i18next
State manager: https://github.com/reduxjs/react-redux
unit test: https://github.com/testing-library/react-testing-library
UI should support the Theme
Follow the DDD design principle

Resources :

AppFlowy Figma
AppFlowy release version
About AppFlowy Tauri

Impact

None

Additional Context

No response

Originally created by @appflowy on GitHub (Jan 19, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/1728 Originally assigned to: @Ascarbek on GitHub. ### Description ### Description Implement the Kanban Board of AppFlowy <img width="684" alt="image" src="https://user-images.githubusercontent.com/86001920/213378250-731ae16a-51de-4882-87dc-b040da4a62aa.png"> In addition, these have been implemented in Flutter, you can refer to the [implementation](https://github.com/AppFlowy-IO/AppFlowy/tree/main/frontend/app_flowy/lib/plugins/board) inside to organize your code or you can download the release [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy/releases) to experience the interaction. Prerequisites: Follow this [guide](https://www.notion.so/appflowy/Development-6eb9015951834853b394fc360c07a673) to see AppFlowy design principle and set up your development environment ### Checklist ### UI Sub Tasks - [x] Make `/kanban` route - [x] Heading and subheading UI with icon - [x] Grid, Board and Group by text UI with icon - [x] Group by dropdown UI - [x] Search component UI - [x] Setting up the kanban board with todo, In progress, complete, and new block columns UI - [x] Column header component UI - [ ] Columns header component more option icon with dropdown UI along with search component - [x] Column footer component UI - [x] Card component UI - [x] Card image UI - [x] Card heading and date UI - [ ] Card more option icon with dropdown UI along with search component - [ ] Card tags/chips UI - [ ] Card multi tags/chips dropdown UI - [ ] Card progress bar UI along with percentage - [ ] Card user image and name heading UI ### APIS Integration Sub Tasks - [ ] Implement Grid view - [ ] Implement Board view (Design missing) - [ ] Implement Group by dropdown functionality - [ ] Implement search functionality ie by name etc - [ ] Update the status label, color and count in columns header - [ ] Implement search functionality in column header dropdown - [ ] Implement status label in in column header dropdown - [ ] Implement status color in in column header dropdown - [ ] Implement delete functionality in column header dropdown - [ ] Implement hide column functionality in column header dropdown - [ ] Implement add new functionality on click of plus icon in column header dropdown(tbd) - [ ] Implement add new block functionality - [ ] Show dynamically card title and date - [ ] Assign multiple tags/chips functionality on card - [ ] Implement progress bar functionality with percentage on card - [ ] Show dynamically user image and name on card - [ ] Implement search functionality in card dropdown - [ ] Implement copy link functionality in card dropdown - [ ] Implement duplicate functionality in card dropdown - [ ] Implement delete functionality in card dropdown - [ ] Text dropdown in card (tbd) - [ ] Implement card drag functionality - [ ] Implement add new functionality in column footer # Required 1. Use **React-TS** to build the UI and follow the [react design principles](https://reactjs.org/docs/design-principles.html) 2. Lint: https://github.com/prettier/prettier - [https://prettier.io/docs/en/editors.html](https://prettier.io/docs/en/editors.html) 3. i18n: https://github.com/i18next/react-i18next 4. State manager: https://github.com/reduxjs/react-redux 5. unit test: https://github.com/testing-library/react-testing-library 6. UI should support the Theme 7. Follow the [DDD](https://www.notion.so/AppFlowy-React-c858a3f1bde04f88b75686192f6c8e6e) design principle Resources : 1. [AppFlowy Figma](https://www.figma.com/file/X1R9i5HAFtJSNIKOPPW7yK/AppFlowy-%5BUI%5D%5BMaster%5D?node-id=0%3A1&t=CR4OidJ8GnzNuUrD-1) 2. [AppFlowy release version](https://github.com/AppFlowy-IO/AppFlowy/releases) 3. [About AppFlowy Tauri](https://www.notion.so/About-749332384d1b45cd9ec67c61dda82ffe) ### Impact None ### Additional Context _No response_

mirror

2026-03-23 20:39:23 +00:00

closed this issue
added the
tauri
label

mirror commented

2026-03-23 20:39:24 +00:00

Author

Owner

Copy link

@om-ma commented on GitHub (Jan 31, 2023):

@om-ma commented on GitHub (Jan 31, 2023): hi

mirror referenced this issue

2026-03-23 21:37:03 +00:00

[PR #662] [CLOSED] Env scripts #4268

No Branch/Tag specified

main

copilot/fix-date-format-issue

feat/mention_a_person

merge_upstream_v6

mobile/release/0.9.3

release/0.9.3

release/0.9.2

select_source

release/0.9.1

refactor_import_data

release/0.8.9.1

release/0.8.9

anon_user_mode

release/0.8.8

fix_windows_selection

release/0.8.7

annieappflowy-patch-1

windows_local_ai

release/0.8.6

release/0.8.5

release/0.8.4

chore/optional-response-format

release/0.8.3

release/0.8.2

release/0.8.1

release/0.8.0

release/0.7.9

feat/support-rename-workspace

chat_rag_only

calculate_ui_test

release/0.7.8

release/0.7.7

stringfi_cells

hotfix/0.7.5

release/0.7.4

client-api-update

feat/collab-editing

fix_calculation_bug

feat/upload-file-in-document

update-client-api

feat/support-global-comment-on-web

update-client-api-2

feat/support-duplicate-publish-on-web

feat/ai-plan-billing

chore/test-web-deploy

chore/enable-billing-for-testing

build/test

ai_tag_feature

chore/enable-billing-plan

feat/billing-client-windows

chore/support-openai-chat

fix/try-no-media-kit

sign-in-error-format

workspace-invite-ci-test

last-workspace

workspace-invite-wip

feat/date-text-input

appflowy_v1

0.11.1

0.11.0

0.10.9

0.11.2

0.10.7

0.10.6

0.10.5

0.11.3

0.11.4

0.10.8

0.10.4

0.10.3

0.10.2

0.10.0

0.10.1

0.9.9

0.9.8

0.9.7

0.9.5

0.9.6

0.9.4

0.9.3

0.9.2

0.9.1

0.9.0

0.8.9

0.8.8

0.8.7

0.8.6

0.8.5

0.8.4

0.8.3

0.8.2

0.8.1

0.8.0

0.7.9

0.7.8

0.7.7

0.7.6

0.7.5

0.7.4

0.7.3

0.7.2

0.7.1

0.7.0

0.6.9

0.6.8

0.6.7.2

0.6.7.1

0.6.7

0.6.6

0.6.5

0.6.4

0.6.3

0.6.2

0.6.1

v0.6.1

0.6.0

0.5.9

0.5.8

0.5.7

0.5.6

0.5.5

0.5.4

0.5.3

0.5.2

0.5.1

0.5.0

0.4.9

0.4.8

0.4.7

0.4.6

0.4.5

0.4.4

0.4.3

0.4.2

0.4.1

0.4.0

0.3.9.1

0.3.9

0.3.8

0.3.7

0.3.6

0.3.5

0.3.4

0.3.3

0.3.2

0.3.1

0.3.0

0.2.9

0.2.8

0.2.7

0.2.6

0.2.5

0.2.4

0.2.3

0.2.2

0.2.1

0.2.0

0.1.6

0.1.5

0.1.4

0.1.3

0.1.2

0.1.1

0.1.0

0.0.9.1

0.0.9

0.0.8.1

0.0.8

0.0.7.1

0.0.7

0.0.6.2

0.0.6.1

0.0.6

0.0.6_beta.1

0.0.5.3

0.0.5.2

0.0.5.1

0.0.5

0.0.5_beta.2

0.0.5_beta.1

0.0.4

0.0.4_beta.3

0.0.4_beta.2

0.0.4_beta.1

0.0.3

0.0.3_beta.2

0.0.3_beta.1

0.0.2

0.0.1

Labels

Clear labels

good first issue for devs

good first issue for experienced devs

grid

hacktoberfest

HACKTOBERFEST-ACCEPTED

Mirrored from GitHub Pull Request

No labels

good first issue for devs

good first issue for experienced devs

grid

hacktoberfest

HACKTOBERFEST-ACCEPTED

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

AppFlowy-IO/AppFlowy#662

Reference in a new issue

Repository

AppFlowy-IO/AppFlowy

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns