React + TanStack + Hono Val Town Project

A modern full-stack message board app built for Val Town, showcasing the latest web development tools and patterns.

• Hono - Fast, lightweight web framework for Val Town
• Drizzle ORM - Type-safe SQL toolkit for database operations
• SQLite - Val Town's built-in database
• Deno - Runtime environment on Val Town serverless infrastructure

• React 19 - Latest React with modern features
• TanStack Router - Type-safe routing with code-first approach
• TanStack Query - Powerful data synchronization for server state
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Full type safety throughout the stack

• 💬 Real-time message board - Post and view messages instantly
• 🎨 Modern UI - Clean Tailwind design with responsive layout
• 🔄 Optimistic updates - Instant UI feedback with automatic rollback on errors
• 📱 Client-side routing - Fast navigation with TanStack Router
• 🗄️ Type-safe database - Drizzle ORM with full TypeScript integration
• ⚡ Optimized loading - Server-side data injection for fast initial renders

├── backend/          # Hono server running on Val Town
│   ├── database/     # Drizzle schema, migrations, and queries
│   └── index.ts      # Main Hono application
├── frontend/         # React app running in browser
│   ├── components/   # React components
│   ├── lib/          # Utilities and hooks
│   └── router.tsx    # TanStack Router configuration
└── shared/           # Code shared between frontend and backend

• GET / - Serves the React application with initial data
• GET /messages - Fetch all messages (JSON)
• POST /messages - Create a new message
• GET /public/** - Static assets (CSS, JS, etc.)

This project uses Val Town's constraints:

• No file system writes (read-only after deployment)
• ESM imports via esm.sh for npm packages
• Single-file bundling per route
• Code-first routing (no file-based routing)

Create val
// Uses code-first routing as recommended for Val Town
const homeRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: () => <App {...window.__INITIAL_DATA__} />
});

Create val
// Type-safe data fetching with optimistic updates
export function usePostMessage() {
  return useMutation({
    mutationFn: (content: string) => postMessage(content),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["messages"] });
    },
  });
}

Create val
// Simple, type-safe schema
export const messages = sqliteTable("messages", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  content: text("content").notNull(),
  timestamp: text("timestamp").notNull().default(new Date().toISOString()),
});

This project demonstrates how to build a modern, type-safe full-stack application on Val Town using the latest tools and best practices.