This is a modern fullstack 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 & shadcnui


Code, links, and other information: https://app.eraser.io/workspace/Esxbs...


Help support me make videos: https://kofi.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