Set Up the Starter App

The starter is the completed Kanban Board from the previous chapter. It is a React + TypeScript + Vite app with Convex, dnd-kit, and shadcn/ui already installed. Before we start adding features, let’s get it running.

Install Dependencies

pnpm install

Create a Convex Project

The starter has a convex/ directory with the schema and task functions from the previous chapter, but it is not connected to a Convex deployment yet. You need to create a new project.

In a terminal, run:

npx convex dev

This walks you through creating a new Convex project. When prompted:

• Choose to create a new project (not link to an existing one)
• Give it a name like project-planner
• Choose “cloud deployment” over “local deployment (BETA)”
• Say no to any AI-related features Convex offers to install or add to the codebase

Once setup completes, npx convex dev stays running — it watches your convex/ directory and pushes changes to your development backend automatically.

Run the Frontend

Open a second terminal and start the Vite dev server:

pnpm dev

You should see the Kanban Board from the previous chapter, with three columns and no tasks yet. It works the same way it did before, but now it is backed by your new Convex project.

Run Both Servers with One Command

Having two terminals open works, but it is easy to forget one. Let’s combine them into a single dev command using concurrently.

Stop both servers (Ctrl+C in each terminal), then install concurrently as a dev dependency:

pnpm add -D concurrently

Now update the scripts section in package.json:

"scripts": {
  "dev": "concurrently -n convex,vite -c blue,green \"npx convex dev\" \"vite\"",
  "dev:backend": "npx convex dev",
  "dev:frontend": "vite",
  "build": "tsc -b && vite build",
  "lint": "eslint .",
  "format": "prettier --write \"**/*.{js,ts,jsx,tsx}\" --config \".prettierrc.json\"",
  "preview": "vite preview"
}

The dev script uses concurrently to run both the Convex backend and Vite frontend in a single terminal. The -n flag gives each process a label, and -c assigns colors so you can tell their output apart. The dev:backend and dev:frontend scripts are there if you ever need to run them separately.

Now one command starts both servers:

pnpm dev

Checkpoint: Commit your progress.

git add .
git commit -m "planner-01: Add concurrently to run the backend and frontend together"
git push