The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more

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/Esxbs...


Help support me make videos: 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