Kanban Board App

In this tutorial, you will build a Kanban Board, a visual task manager with three columns: To Do, In Progress, and Done. You will start with a working React app that stores data in the browser’s localStorage, then replace that local storage with Convex, a backend platform that gives you a database, server-side functions, and real-time sync. You will not have to set up a server yourself.

Getting Started

Go to the kanban repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> kanban-board
cd kanban-board
code .

The template is a TypeScript React app scaffolded with Vite. It includes Tailwind CSS, shadcn/ui, and TanStack Store for state management. Install dependencies and start the dev server:

pnpm install
pnpm dev

You should see a kanban board with three columns and a few sample tasks.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Explain why an application needs a real backend and database instead of browser-only storage, and describe Convex’s mental model
  • Define a Convex schema and write type-safe queries and mutations to read and write data from a React app
  • Wire a React UI to a Convex backend using useQuery and useMutation, including loading states and generated document types
  • Explain and demonstrate Convex’s real-time reactivity across clients, including optimistic updates for a smooth user experience
  • Add drag-and-drop interactions to a React app using a third-party library, and evaluate third-party libraries before adopting them
  • Deploy a full-stack app with a Convex backend and a React frontend to production

Sections

  1. Explore the Starter App
  2. Introduction to Convex
  3. Set Up Convex
  4. Define the Schema
  5. Write Your First Query
  6. Wire Up useQuery
  7. Using Convex Document Types
  8. Write Mutations
  9. Wire Up useMutation
  10. Update Task Status and Delete Tasks
  11. Remove the Local Store
  12. Real-Time Reactivity
  13. Add Drag and Drop
  14. Add Droppable Areas
  15. Draggable Task Cards
  16. Smooth the Drop with Optimistic Updates
  17. Choosing Libraries
  18. Deploy the Kanban App
  19. Practice Questions