Val Town Code SearchReturn to Val Town

35├── frontend/
36│   ├── components/
37│   │   ├── App.tsx         # Main React app (Phase 4)
38│   │   ├── PuzzleList.tsx  # Home page list (Phase 4)
39│   │   ├── PuzzleDetail.tsx # Voting interface (Phase 4)
79
80### ✅ Phase 4: Frontend Foundation (COMPLETE)
81- React 18.2.0 with TailwindCSS
82- Hash-based routing without React Router
83- Home page with puzzle list and ratings
84- Mobile-responsive design
103- **Database**: SQLite with versioned table names for schema changes
104- **AI**: OpenAI GPT-4o-mini for cost-effective rating generation
105- **Frontend**: React 18.2.0 with TailwindCSS for rapid development
106- **Backend**: Hono for lightweight, fast API routes
107- **Deployment**: Val Town for serverless hosting and cron jobs

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "react";
3import { createRoot } from "react-dom/client";
4
5// Types
91
92// Components
93const Header: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => (
94  <header className="bg-white shadow-sm border-b">
95    <div className="max-w-4xl mx-auto px-4 py-4">
126);
127
128const PuzzleCard: React.FC<{ puzzle: Puzzle; onNavigate: (route: string) => void }> = ({ puzzle, onNavigate }) => {
129  const today = new Date().toISOString().split("T")[0];
130  const isToday = puzzle.date === today;
175};
176
177const HomePage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {
178  const [puzzles, setPuzzles] = useState<Puzzle[]>([]);
179  const [loading, setLoading] = useState(false);
241};
242
243const CategoryCard: React.FC<{
244  category: string;
245  members: string[];
326};
327
328const PuzzleDetailPage: React.FC<{
329  date: string;
330  onNavigate: (route: string) => void;
442};
443
444const BestLeaderboardPage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {
445  const [puzzles, setPuzzles] = useState<Puzzle[]>([]);
446  const [loading, setLoading] = useState(false);
529};
530
531const WorstLeaderboardPage: React.FC<{ onNavigate: (route: string) => void }> = ({ onNavigate }) => {
532  const [puzzles, setPuzzles] = useState<Puzzle[]>([]);
533  const [loading, setLoading] = useState(false);
616};
617
618const Footer: React.FC = () => (
619  <footer className="bg-white border-t mt-12">
620    <div className="max-w-4xl mx-auto px-4 py-6 text-center">
644
645// Main App
646const App: React.FC = () => {
647  const [route, setRoute] = useState(window.location.hash || "#/");
648

16    <script src="https://esm.town/v/std/catch"></script>
17    
18    <!-- React 18.2.0 -->
19    <script type="importmap">
20    {
21        "imports": {
22            "react": "https://esm.sh/react@18.2.0",
23            "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
24        }
25    }

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3/**
6 */
7
8import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
9import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
10import { AffordanceComponent, AffordanceConfig } from "../../../shared/affordance-types.ts";
11
25}
26
27const NotificationCenter: React.FC<NotificationCenterProps & {
28  notifications: Notification[],
29  onDismiss: (id: string) => void,
215    };
216
217    // Create React root and render
218    this.root = createRoot(container);
219    this.render();

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3/**
6 */
7
8import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
9import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
10import { AffordanceComponent, AffordanceConfig } from "../../../shared/affordance-types.ts";
11
23}
24
25const StatusDashboard: React.FC<StatusDashboardProps & { 
26  items: StatusItem[], 
27  onRefresh?: () => void 
218    };
219
220    // Create React root and render
221    this.root = createRoot(container);
222    this.render();

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from 'https://esm.sh/@farcaster/frame-sdk'
3import { useLocation } from 'https://esm.sh/react-router@7'
4import { useEffect, useState } from 'https://esm.sh/react@19'
5
6import { sendAnalyticsEvent } from '../util/supabase.ts'

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4

194- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
195- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
196- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
197- Ensure all React dependencies and sub-dependencies are pinned to the same version
198- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
199
280   - Always run table creation before querying
281
2823. **React Configuration:**
283   - All React dependencies must be pinned to 18.2.0
284   - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
285   - Rendering issues often come from mismatched React versions
286
2874. **File Handling:**

1/**
2 * @jsxImportSource https://esm.sh/react@18.2.0
3 */
4

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.