PolyWeather/frontend/README.md

PolyWeather Frontend

This directory is the only web frontend in production.

Production URL:

• https://polyweather-pro.vercel.app/

Stack

• Next.js App Router
• React (component-driven dashboard)
• Tailwind CSS
• Leaflet (map runtime)
• Chart.js (charts with manual lifecycle wrapper)
• Typed store + typed data client

Production Model

• Vercel serves the web UI and BFF route handlers
• FastAPI on VPS serves weather APIs only
• The old FastAPI static website has been removed
• The production page shell is React-driven (components/dashboard/*), with no runtime dependency on public/static/app.js

Current request flow:

• Browser -> Vercel frontend
• React store/client -> Next route handlers
• Next route handlers -> FastAPI API

Local Development

cd frontend
cp .env.example .env.local
npm install
npm run dev

Default local URL:

• http://localhost:3000

Required Environment Variable

POLYWEATHER_API_BASE_URL=https://<your-fastapi-host>

Examples:

• http://38.54.27.70:8000
• https://api.example.com

Route Handlers

Thin BFF routes currently exposed by Next:

• GET /api/cities
• GET /api/city/[name]
• GET /api/city/[name]/summary
• GET /api/history/[name]

Current frontend behavior:

• / keeps the world overview layout and initial city temperatures preload
• Marker click: focus map + open right city card + render nearby stations
• Right-card "今日日内分析": opens modal and freezes map motion
• Blank-map click: closes right card only, without resetting camera

Vercel Deployment

1. Import the repo into Vercel
2. Set Root Directory to frontend
3. Set POLYWEATHER_API_BASE_URL
4. Deploy

Notes

• Backend CORS must allow https://polyweather-pro.vercel.app
• City detail cache TTL is 5 minutes with revision probe; manual refresh bypasses cache
• UI layout and sizing remain aligned with the legacy visual contract after React migration

Last updated: 2026-03-09