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-community/betternews-hono-tanstack
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#suggested-compileroptions
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: https://twitter.com/betterstackhq
LinkedIn: https://www.linkedin.com/company/betterstack
Instagram: https://www.instagram.com/betterstackhq/
TikTok: https://www.tiktok.com/@betterstack