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
✅ Clean, modern UI using tailwind & shadcn-ui

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

[tstkenny]

One of the very few tutorials I can turn the caption off entirely and completed the whole thing. Please do more like this if you can! Thank you for the great content!!!

[Steven]

As a former student of Sam, I want to express my gratitude. We weren't particularly close, but he was undoubtedly one of my favorite instructors at the institute. Sam was not only incredibly patient, always answering my questions no matter how basic, but he also did so with a warm, encouraging smile. He was funny, interesting, and refreshingly no-nonsense, all while remaining humble. The lesson that stuck with me the most from Sam was his philosophy on programming: write the least amount of code to accomplish the most. Watching his video brought back those valuable teachings and even taught me something new.

[aashishkathait]

build the whole project, took full 3 days to implement & understand concept.

Feedback:
1. The part where you show the highlighted diagram to show what we are implementing next is great.
2. Way of teaching is very concise and to the point, which is good thing.
3. I think actual length of the video would be around 7hr, there are too many small cuts in between video which are easily detectable and pace of the video was too high for me so had to watch at 0.75x

[ron-almog]

Every youtube video that I watch these days is using either Kinde or Clerk, as if nobody is bothering to build an auth systems any more. And I wonder if that's the case, or are we being influenced by tech influencers to that direction? Let me remind you: a website with 1 million active users will have to pay any of these companies $20, 000 per month! and when you reach that scale, it's too late to go back. so beware and plan ahead. this is nice for demos, poc's and maybe some small community websites. for any serious startup, you are risking your financial stability. my apologies to the sponsor ;)

[michaeljoyce]

Great video, especially your pace and the little breakout sessions with the diagrams - really helped solidify conceptually the mental model of local dev vs prod and client vs server.

[sirvosterzo]

As a seasoned back-end dev migrating to full-stack, the amount of useful, easily absorbable information packed in less than 4 hours is impressive.

[_jacobdev]

This is really fantastic - I started a hono project at work this week and this video has been such a good source of info for everything I've needed. Thanks!

[sourabhjana]

Thank you for explaining a bunch of tools in one short, crisp video! 🙏

[journeyofc]

Took almost 3 days, but I did it. Thank you so much for this amazing tutorial.

[kenbee]

This is such a great tutorial. I'm learning frontend framework, right now vue but have plans with react. Me coming from WordPress Development, this is a treat. Thanks

[madmaxdev]

Just completed this video. Amazing Content. Looking forward to more videos like this.

[samihamdan]

Thank you. I really want to get into full stack (finished education), and this has shown me an idea of what I need to learn and study.

[rostam_jabbaroff]

The first thing worth noting is that this is a unique educational material where the instructor indeed explains a system that can be integrated and operates across multiple technologies. The systematic approach and engineering mindset are evident. Additionally, during the presentation, I didn't have to squint to see everything the instructor was doing, as he consistently maximized the working area on the screen, making it easier to follow. His clear and engaging delivery also facilitated the absorption of new knowledge. This is the best educational material I have ever seen, and I've watched and tried many. Thank you very much for such valuable information.

[blazingfingersguy]

Can't thank you enough for this Sam. It's like a goldmine of information backend into a very digestable, well edited video. Great job!

[justine_chang]

haven't watched the entire video, but I can already tell that stack is awesome. Personally I use NextJS, tRPC, Fastify, Chakra UI and Clerk. The productivity is amazing. Gonna try your stack on my next project

[danish]

Just finished the tutorial, don't have a idea about tanstack is as awesome as it is.. Thanks Sam for the gem

[mos.martin]

It's finally here!!! Thank you Sam. This one tute I've been really looking forward to. 👨‍💻

[PaperKrane]

Loved this. Fast paced and packed full of info. Just a request though and no expectations but I would love to see a tutorial on Bun/Hono web sockets. I can get the basics to work but the subscription/publish concept has me at my wits end haha

[codewithmarcin]

Fantastic tutorial mate. Picked up a bunch of little tips.

Looking forward to more videos!

[ScriptCodec]

I just learnt a whole new project structure and execution. Thank you a lot