Video Description

🔗 Completed Code (FREE): https://github.com/naolson2025/hono-react-better-auth 🔗 Backend focused Hono & Better-Auth video: https://www.youtube.com/watch?v=ffSJ6kmSrsg Ready to build a complete, modern, and secure full-stack authentication system? In this comprehensive tutorial, I'll show you how to set up a full-stack application from scratch using a powerful, next-gen tech stack. 🚀 We'll build a fully functional application with sign-in and sign-up pages (complete with input validation), a protected "todos" route only accessible to logged-in users, and a seamless sign-out process. By the end of this video, you'll have a rock-solid project template that you can use as a blueprint for your own applications. 🧱 What You'll Build - A Sign In and Sign Up page with robust validation. - A protected route that displays user-specific data (todos). - A clean front-end built with React, TanStack Router, and DaisyUI. - A high-performance backend API powered by Hono. - End-to-end type safety with Hono RPC. 🛠️ Tech Stack We'll Use - Backend: Hono, Bun, Postgres - Database ORM: Drizzle - Authentication: Better Auth - Frontend: React, Vite, TanStack Router, TanStack Query - Styling: Tailwind CSS, DaisyUI - Language: TypeScript 🔗 Resources & Links Hono: https://hono.dev/ Bun: https://bun.sh/ Docker: https://www.docker.com/ Better Auth Docs: https://www.better-auth.com/ Drizzle ORM Docs: https://orm.drizzle.team/ DaisyUI: https://daisyui.com/ TanStack Router: https://tanstack.com/router/latest TanStack Query: https://tanstack.com/query/latest Vite: https://vite.dev/ Lucide React Icons: https://lucide.dev/guide/ If you find this content helpful, please click the subscribe button to help support the channel. Your support allows me to create more free, high-quality tutorials like this one! Happy coding! #hono #honojs #React #reactjs #fullstack #authentication #typescript #postgres #drizzleorm #bunjs #TanstackQuery #betterauth #webdevelopment #tutorial 0:00 - 2:19 - Intro 2:20 - 2:34 - Prerequisites 2:35 - 3:41 - Outline 3:42 - 6:26 - Ch 1.1 Create Hono Server 6:27 - 12:47 - Ch 1.2 Create React Client 12:48 - 16:02 - Ch 1.3 Config local dev 16:03 - 26:32 - Ch 1.4 Config data fetching & RPC 26:33 - 32:55 - Ch 1.5 Setup GitHub Repo 32:56 - 37:19 - Ch 2.1 Setup Postgres DB 37:20 - 49:25 - Ch 2.2 Setup Drizzle ORM 49:26 - 1:01:40 - Ch 2.3 Seed the DB 1:01:41 - 1:07:38 - Ch 3.1 GET todos route 1:07:39 - 1:14:32 - Ch 3.2 DaisyUI setup 1:14:33 - 1:21:11 - Ch 3.3 Fetch todos with Hono RPC 1:21:12 - 1:36:28 - Ch 3.4 Display todos 1:36:29 - 1:39:08 - Ch 4.1 Setup Better-Auth instance 1:39:09 - 1:45:37 - Ch 4.2 Setup auth DB tables 1:45:38 - 1:47:00 - Ch 4.3 Add auth routes 1:47:01 - 1:52:40 - Ch 4.4 Auth testing 1:52:41 - 2:56:00 - Ch 5.1 Sign up page 2:56:01 - 3:11:29 - Ch 5.2 Sign in page 3:11:30 - 3:34:54 - Ch 5.3 Sign out & navbar 3:34:55 - 3:47:36 - Ch 6.1 Todo schema and query updates 3:47:37 - 3:59:30 - Ch 6.2 Hono auth middleware 3:59:31 - 4:12:40 - Ch 6.3 Frontend protect todos page