A mobile-optimized web app for logging running clothes and getting AI-powered clothing recommendations based on weather conditions and personal preferences.

• Plan Tab: Get personalized clothing recommendations based on current or future weather conditions
• Log Tab: View, edit, and delete your run history in an information-dense table
• New Run Form: Quickly log runs with automatic weather data fetching
• AI Recommendations: Uses Claude AI to analyze your clothing preferences and suggest optimal outfits
• Weather Integration: Automatic current and forecast weather data from Open-Meteo

• Make sure the forecast api is treating things correctly
• Make the current location lookup faster
• Enter api ANTHROPIC_API_KEY
• Add a snackbar when a new thing has saved
• use htmx instead of React

Problem: Current location lookup takes 2-3+ seconds, causing slow UI rendering and poor UX.

Root Cause:

• OpenStreetMap Nominatim API is slow (backend/routes/weather.ts:229-272 for reverse geocode, :170-214 for forward geocode)
• No caching - every lookup makes a fresh API call
• Blocking UI - NewRunModal.tsx:82-102 waits for reverse geocode before showing form
• Same issue in PlanTab.tsx:28-47

Affected Code Locations:

• NewRunModal.tsx:82-102 - Initial location lookup on modal open
• NewRunModal.tsx:153-167 - Custom location search
• PlanTab.tsx:28-47 - Location lookup on tab mount
• backend/routes/weather.ts:170-214 - Forward geocode endpoint (no cache)
• backend/routes/weather.ts:229-272 - Reverse geocode endpoint (no cache)

Recommended Solutions (in priority order):

1. Add server-side caching (Biggest impact)

   • Cache geocoding results in memory Map/LRU cache
   • Round coordinates to ~0.01° precision (same city)
   • TTL: 24 hours (cities don't move)
   • Would reduce repeat lookups from 2-3s to <10ms

2. Make UI non-blocking (Better UX)

   • Show modal immediately with "Loading location..." placeholder
   • Fetch location in background
   • Allow users to fill form while location loads
   • Update location field when reverse geocode completes

3. localStorage caching (Quick win)

   • Store last known location: {lat, lon, name, timestamp}
   • Show immediately on load
   • Only fetch fresh if >1hr old or coordinates changed >0.01°

4. Consider alternative geocoding services (if problem persists)

   • Google Maps Geocoding API (faster, requires key)
   • Mapbox Geocoding (faster, requires key)
   • Self-hosted Nominatim (more control)

5. Request deduplication

   • If multiple components request same location, share single request
   • Use Promise cache with coordinate key

Implementation Priority: Start with #1 (caching) + #2 (non-blocking UI) for maximum impact.

• Backend: Hono (HTTP framework)
• Frontend: React 18.2.0 with TypeScript
• Database: SQLite (Val Town built-in)
• Styling: TailwindCSS (via Twind)
• Weather API: Open-Meteo (no API key required)
• AI: Claude 3.5 Sonnet (Anthropic)
• Hosting: Val Town

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── runLogs.ts       # CRUD endpoints for run logs
│   │   ├── weather.ts       # Weather data endpoints
│   │   └── recommendations.ts # AI recommendation endpoint
│   └── index.http.tsx       # Main entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── PlanTab.tsx      # Recommendations view
│   │   ├── LogTab.tsx       # Run history view
│   │   └── NewRunModal.tsx  # New run form
│   ├── index.html
│   ├── index.tsx            # Frontend entry point
│   └── style.css
└── shared/
    └── types.ts             # Shared TypeScript types

1. Create a new Val Town project
2. Copy all files from this repository into your Val Town project
3. Set the ANTHROPIC_API_KEY environment variable:
   • Get your API key from https://console.anthropic.com/
   • In Val Town, go to Settings → Environment Variables
   • Add: ANTHROPIC_API_KEY = your-api-key-here
4. The main entry point is backend/index.http.tsx
5. Deploy and access your app!

• ANTHROPIC_API_KEY (required): Your Anthropic API key for Claude AI recommendations

• GET /api/run-logs - Get all run logs
• GET /api/run-logs/:id - Get a specific run log
• POST /api/run-logs - Create a new run log
• PUT /api/run-logs/:id - Update a run log
• DELETE /api/run-logs/:id - Delete a run log

• GET /api/weather/current?lat=...&lon=... - Get current weather
• GET /api/weather/forecast?lat=...&lon=...&datetime=... - Get forecast weather

• POST /api/recommendations - Get clothing recommendation
  • Body: { "weather": { "temp": 70, "dewPoint": 60, "conditions": "Clear", "time": "..." } }

• Responsive design optimized for mobile screens
• Touch-friendly UI elements
• Geolocation support for automatic location detection
• Prevents zoom on input focus
• Smooth scrolling for tables
• Fixed floating action button for quick access

Each run log includes:

• Date and time
• Location
• Clothing choices (head, base layer, outer layer, bottom, gloves, shirt off)
• Weather conditions (temperature, dew point, conditions)

1. Logging a Run: Click the + button to log what you wore and the weather conditions. The app automatically fetches current weather data based on your location.

2. Getting Recommendations: The Plan tab uses your location and shows current/future weather. Claude AI analyzes your historical clothing choices and recommends an optimal outfit.

3. Viewing History: The Log tab displays all your runs in a compact, mobile-friendly format. Edit or delete entries as needed.

MIT