Project Planner App

In the previous chapter, we built a Kanban Board, a single-project task manager backed by Convex. It taught us the core primitives: schema, queries, mutations, useQuery, useMutation, and real-time reactivity.

In this chapter, we will extend that app into a Project Planner, an app where users can create multiple projects, each with its own set of tasks organized in a kanban board. We will also learn how to work with related tables, write efficient queries with indexes, paginate large result sets, and handle complex backend operations with internal functions and scheduled functions.

Getting Started

Go to the project-planner 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> project-planner
cd project-planner
code .

The starter is the completed Kanban Board from the previous chapter, a React + TypeScript + Vite app with Convex already configured. By the end of this chapter, it will manage multiple projects, each with its own tasks.

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

Learning Outcomes

  • Design and build a multi-table Convex schema with relationships between projects and tasks
  • Implement full CRUD operations across related tables, including cascade deletes and soft deletes
  • Use indexes, pagination, and full-text search to query data efficiently at scale
  • Use internal functions, scheduled functions, and cron jobs to handle backend operations that exceed a single mutation
  • Seed a database with sample and generated data for development and testing
  • Deploy a full-stack Convex application to production

Sections

  1. Set Up the Starter App
  2. Schema Design — Two Related Tables
  3. CRUD Operations for Projects
  4. Wire Up the Project UI
  5. UI Components for Projects
  6. Project Detail Page and Kanban Board
  7. Fetch Tasks by Project
  8. Database Index for Tasks Table
  9. The Cascade Delete
  10. The Cascade Delete Problem
  11. Soft Delete Projects
  12. Schedule Cleanup with a Cron Job
  13. Seed the Database
  14. Paginate the Project List
  15. Generate Test Data with a Seed Script
  16. Add a Search Bar
  17. Search with a Full-Text Search Index
  18. Wrap Up the Project Planner
  19. Practice Questions