The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more скачать в хорошем качестве

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 🔗 My course on AWS and Cloud Computing: https://cloudcourse.dev/ 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