How to Build a Weather Application with Replit

1// Steps to add your API key:
2// 1. Go to openweathermap.org/api and sign up for the free tier
3// 2. Copy your API key from the API keys tab in your account
4// 3. In Replit, click the lock icon 🔒 in the left sidebar
5// 4. Click 'Add new secret'
6// 5. Key name: OPENWEATHERMAP_API_KEY
7// 6. Value: paste your API key
8// 7. Click 'Add secret'
9
10// Your app accesses it as:
11const apiKey = process.env.OPENWEATHERMAP_API_KEY;
12// NEVER put the actual key value in your code — always use process.env

1// Paste this into Replit Agent:
2// Build a weather application with Express and PostgreSQL using Drizzle ORM.
3// Schema:
4// saved_locations (id serial PK, user_id text, name text, latitude numeric, longitude numeric,
5// is_default bool default false, created_at),
6// weather_cache (id serial PK, location_key text unique,
7// data jsonb, fetched_at timestamp default now()),
8// search_history (id serial, user_id text, query text, latitude numeric,
9// longitude numeric, searched_at timestamp default now()).
10// Routes:
11// GET /api/weather/current?lat=&lng= (check cache first — if fetched_at < 30 min, return cached;
12// otherwise fetch from OpenWeatherMap API using process.env.OPENWEATHERMAP_API_KEY,
13// cache result, return data),
14// GET /api/weather/forecast?lat=&lng= (5-day forecast, same caching pattern with 3hr cache key),
15// GET /api/weather/search?q= (geocode city name to coordinates using OpenWeatherMap geocoding API),
16// POST /api/locations/save (save favorite location, user_id from Replit Auth),
17// GET /api/locations (user's saved locations with cached current weather),
18// DELETE /api/locations/:id,
19// GET /api/weather/alerts?lat=&lng= (severe weather alerts if available).
20// Cache key format: 'current:lat:{lat_1dp},lng:{lng_1dp}' (round to 1 decimal place).
21// React frontend: search bar at top for city name,
22// current weather card with temperature (Fahrenheit/Celsius toggle), condition icon,
23// humidity, wind speed, feels-like; 5-day forecast row with daily cards;
24// saved locations sidebar; condition-based background gradients
25// (sunny=warm yellow, cloudy=gray, rainy=blue-gray, night=dark blue).
26// Use process.env.OPENWEATHERMAP_API_KEY. Bind server to 0.0.0.0.

1// server/routes/weather.js
2const express = require('express');
3const fetch = require('node-fetch');  // or use built-in fetch in Node 18+
4const { db } = require('../db');
5const { weatherCache } = require('../schema');
6const { eq } = require('drizzle-orm');
7
8const router = express.Router();
9const CACHE_TTL_MINUTES = 30;
10
11router.get('/api/weather/current', async (req, res) => {
12  const { lat, lng } = req.query;
13  if (!lat || !lng) return res.status(400).json({ error: 'lat and lng required' });
14
15  // Round to 1 decimal place for cache key grouping
16  const roundedLat = Math.round(parseFloat(lat) * 10) / 10;
17  const roundedLng = Math.round(parseFloat(lng) * 10) / 10;
18  const cacheKey = `current:${roundedLat},${roundedLng}`;
19
20  // Check cache
21  const [cached] = await db.select().from(weatherCache)
22    .where(eq(weatherCache.locationKey, cacheKey))
23    .limit(1);
24
25  const cacheAge = cached
26    ? (Date.now() - new Date(cached.fetchedAt).getTime()) / 1000 / 60
27    : Infinity;
28
29  if (cached && cacheAge < CACHE_TTL_MINUTES) {
30    return res.json({ ...cached.data, cached: true });
31  }
32
33  // Fetch from OpenWeatherMap
34  const apiKey = process.env.OPENWEATHERMAP_API_KEY;
35  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${apiKey}&units=metric`;
36
37  const response = await fetch(url);
38  if (!response.ok) {
39    const errText = await response.text();
40    console.error('[weather] API error:', errText);
41    // Serve stale cache if available rather than erroring
42    if (cached) return res.json({ ...cached.data, stale: true });
43    return res.status(502).json({ error: 'Weather API unavailable' });
44  }
45
46  const data = await response.json();
47
48  // Upsert cache
49  await db.insert(weatherCache)
50    .values({ locationKey: cacheKey, data, fetchedAt: new Date() })
51    .onConflictDoUpdate({
52      target: weatherCache.locationKey,
53      set: { data, fetchedAt: new Date() },
54    });
55
56  res.json(data);
57});
58
59module.exports = router;

1// server/lib/retryDb.js
2async function withDbRetry(fn, { retries = 2, delayMs = 300 } = {}) {
3  let lastErr;
4  for (let attempt = 0; attempt <= retries; attempt++) {
5    try {
6      return await fn();
7    } catch (err) {
8      lastErr = err;
9      const msg = String(err?.message || '');
10      const isTransient =
11        msg.includes('terminating connection') ||
12        msg.includes('Connection terminated') ||
13        msg.includes('not queryable') ||
14        msg.includes('fetch failed') ||
15        err?.code === 'ECONNRESET' ||
16        err?.code === '57P01';
17
18      if (!isTransient || attempt === retries) throw err;
19      await new Promise(r => setTimeout(r, delayMs * (attempt + 1)));
20    }
21  }
22  throw lastErr;
23}
24
25module.exports = { withDbRetry };
26
27// Usage in weather route:
28// const { withDbRetry } = require('../lib/retryDb');
29// const [cached] = await withDbRetry(() =>
30//   db.select().from(weatherCache).where(eq(weatherCache.locationKey, cacheKey)).limit(1)
31// );

1// server/index.js — verify deployment binding
2const express = require('express');
3const path = require('path');
4const app = express();
5
6app.use(express.json());
7
8// API routes
9app.use(require('./routes/weather'));
10app.use(require('./routes/locations'));
11
12// Serve React build
13app.use(express.static(path.join(__dirname, '../public')));
14app.get('*', (req, res) => {
15  res.sendFile(path.join(__dirname, '../public/index.html'));
16});
17
18// MUST bind to 0.0.0.0 for Replit deployment
19const PORT = process.env.PORT || 3000;
20app.listen(PORT, '0.0.0.0', () => {
21  console.log(`Weather app running on port ${PORT}`);
22});