How to Build a Weather Application with Lovable

1Build a weather application. Create one Supabase table:
2
3- weather_cache: id, cache_key (text, UNIQUE — format: 'weather:lat:lon' or 'weather:city_name'), response_data (jsonb), cached_at (timestamptz default now())
4
5No user_id or RLS needed — this is a public cache accessible by anyone.
6
7Create an index: CREATE INDEX idx_weather_cache_key ON weather_cache(cache_key).
8
9Set up the app shell with:
10- A search bar at the top using shadcn/ui Command component
11- A main content area for the weather display
12- A 'Use My Location' Button next to the search bar
13- A saved cities section below the main content (store in localStorage for simplicity)
14
15The app should use a clean dark or light weather-themed design with sky blue and white as primary colors.

1// supabase/functions/get-weather/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11const CACHE_MINUTES = 30
12const API_KEY = Deno.env.get('OPENWEATHER_API_KEY') ?? ''
13
14serve(async (req: Request) => {
15  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
16
17  const supabase = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_ANON_KEY') ?? '')
18  const url = new URL(req.url)
19  const lat = url.searchParams.get('lat')
20  const lon = url.searchParams.get('lon')
21  const city = url.searchParams.get('city')
22
23  if (!API_KEY) return new Response(JSON.stringify({ error: 'API key not configured' }), { status: 500, headers: corsHeaders })
24
25  const cacheKey = lat && lon ? `weather:${parseFloat(lat).toFixed(2)}:${parseFloat(lon).toFixed(2)}` : `weather:${city?.toLowerCase().trim()}`
26  if (!cacheKey.includes(':')) return new Response(JSON.stringify({ error: 'Provide lat+lon or city' }), { status: 400, headers: corsHeaders })
27
28  const staleAfter = new Date(Date.now() - CACHE_MINUTES * 60 * 1000).toISOString()
29  const { data: cached } = await supabase.from('weather_cache').select('response_data, cached_at').eq('cache_key', cacheKey).gte('cached_at', staleAfter).single()
30
31  if (cached) {
32    return new Response(JSON.stringify({ ...cached.response_data, _cached: true }), { headers: corsHeaders })
33  }
34
35  const query = lat && lon ? `lat=${lat}&lon=${lon}` : `q=${encodeURIComponent(city ?? '')}`
36  const [currentRes, forecastRes] = await Promise.all([
37    fetch(`https://api.openweathermap.org/data/2.5/weather?${query}&appid=${API_KEY}&units=metric`),
38    fetch(`https://api.openweathermap.org/data/2.5/forecast?${query}&appid=${API_KEY}&units=metric`),
39  ])
40
41  if (!currentRes.ok) {
42    const err = await currentRes.json()
43    return new Response(JSON.stringify({ error: err.message ?? 'City not found' }), { status: 404, headers: corsHeaders })
44  }
45
46  const [current, forecast] = await Promise.all([currentRes.json(), forecastRes.json()])
47  const responseData = { current, forecast }
48
49  await supabase.from('weather_cache').upsert({ cache_key: cacheKey, response_data: responseData, cached_at: new Date().toISOString() }, { onConflict: 'cache_key' })
50
51  return new Response(JSON.stringify(responseData), { headers: corsHeaders })
52})

1Add city search autocomplete to the weather app. Use the shadcn/ui Command component with a debounced CommandInput (300ms delay). On each input change, call a Supabase Edge Function get-geocoding that hits the OpenWeatherMap Geocoding API (http://api.openweathermap.org/geo/1.0/direct?q={city}&limit=5&appid={key}) and returns an array of { name, country, state, lat, lon }. Display each result as a CommandItem showing '{name}, {state}, {country}'. When a result is selected, store the city name and coordinates in component state and call the get-weather Edge Function with those lat/lon values to update the displayed weather. Show a CommandEmpty state: 'No cities found. Check the spelling and try again.' Show a loading spinner inside the CommandInput while the geocoding request is in flight.

1Build the weather display UI:
2
31. City search using shadcn/ui Command component:
4   - A CommandInput that calls the OpenWeatherMap geocoding API (also via Edge Function) after 300ms of no typing
5   - Show city suggestions as CommandItems with city name and country
6   - Selecting a city calls the get-weather Edge Function and updates the displayed weather
7
82. Current conditions Card:
9   - Large temperature display (e.g. 22°C)
10   - City name and country as heading
11   - Weather description (e.g. 'Partly Cloudy') with an emoji icon based on OpenWeatherMap icon code
12   - Grid of metrics: Feels Like, Humidity %, Wind Speed km/h, Visibility km
13   - 'Cached' Badge in corner if _cached: true in response
14
153. 7-day forecast Recharts AreaChart:
16   - Parse the forecast API response (it returns 3-hour intervals, group by day, take the noon entry)
17   - X-axis: day names (Mon, Tue, Wed...)
18   - Two lines: max temperature and min temperature
19   - Tooltip showing high/low and description per day
20   - Small weather emoji above each data point
21
224. 'Use My Location' Button:
23   - On click: call navigator.geolocation.getCurrentPosition()
24   - Pass coords to get-weather Edge Function as lat+lon parameters
25   - Show a loading spinner while fetching