codeseed
Sign in
Explore Projects
TypeScriptintermediatewebAI generated

Kanban Board App with Drag-and-Drop

Build a Trello-style kanban board where users create boards, lists, and cards, and reorder cards via drag-and-drop, with state persisted to a backend. Learners practice React with TypeScript generics for reusable components, drag-and-drop libraries, and optimistic UI updates.

Estimate
~12.5h
Steps
6
Completed by
0
Proposed by
codeseed.app

React · dnd-kit · Zustand

Sign in to claim this project

Project roadmap

  1. 01

    Scaffold the app

    ~1.5h

    Set up a React project with TypeScript and configure a Zustand store.

  2. 02

    Model board, list, and card types

    ~1.5h

    Define typed interfaces for boards, lists, and cards in the store.

  3. 03

    Build typed board components

    ~2.5h

    Build reusable board, list, and card components with generic, strongly typed props.

  4. 04

    Integrate drag-and-drop

    ~3h

    Use dnd-kit to support dragging cards between lists and reordering them.

  5. 05

    Implement optimistic updates

    ~2h

    Update the UI immediately on drag, rolling back if the backend call fails.

  6. 06

    Connect to a mock backend

    ~2h

    Persist board state to a mock REST API and sync changes on load.

Resources

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~12.5h · 6 steps

Tech stack

Reactdnd-kitZustand