12## Serving assets to the frontend
13
14This backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.
15
16In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public.
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.
29
30## Errors
8## Migrations
9
10In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages.
11
12This "migration" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.
58โโโ frontend/
59โ โโโ index.html # Main HTML template
60โ โโโ index.tsx # React frontend entry point
61โ โโโ components/
62โ โ โโโ App.tsx # Main app component with game state management
75
761. The backend runs on Hono with WebSocket support for real-time features
772. Frontend uses React with WebSocket client for real-time updates
783. SQLite stores user sessions and game state
794. USPS-themed styling with postal colors and typography
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';
3import type { User, GameState, Vote } from '../../shared/types.ts';
4import { NameEntry } from './NameEntry.tsx';
1// @ts-nocheck: fiik
2/** @jsxImportSource https://esm.town/v/jxnblk/jsx */
3import { renderToString } from "https://esm.sh/react-dom@19/server";
4
5function App () {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import type { User } from '../../shared/types.ts';
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3
4interface LeaderboardProps {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from 'https://esm.sh/react@18.2.0';
3import type { GameRound, User, Vote } from '../../shared/types.ts';
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from 'https://esm.sh/react@18.2.0';
3
4interface FactEntryProps {
11 const [fact, setFact] = useState('');
12
13 const handleSubmit = (e: React.FormEvent) => {
14 e.preventDefault();
15 if (fact.trim() && !isSubmitting) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import type { User } from '../../shared/types.ts';
4
