Project Brief

In this module, you will be implementing CRUD (Create, Read, Update, Delete) operations for managing resources in a web application. You will learn how to design APIs (procedures in tRPC-speak), validate and handle user input securely, caching and invalidating API responses, and interact with a database to perform CRUD operations.

There will also be an emphasis on best practices for building scalable and maintainable CRUD features, including error handling, pagination of results, and optimizing how data is fetched from the server.

Overview

What is CRUD?

CRUD stands for Create, Read, Update, and Delete — the four fundamental operations for managing persistent data in any application. These operations form the backbone of most web applications:

Operation	HTTP Method	Description	Example
Create	POST	Add new data to the system	Creating a new thread
Read	GET	Retrieve and display existing data	Viewing a list of threads
Update	PUT/PATCH	Modify existing data	Editing a thread's content
Delete	DELETE	Remove data from the system	Deleting a comment

Key Concepts

When implementing CRUD features, you'll work with several interconnected concepts:

1. Data Models — Define the structure of your data (e.g., Thread, Comment entities in Prisma)
2. Input Validation — Ensure data integrity with schemas (e.g., Zod validators)
3. API Endpoints — Expose CRUD operations via typed APIs (e.g., tRPC procedures)
4. Authorization — Control who can perform which operations (e.g., only authors can edit their content)
5. Cache Management — Keep the UI in sync with server state (e.g., React Query invalidation)
6. Optimistic Updates — Provide instant UI feedback before server confirmation

Recommended Approach

When building a new CRUD feature, follow this general order:

1. Design the data model — Define your Prisma schema with appropriate relations and constraints
2. Create validation schemas — Write Zod schemas for input validation (shared between client and server)
3. Implement service functions — Write business logic that interacts with the database
4. Add tRPC procedures — Create API endpoints with proper authentication and authorization
5. Build UI components — Create forms for input and components for display
6. Configure cache management — Set up React Query invalidation or optimistic updates

tip

In this lab, CREATE and READ operations are already implemented. Study these patterns before implementing UPDATE and DELETE — the structure will be very similar!

Implementation requirements

We will be implementing full CRUD (Create, Read, Update, Delete) operations on a "discussion forum" application, mainly on allowing users to create and manage discussion threads and comments.

This "Threads & Comments" feature allows authenticated users to create, view, edit, and delete discussion threads and comments.

The CREATE operation has been implemented for you as a starting point. You will need to implement the READ, UPDATE, and DELETE operations for both threads and comments.