How to Build Weather application with V0

1import { NextRequest, NextResponse } from 'next/server'
2
3export async function GET(req: NextRequest) {
4  const lat = req.nextUrl.searchParams.get('lat')
5  const lng = req.nextUrl.searchParams.get('lng')
6
7  if (!lat || !lng) {
8    return NextResponse.json(
9      { error: 'lat and lng are required' },
10      { status: 400 }
11    )
12  }
13
14  const params = new URLSearchParams({
15    latitude: lat,
16    longitude: lng,
17    current: 'temperature_2m,relative_humidity_2m,wind_speed_10m,weather_code',
18    hourly: 'temperature_2m,precipitation_probability,weather_code',
19    daily: 'temperature_2m_max,temperature_2m_min,weather_code,precipitation_sum',
20    timezone: 'auto',
21    forecast_days: '7',
22  })
23
24  const res = await fetch(
25    `https://api.open-meteo.com/v1/forecast?${params}`,
26    { next: { revalidate: 1800 } }
27  )
28
29  if (!res.ok) {
30    return NextResponse.json(
31      { error: 'Weather API error' },
32      { status: 502 }
33    )
34  }
35
36  const data = await res.json()
37  return NextResponse.json(data)
38}

1import { NextRequest, NextResponse } from 'next/server'
2
3export async function GET(req: NextRequest) {
4  const query = req.nextUrl.searchParams.get('q')
5
6  if (!query || query.length < 2) {
7    return NextResponse.json([])
8  }
9
10  const res = await fetch(
11    `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(query)}&count=5&language=en`,
12    { next: { revalidate: 86400 } }
13  )
14
15  const data = await res.json()
16
17  const results = (data.results ?? []).map(
18    (r: { name: string; country: string; latitude: number; longitude: number; admin1?: string }) => ({
19      name: r.name,
20      country: r.country,
21      state: r.admin1,
22      latitude: r.latitude,
23      longitude: r.longitude,
24    })
25  )
26
27  return NextResponse.json(results)
28}

1// Paste this prompt into V0's AI chat:
2// Build a weather dashboard at app/page.tsx with:
3// 1. City search Input at the top using shadcn/ui Command for autocomplete (fetches from /api/geocode?q=query as user types, debounced 300ms)
4// 2. Current conditions Card: large temperature number, weather description, humidity, wind speed, feels-like temperature. Use a gradient background based on temperature (blue for cold, warm tones for hot).
5// 3. Horizontal ScrollArea showing hourly forecast for the next 24 hours — each hour shows time, small weather icon, and temperature
6// 4. Grid of 7 Cards for the daily forecast: day name, weather icon, high/low temperatures, precipitation chance
7// 5. Skeleton components for all sections while data loads
8// 6. Map WMO weather codes to icons and descriptions (0=Clear, 1-3=Partly Cloudy, 45-48=Fog, 51-55=Drizzle, 61-65=Rain, 71-77=Snow, 80-82=Showers, 95-99=Thunderstorm)
9// Fetch weather from /api/weather?lat=X&lng=Y. Default to New York (40.71, -74.01).

1// Paste this prompt into V0's AI chat:
2// Add saved locations to the weather app:
3// 1. Connect Supabase via the Connect panel
4// 2. Create a saved_locations table: id uuid PK, user_id uuid, city text, country text, latitude numeric, longitude numeric, is_default boolean DEFAULT false, created_at timestamptz
5// 3. Add a star/bookmark Button on the current weather Card to save the current location
6// 4. Add shadcn/ui Tabs above the weather display showing saved locations. Clicking a tab loads that city's weather.
7// 5. Server Action to save/remove locations and set default
8// 6. On page load, fetch the user's default location (or New York if none saved)
9// RLS: users can only read/write their own saved locations.