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
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