Serverless Edge Blogging Platform

A highly scalable, full-stack blogging platform engineered for the Edge. This project abandons the traditional Node.js monolithic architecture in favor of a distributed, serverless model using Cloudflare Workers, Hono, and a React SPA.

It is structured as a Monorepo to share strict TypeScript types and Zod validation schemas across the entire stack, ensuring end-to-end type safety.

---

🚀 Key Architectural Features

🌍 Edge Computing

The backend API runs on Cloudflare Workers (V8 Isolates), bringing cold starts down to ~5ms and executing code globally closest to the user.

🗄️ Serverless Database Pooling

Integrates Prisma Accelerate to translate database queries into HTTP requests, preventing TCP connection exhaustion at the edge while querying the PostgreSQL database.

📦 Monorepo Design

Utilizes a common package to maintain a single source of truth for Zod schemas, instantly synchronizing validation logic between the React frontend and Hono backend.

🔐 Stateless Authentication

Implements secure, edge-compatible JWT authentication without relying on centralized session stores.

---

💻 Tech Stack

Frontend (/client)

• React.js (Vite)
• TypeScript
• Custom Hooks (Data Fetching & Pagination)
• Tailwind CSS

Backend (/server)

• Hono (Ultra-lightweight web framework for the Edge)
• Cloudflare Workers
• Prisma ORM (with Edge Client)
• PostgreSQL

Shared (/common)

• Zod (Schema Validation)
• TypeScript Interfaces

---

📂 Project Structure

.
├── client/          # React SPA frontend
├── server/          # Hono API deployed to Cloudflare Workers
└── common/          # Shared Zod schemas and type definitions

---

🛠️ Getting Started

✅ Prerequisites

• Node.js (v18+)
• Wrangler CLI installed globally

npm i -g wrangler

• A PostgreSQL database URL
• Prisma Accelerate API Key

---

1️⃣ Setup the Shared Module

Navigate to the common directory, install dependencies, and build the types so they are accessible to the client and server.

cd common
npm install
npm run build

---

2️⃣ Backend Setup

Navigate to the server directory and configure your environment.

cd ../server
npm install

Create a .dev.vars file (for local Wrangler development):

# server/.dev.vars
DATABASE_URL="your_direct_postgres_url"
PRISMA_DB_URL="your_prisma_accelerate_url"
JWT_SECRET="your_super_secret_key"

Run database migrations and generate the Prisma client:

npx prisma migrate dev --name init
npx prisma generate --no-engine

Start the local Edge development server:

npm run dev

---

3️⃣ Frontend Setup

Navigate to the client directory.

cd ../client
npm install

Create a .env file in the client directory:

VITE_BACKEND_URL="http://localhost:8787"

Start the Vite development server:

npm run dev

---

🧠 System Design Trade-offs & Considerations

⚖️ Statelessness over Stateful Connections

Traditional ORMs fail on the edge due to the lack of the Node.js net module. Prisma Accelerate was chosen to pool connections via HTTP, trading a slight HTTP overhead for infinite horizontal scaling and connection safety.

📖 Dynamic Read Time

Instead of storing "read time" in the database, it is calculated dynamically on the edge during the GET /get-all request, ensuring accuracy post-edits and saving database storage.

📄 Pagination

Implemented offset-based pagination via Prisma's skip and take to ensure minimal payload sizes and fast DOM rendering on the client side.

---

👨‍💻 Author

Rishab Raj