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

Initialize a t3 app with create t3-app and explore the folder structure. Set up node and npm, install dependencies, and prepare Next.js, Prisma, and tRPC for your blog project.

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.

Design and build the blog post list layout using flexbox and grid, rendering posts with avatars, images, titles, descriptions, tags, and borders, while planning stable keys and future Prisma-backed ids.

Builds the app's sidebar with a two-column layout featuring a 'people you might be interested in' section and a 'reading list' of bookmarks, including avatars, follow buttons, and responsive cards.

Learn to implement a sticky reading list and a responsive sidebar for a Next.js blog app by adjusting heights, applying sticky positioning with top and left, and refining overflow.

Set up a local Postgres instance with supabase local, install docker and supabase CLI, configure the db URL, run migrations with Prisma to create tables, and prepare the sign-in flow.

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.

Explore using a remote serverless database with Planet Scale to power a blog app. Seed the db with Prisma, create branches, and deploy seeds using a script and faker.

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.

Implement a tRPC like feature by creating a protected mutation that saves a like row with user id and post id, using the session, and update the UI.

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.

Build an animated right-side comments sidebar in a Next.js blog app using Headless UI transitions and dialog, controlled by a comment icon with responsive width and sign-in flow.

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.

Learn to save a generated username on user signup with NextAuth by deriving from the user name or a random string, and persist it in the database using Prisma migrations.

Explore building a user profile page UI in a tRPC, NextJs & Prisma powered blog app, featuring a header, gradient hero, avatar, and post feed with responsive layout.

Fetch and render the current user's posts on their profile page using tRPC with Next.js and Prisma, including user name, post count, and a share/copy url feature.

Learn how to implement avatar upload in a Next.js app using Supabase storage, including owner verification, uploading via data URLs, and updating the user profile with the public image URL.