1# React + TanStack + Hono Val Town Project
2
3Full-stack message board built for Val Town.
11
12### Frontend
13- React 19
14- TanStack Router (code-first routing)
15- TanStack Query (server state management)
31โ โโโ database/ # Drizzle schema, migrations, and queries
32โ โโโ index.ts # Main Hono application
33โโโ frontend/ # React app running in browser
34โ โโโ components/ # React components
35โ โโโ lib/ # Utilities and hooks
36โ โโโ router.tsx # TanStack Router configuration
40## API Endpoints
41
42- `GET /` - Serves the React application with initial data
43- `GET /api/messages` - Fetch all messages (JSON)
44- `POST /api/messages` - Create a new message
1import { useQuery, useMutation, useQueryClient } from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
2import { type Message } from "../../shared/utils.ts";
3
1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client?deps=react@19";
3import { type Message } from "../shared/utils.ts";
4import { RouterApp } from "./router.tsx";
1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { type Message, MESSAGE_LIMIT } from "../../shared/utils.ts";
4import { MessageInput } from "./MessageInput.tsx";
1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import {
4 RootRoute,
7 createRouter,
8 RouterProvider,
9} from "https://esm.sh/@tanstack/react-router@^1.121.0?deps=react@19";
10import {
11 QueryClient,
12 QueryClientProvider,
13} from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
14import { App } from "./components/App.tsx";
15
59
60// Register the router for TypeScript
61declare module "@tanstack/react-router" {
62 interface Register {
63 router: typeof router;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "react";
3import { isProdBranch } from "../../shared/is-prod-branch.ts";
4
190 {
191 "imports": {
192 "react": "https://esm.sh/react@18.2.0?dev",
193 "react-dom": "https://esm.sh/react-dom@18.2.0/client?dev",
194 "react-router": "https://esm.sh/react-router@7.4.0?dev&deps=react@18.2.0,react-dom@18.2.0",
195 "react-use": "https://esm.sh/react-use?dev&deps=react@18.2.0,react-dom@18.2.0",
196 "@ai-sdk/react": "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0,react-dom@18.2.0,zod@3.24",
197 "react-markdown": "https://esm.sh/react-markdown?dev&deps=react@18.2.0,react-dom@18.2.0"
198 }
199 }
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2
3export function ValTownLogo () {
1import { useState, useEffect } from "react";
2
3const USER_ENDPOINT = "/api/user";
1import { useEffect } from "react";
2
3export function useUsageStats(messages: any[], usages: any[]) {
