How I Built a Free Weather Radio Programming Site for Hixson

I was scrolling through the local news on Thursday when I saw a notice about free weather radio programming in Hixson. It got me thinking: why not turn that schedule into a tiny web app that anyone can query? In this post I walk through how I fetched the raw broadcast list, turned it into JSON, and layered a live weather API on top—all with tools I already have in my dev toolbox.

Why this matters: If you’re building any public‑facing service that aggregates broadcast schedules, you need a reliable pipeline from raw source to user‑ready UI.

#Fetching the Thursday Schedule with a Simple Scraper

The first hurdle was pulling the schedule from the local news site. The page is static HTML, so a lightweight Node.js script with node-fetch and cheerio does the trick.

import fetch from 'node-fetch';
import cheerio from 'cheerio';

const URL = 'https://local3news.com/hixson-weather-radio';
const response = await fetch(URL);
const html = await response.text();
const $ = cheerio.load(html);

// Assume each program is in a <li class="program">
const programs = [];
$('li.program').each((_, el) => {
  const time = $(el).find('.time').text().trim();
  const title = $(el).find('.title').text().trim();
  programs.push({ time, title });
});

console.log(JSON.stringify(programs, null, 2));

On line 9 above, I target the list items that contain the schedule. If the site changes its markup, you’ll need to adjust the selectors accordingly.

Tip: To avoid reinventing the wheel for cost planning, I used Estimate Website Cost to get a quick budget snapshot before I started building the UI.

#Parsing the Radio Feed into Structured JSON

The raw strings from the scraper look like "08:00 AM – Sunrise Weather Update". I wrote a tiny parser that normalizes the time into ISO format and splits the title.

interface Program {
  start: string; // ISO 8601
  title: string;
}

function parseProgram(raw: { time: string; title: string }): Program {
  const [hour, minute, period] = raw.time.match(/(\d{1,2}):(\d{2})\s*(AM|PM)/)!.slice(1);
  let hourNum = Number(hour);
  if (period === 'PM' && hourNum !== 12) hourNum += 12;
  if (period === 'AM' && hourNum === 12) hourNum = 0;
  const isoTime = `2026-10-14T${hourNum.toString().padStart(2, '0')}:${minute}:00Z`;
  return { start: isoTime, title: raw.title };
}

// Example usage
const structured = programs.map(parseProgram);
console.log(structured);

#Handling Edge Cases in Time Formats

• Midnight (12:00 AM) needs to be converted to 00:00.
• Noon (12:00 PM) stays as 12:00.
• Some entries omit the period; in that case, assume 24‑hour time.

Note: Always validate the parsed dates before storing them; a malformed time will break downstream sorting.

#Displaying the Free Weather Radio Programming on a Map

With the schedule in hand, I built a minimal React component that shows each program next to a Leaflet map of Hixson. The map gives users a geographic context for the broadcast towers.

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function RadioSchedule({ programs }: { programs: Program[] }) {
  return (
    <div className="schedule">
      {programs.map((p) => (
        <div key={p.start} className="item">
          <strong>{new Date(p.start).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</strong> – {p.title}
        </div>
      ))}
      <MapContainer center={[35.1, -84.9]} zoom={12} style={{ height: 300, marginTop: 20 }}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <Marker position={[35.1, -84.9]}>
          <Popup>Hixson Radio Tower</Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

Warning: Leaflet requires the map container to have explicit width/height; otherwise the map won’t render.

#Integrating a Weather API for Real‑Time Alerts

To make the app truly useful, I layered current conditions from the OpenWeatherMap API. The free tier is sufficient for a low‑traffic hobby project.

curl "https://api.openweathermap.org/data/2.5/weather?q=Hixson,US&appid=YOUR_KEY&units=imperial"

The response includes temperature, wind speed, and a brief description—perfect for appending to each program entry.

async function enrichWithWeather(programs) {
  const weatherRes = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=Hixson,US&appid=${process.env.OWM_KEY}&units=imperial`
  );
  const weather = await weatherRes.json();
  return programs.map((p) => ({
    ...p,
    weather: `${weather.main.temp}°F, ${weather.weather[0].description}`
  }));
}

I then displayed the weather snippet beneath each program line, giving listeners a quick glance at current conditions.

Note: Respect the API’s rate limits; cache the weather data for at least five minutes to avoid hitting the quota.

#Deploying and Estimating Costs

After wiring everything together, I pushed the repo to Vercel for instant previews. The static site costs almost nothing, but if you decide to add server‑side rendering or a database for user‑generated playlists, the budget can grow quickly. That’s why I ran the final estimate through Estimate Website Cost to confirm the numbers stayed within my personal budget.

#Quick checklist before launch

1. Verify the scraper respects the site’s robots.txt.
2. Add error handling for network failures.
3. Cache weather responses to stay under API limits.
4. Write unit tests for the time‑parsing logic.
5. Set up a CI pipeline that runs linting and builds the app.

#Closing Thoughts

Building a free weather radio programming viewer for Hixson turned out to be a fun weekend project that touched web‑scraping, data parsing, UI mapping, and API integration. The core pattern—fetch → normalize → enrich → display—applies to many broadcast‑oriented services. If you’re planning a similar site, start small, validate the data source, and use tools like Estimate Website Cost early to keep the scope realistic. Happy coding!