Build a HackerNews Clone: Hono, Tanstack Router, Drizzle, React Query, Lucia & more

Let's implement some of HackerNews's core features: posts, comments, nested comments, authentication, and deployment (Docker / Fly.io). We will use this project to learn some important concepts and tools for modern web development. Let's learn Hono, Drizzle ORM, Authentication, Tanstack Router, React Query, and more!

Project Code: https://github.com/betterstack-commun...

Hono: https://hono.dev/
Bun: https://bun.sh/
Drizzle: https://orm.drizzle.team/
TanStack: https://tanstack.com/
Lucia: https://lucia-auth.com/
Bun Compiler Options: https://bun.sh/docs/typescript#sugges...
shadcn/ui: https://ui.shadcn.com/

Key Features:
Hono
Bun
Tanstack Router
React Query
Tanstack Form
Authentication
Drizzle
Drizzle Relational Queries / SQL-based queries
Paginated Queries with InfiniteQueries
Caching and Cache-control
Optimistic Updates

Chapters:
00:00:00 Intro
00:00:36 Site Demo
00:02:44 Stack Explanation
00:12:56 Project Setup (Step 1)
00:25:30 Drizzle Setup (Step 2)
00:37:53 Hono Error Handler (Step 3)
00:48:20 Lucia Auth (Step 4)
01:26:02 Tables Setup (Step 5)
01:46:33 Posts Route (Step 6)
03:17:21 Comments Route (Step 7)
03:44:39 Frontend Setup (Step 8)
04:12:52 Layouts and Helpers (Step 9)
04:47:43 Auth Routes (Step 10)
05:50:44 Homepage Posts (Step 11)
07:03:50 Submit Post Form (Step 12)
07:27:50 Setup posts page (Step 13)
07:45:22:22 Comments and upvotes (Step 14)
08:48:30:51 Comment form (Step 15)
09:17:27 Loaders and checks (Step 16)
09:33:24 Docker and Fly Deployment (Step 17)
09:59:43 Recommendations / What next
10:02:30 Outro

► HACKING SCALE NEWSLETTER
https://newsletter.betterstack.com/

► READ MORE
More about Better Stack: https://betterstack.com/
Community pages: https://betterstack.com/community/

► STAY TUNED
GitHub: https://github.com/BetterStackHQ
Twitter:   / betterstackhq  
LinkedIn:   / betterstack  
Instagram:   / betterstackhq  
TikTok:   / betterstack