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
Watch video The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more online, duration hours minute second in high quality that is uploaded to the channel Sam Meech-Ward 30 April 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 99,800 times and liked it 3.3 thousand visitors.
