The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more

Tutorial: Building a Modern React SPA with Bun & Hono Server

Video Title: The React, Bun & Hono Tutorial 2024 - Drizzle, Kinde, Tanstack, Tailwind, TypeScript, RPC, & more

Channel Name: Sam Meech-Ward

Description:

This tutorial showcases a modern full-stack development setup using React, Bun, and Hono server. The project includes various libraries and frameworks to enhance the development experience and create a seamless web application. Key features include an expense tracker app, TypeScript for backend and frontend, Hono TypeScript RPC for HTTP requests, user authentication with Kinde Auth, Tanstack Router, Query, and Form for enhanced user experience, Drizzle ORM for SQL interactions, hosting on fly.io VPS, and a clean UI design with Tailwind and shadcn-ui.

Steps:

1. Introduction (0:00:00)

   • Watch the introductory part of the video to understand the project overview.

2. Setup Bun and Hono (0:02:45)

   • Follow the instructions to set up Bun and Hono server for your project.

3. Adding Routes (0:07:54)

   • Learn how to add routes to your application for navigation.

4. Zod HTTP Validation (0:12:21)

   • Implement Zod for HTTP validation to ensure data integrity.

5. Setup React App with Vite (0:21:35)

   • Set up your React application using Vite for a fast development experience.

6. Install Tailwind (0:24:32)

   • Install Tailwind CSS for styling your application efficiently.

7. Hono RPC (0:52:51)

   • Implement Hono RPC for type-safe HTTP requests in your project.

8. Tanstack React Query (0:59:56)

   • Learn how to use Tanstack React Query for efficient data fetching and caching.

9. Kinde Auth (1:35:01)

   • Implement user authentication using Kinde Auth library.

10. Drizzle ORM (2:15:28)

    • Use Drizzle ORM for all interactions with a SQL Database in your application.

11. UI Update (3:00:30)

    • Update the UI of your application for a modern and clean look.

12. Caching and Optimistic Update (3:05:28)

    • Implement caching and optimistic updates for a smoother user experience.

13. Delete Expense (3:28:20)

    • Learn how to delete expenses in your application to manage data effectively.

Summary:

This tutorial guides you through building a modern React SPA with Bun & Hono server, incorporating various libraries and frameworks for a robust full-stack development experience. By following the steps outlined in the video, you can create a complete expense tracker app with advanced features and a clean UI design.