← Back to list
Global Context Types (
Directory Structure (
project-architecture
by du2333
全栈个人博客，由Cloudflare全家桶驱动
⭐ 1🍴 0📅 Jan 23, 2026
Run in ManusSKILL.md
name: project-architecture description: Provides an overview of the Flare Stack Blog architecture. Use when needing to understand the project structure, tech stack, routing layers (Hono/TanStack), dependency injection, or directory organization.
Project Architecture Overview
This project is a modern full-stack TypeScript blog built on the Cloudflare ecosystem, integrating TanStack Start with Hono for high performance and type safety.
Tech Stack & Infrastructure
The project deeply integrates multiple Cloudflare services:
| Service | Binding | Purpose |
|---|---|---|
| Compute/Hosting | - | Cloudflare Workers |
| Database | DB | Cloudflare D1 (SQLite) with Drizzle ORM |
| Object Storage | R2 | Media assets storage |
| KV Storage | KV | Persistent caching layer |
| Durable Objects | RATE_LIMITER | Distributed rate limiting |
| Workflows | Various | Async tasks (email, post-processing, moderation) |
| AI | AI | Cloudflare Workers AI |
| Authentication | - | Better Auth (D1 integrated) |
Editor & Rendering
- TipTap: Rich text editing with multiple extensions
- Shiki: High-performance syntax highlighting for code blocks
Core Architecture
Dual-Layer Routing
The project uses a two-tier routing architecture with clear responsibilities:
Hono (Base/Gateway Layer)
- Handles Better Auth routes (
/api/auth/*) - Serves media resources (
/images/*) - Global cache strategy control and 404/500 error handling
- Proxies all other requests to TanStack Start
TanStack Start (Business Layer)
- Handles most business logic routes
- File-based routing via
src/routes/ - Page rendering and data loaders
Dependency Injection & Context Types
The project uses a layered dependency injection pattern:
- Entry Point Injection (
src/server.ts): OnlyenvandexecutionCtxare injected viaRegister['server']['requestContext'] - Middleware Injection (
lib/middlewares.ts):db,auth, andsessionare injected progressively through TanStack middlewares
Global Context Types (global.d.ts)
| Type | Contents | Usage |
|---|---|---|
BaseContext | env | Minimal context for env-only operations |
DbContext | env, db | Database operations |
SessionContext | env, db, auth, session (nullable) | Session-aware but not requiring auth |
AuthContext | env, db, auth, session (required) | Authenticated operations |
Middleware System
| Layer | Location | Purpose |
|---|---|---|
| Hono | lib/hono/middlewares.ts | Global control: rate limiting, cache headers |
| TanStack | lib/middlewares.ts | DI + Business-level: db, auth, session, caching |
Directory Structure (src/)
| Directory | Responsibility |
|---|---|
src/features/ | Feature modules. Each contains api/, services/, data/, and schemas.ts (validation + cache key factories) |
src/routes/ | TanStack file routes with page components and loaders |
src/lib/ | Infrastructure: database (db/), env (env/), middlewares |
src/components/ | Shared UI components: ui/ (atomic), common/, layout/ |
Request Flow
- Entry: All requests first hit the Hono container in
src/server.ts - Gateway Routing: Hono handles specific API/resource paths; others go to TanStack
- Context Injection: Before entering TanStack Start, context is constructed with
db,auth, andenv - Business Routing: TanStack Router matches paths to components and invokes loaders
- Logic Execution: Loaders/Server Functions pass through middleware, then call Feature services
- Rendering: SSR renders the result with CDN-optimized cache headers
Score
Total Score
60/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
Reviews
💬
Reviews coming soon