Learn tRPC, NextJs & Prisma by building an ultimate blog app

Build a search plus topics section for a blog app using flex layouts, two divisions—search bar and topics—and styled inputs, chips, and a follow button.

Implement a next-auth authentication flow in a next.js app. Use useSession to show authenticated state and signIn to start the flow, with Google provider and client IDs.

Learn to implement a reusable Headless UI modal with a dialog component, uplift state via a global context, and manage open state across components for your blog app.

Build a blog post form with react-hook-form and zod, using useForm, register, and a zod resolver schema for title, description, and body, with validation errors.

Build a tRPC create post route in Next.js with Prisma, including input schema, protected mutation, slug generation, and author linkage via session.

Learn to build a blog post page in Next.js by routing post clicks to a slug-based post page, organizing components, and implementing a responsive layout with a max width container.

Build like and comment interactions on the post page with a fixed bottom panel, centered rounded icons, and hover transitions, gated by sign-in.

Add bookmarking to your blog app by implementing a toggle that saves and removes bookmarks with tRPC and Prisma, guarded by authentication, and synchronized via UI and cache updates.

Build the commenting functionality for the blog app by creating a sidebar UI, wiring the rpc route, and integrating sign-in and error handling.

Implement a create comment mutation using tRPC in a Next.js and Prisma blog app, including a react-hook-form UI, validation with zod, and posting comments linked to posts and users.

Fetch the authenticated user’s reading list (bookmarks) via a protected procedure, returning recent bookmarks with post title, description, and author details for display in the blog app.