---
type: video
yt_id: VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmpYeVRJUU9mVFRr
videoId: jXyTIQOfTTk
title: "The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more"
date: "2024-04-30T13:00:45Z"
slug: "the-react-bun-and-hono-tutorial-2024-drizzle-kinde-tanstack-tailwind-typescript-rpc-and-more"
image: 
  name: "the-react-bun-and-hono-tutorial-2024-drizzle-kinde-tanstack-tailwind-typescript-rpc-and-more.jpg"
  alt: "The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more"
  width: 1280
  height: 720
status: 'published'
description: "This is a modern full-stack tutorial for anyone that wants to learn how to make a modern react SPA that works seamlessly with a bun & hono server. It's using all my favorite libraries and frameworks this setup will only get better as more upgrades come in the future. "
tags: []
---

This is a modern full-stack tutorial for anyone that wants to learn how to make a modern react SPA that works seamlessly with a bun & hono server. It's using all my favorite libraries and frameworks this setup will only get better as more upgrades come in the future. 

Features:
✅ Complete expense tracker app built from scratch using react 18/19, bun, and hono
✅ 100% backend and frontend TypeScript with validation using Zod
✅ Hono Typescript RPC for type safe HTTP requests
✅ User auth managed by Kinde Auth
✅ Tanstack Router, Query, and Form for the best UX and DX in an SPA
✅ Drizzle ORM for all interactions with a SQL Database
✅ Hosted on fly.io VPS
✅ Clean, modern UI using tailwind & shadcn-ui


Code, links, and other information: [https://app.eraser.io/workspace/EsxbsS4v2g7Otkihy95b](https://app.eraser.io/workspace/EsxbsS4v2g7Otkihy95b)


Help support me make videos: [https://ko-fi.com/meechward](https://ko-fi.com/meechward)

## Chapters:

* 0:00:00 - Intro
* 0:02:45 - Setup Bun and Hono
* 0:07:54 - Adding Routes
* 0:12:21 - Zod HTTP Validation
* 0:15:18 - Hono Zod Validator
* 0:16:52 - Dynamic Path Params
* 0:20:01 - Zod Improvements
* 0:21:35 - Setup React App with Vite
* 0:24:32 - Install Tailwind
* 0:25:35 - Why Tailwind?
* 0:29:12 - Shadcn
* 0:36:21 - HTTP Requests
* 0:38:29 - React Proxy
* 0:45:10 - Building the App
* 0:48:21 - Deploying the App (fly.io)
* 0:52:51 - Hono RPC
* 0:59:56 - Tanstack React Query
* 1:06:29 - Tanstack Router
* 1:16:12 - Get All Expenses
* 1:22:50 - Create New Expense
* 1:25:04 - Tanstack Form
* 1:35:01 - Kinde Auth
* 1:49:58 - Auth Middleware
* 1:53:38 - Authorized Routes
* 2:07:05 - Deploy Kinde
* 2:10:38 - Database
* 2:15:28 - Drizzle ORM
* 2:25:30 - Setup Neon
* 2:38:49 - Tanstack Form Zod
* 2:45:26 - Drizzle Zod
* 2:51:54 - Created At & Calendar
* 3:00:30 - UI Update
* 3:05:28 - Caching and Optimistic Update
* 3:28:20 - Delete Expense