Hello World Demo

Welcome to the Blopping Platform

This is a demonstration of our hybrid blog-app platform built with React Router v7 on Cloudflare Pages + Workers. Each post can be viewed as static content (like this page) or launched as an interactive AI mini-app.

Key Features

• Static blog content with MDX support
• Interactive AI-powered applications
• Seamless switching between content and app views
• Built on Cloudflare's edge infrastructure
• TypeScript strict mode for reliability

Architecture Overview

The platform follows a structured approach with:

• Frontend: React Router v7 with SSR, MDX support, TailwindCSS v4
• Backend: Cloudflare Pages Functions, Workers, D1 (SQLite)
• Database: Drizzle ORM with D1, includes FTS for search
• AI: Durable Objects for chat state, Workers AI for embeddings

Design System Showcase

This template demonstrates our outline-first design principles:

• Outline-first: Clean borders over filled backgrounds
• Strong selections: Bold borders and underlines for hierarchy
• Amber accents: Reserved for information and alerts only
• Text hierarchy: Pure black for content, gray only for metadata

Getting Started

To create your own mini-app:

1. Create a folder: app/routes/posts.my-tool/
2. Add route.tsx with your component
3. Add meta.ts with title and category
4. Optionally add agent.ts for AI logic
5. Add any .txt files for static assets