This document describes the conversion from React SPA to htmx server-rendered application.

The application has been successfully converted from a React single-page application to an htmx-based server-rendered application. This simplification reduces client-side JavaScript, improves initial page load performance, and makes the codebase easier to understand and maintain.

• Client-side SPA with React 18.2.0
• Client-side state management
• JSON API endpoints
• Client-side routing
• Heavy JavaScript bundle
• All rendering in browser

• Server-rendered HTML fragments
• htmx for dynamic updates
• HTML responses from server
• URL-based routing with query params
• Minimal JavaScript (only for geolocation)
• Progressive enhancement

• backend/views/layout.tsx - Main layout and app shell
• backend/views/planTab.tsx - Plan tab rendering
• backend/views/logTab.tsx - Log tab with cards
• backend/views/newRunModal.tsx - New run modal

• backend/routes/modals.ts - Modal endpoints

• backend/index.http.tsx - Updated to serve HTML, added tab routes
• backend/routes/runLogs.ts - Updated to handle both JSON and HTML responses

• README.md - Updated tech stack and TODO

These files are no longer used:

• frontend/components/App.tsx
• frontend/components/PlanTab.tsx
• frontend/components/LogTab.tsx
• frontend/components/NewRunModal.tsx
• frontend/index.tsx

✅ Plan Tab

• Geolocation support
• Weather fetching
• AI recommendations
• Date/time selection

✅ Log Tab

• View all runs
• Edit inline
• Delete runs
• Formatted dates and clothing

✅ New Run Modal

• Automatic geolocation
• Location search
• Weather auto-fetch
• Form submission

✅ Mobile Optimization

• Responsive design
• Touch-friendly
• Fixed floating action button

1. Simpler Code: No React state management, hooks, or effects
2. Less JavaScript: Minimal client-side code
3. Progressive Enhancement: Works without JavaScript for basic functionality
4. Better Initial Load: HTML rendered on server
5. Easier to Debug: Clear request/response flow
6. Better Performance: Less parsing and hydration overhead
7. SEO Friendly: Server-rendered content

The htmx version naturally addresses the location lookup performance issue mentioned in the README:

• Non-blocking UI: The page loads immediately with "Getting location..." placeholder
• Background fetching: Location and weather fetch in background
• User can interact: Forms are usable while loading
• Progressive enhancement: Content appears as it becomes available

• hx-get - Fetch HTML fragments
• hx-post - Submit forms
• hx-put - Update records
• hx-delete - Delete records
• hx-target - Specify where to put response
• hx-swap - Control swap behavior
• hx-trigger - Event triggers
• hx-include - Include form values
• hx-push-url - Update browser URL
• hx-confirm - Confirmation dialogs

While we eliminated React, some vanilla JavaScript is still needed for:

1. Geolocation API: Browser location access
2. Modal interactions: Toggle location search panel
3. Weather updates: Coordinate weather API calls
4. Location search: Geocoding workflow

All JavaScript is embedded in templates where needed, keeping logic close to the UI.

1. Visit the main page - should see Plan tab with location loading
2. Click Log tab - should see all runs
3. Click + button - modal opens with geolocation
4. Change date - weather updates
5. Search location - updates weather
6. Submit form - creates run and closes modal
7. Edit a run - inline editing
8. Delete a run - confirmation and removal

The migration maintains backward compatibility with JSON API endpoints, so external clients or tools that depend on the JSON API will continue to work. The endpoints detect content type and respond accordingly:

• application/json → JSON response (old behavior)
• HTML request (htmx) → HTML fragment (new behavior)

1. Remove old React files after confirming everything works
2. Consider implementing server-side caching for geocoding (see README TODO)
3. Add loading indicators/spinners for better UX feedback
4. Add success notifications (snackbar) after save operations
5. Test thoroughly on mobile devices

No changes needed to deployment process. The app still:

• Uses Hono as the HTTP framework
• Runs on Val Town
• Requires ANTHROPIC_API_KEY environment variable
• Entry point is backend/index.http.tsx