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

• 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