Case study

Fire Forecasting

Wildfire risk dashboard prototype for the Tri-County area, built on bundled sample forecasts.

  • Next.js
  • React
  • TypeScript
  • Material UI

In the product

Dashboard: KPI cards, a Leaflet forecast map, a 72-hour ApexCharts risk chart and the site forecast table, all on bundled sample data.
Dashboard. KPI cards, a Leaflet forecast map, a 72-hour ApexCharts risk chart and the site forecast table, all on bundled sample data.
Forecast Map: Full-width Leaflet map with layer toggles, the Tri-County bounding box, a risk legend and a site popup.
Forecast Map. Full-width Leaflet map with layer toggles, the Tri-County bounding box, a risk legend and a site popup.
ML History: Model training runs and KPI cards, clearly labelled as example data.
ML History. Model training runs and KPI cards, clearly labelled as example data.
Settings: General and display preferences, saved in the browser.
Settings. General and display preferences, saved in the browser.

Screens are recreated from the app’s real UI with fictional demo data.

The core problem

What needed solving

Fire-risk planning starts with a clear picture of which sites are trending toward danger over the next few days. This project works out what that operator view should look like before a live model sits behind it.

The solution

What I built

A forecast window (start date plus a 24, 48 or 72-hour horizon) drives four KPI cards, a map of sites coloured by risk level, a per-site risk chart with threshold and peak markers, and a site table, all recomputed from the bundled sample.

A Next.js dashboard prototype showing wildfire risk for Santa Barbara, Ventura and Los Angeles counties: KPI cards, a Leaflet forecast map, an ApexCharts risk chart and a site table, all driven by a small sample dataset built from a committed trihourly weather CSV. The monitoring sites and risk probabilities are fictional sample data, and the UI labels them that way. An earlier version included a Python ML pipeline (FIRMS, RAWS and FRAP data with ANN/LSTM models) and a FastAPI backend; that code now lives only in the git history while the project restarts from the front end.

Integration

How it fits together

A Next.js 14 App Router front end with Material UI renders four views: the dashboard, a full-width map, ML History and Settings. The dashboard reads a small JSON dataset that a Python script builds from the committed trihourly weather CSV. Leaflet draws the Tri-County box and risk-coloured sites, and ApexCharts plots the selected site's risk with threshold and peak annotations. The original ML pipeline and FastAPI service live in the git history.

The flow, step by step

  1. Install dependencies and start the Next.js dev server.
  2. Pick a forecast start date and a 24h, 48h or 72h horizon over the 15-17 Aug 2023 sample.
  3. Click a map marker or a table row to switch the risk chart to that site.
  4. Open /map for the full-width map with layer toggles and the risk legend.
Problems along the way

What got hard, and what I did about it

Showing a forecast without a model

The problem

The backend had been removed, but an honest dashboard still needed realistic inputs.

What I did

Built a reproducible sample from the real weather CSV, labelled the fictional sites and risk values as sample data in the UI, and documented where the original pipeline lives.

A build that would not install

The problem

A clean install failed on a peer-dependency conflict, and the production build loaded PostCSS plugins that were never installed.

What I did

Removed the leftover Tailwind and PostCSS config and resolved the dependency conflict so a clean install and production build work.

Unthemed components

The problem

Material UI ran with no theme, so components fell back to Roboto and default spacing.

What I did

Added a ThemeProvider with Inter typography and the App Router style cache.

Takeaways

What I learned

  • Labelling sample data plainly keeps a prototype honest.
  • A clean install and a production build are the first test any repo should pass.
Outcome

Where it stands today

Forecast dashboard with KPI cards for peak risk, sites above the 0.50 threshold, max temperature and min humidity.
Leaflet map with the Tri-County bounding box, risk-coloured site markers, popups, a legend and a scale bar.
ApexCharts risk chart with threshold and peak annotations, linked to the map and the table.
Reproducible sample data: a script rebuilds the bundled JSON from the weather CSV.

Milestones

  • Dashboard prototype

    KPI cards, forecast map, risk chart and site table on bundled sample data.

    Shipped
  • Build and theming

    Production build fixed, MUI theme and Inter typography applied.

    Shipped
  • Saved settings

    Settings are stored in the browser but not yet applied to the dashboard.

    Planned
  • Model-backed forecasts

    Serve real forecasts from a trained model; the original pipeline lives in git history.

    Planned

Next up

  • Apply the saved Settings (units, theme) to the dashboard.
  • Serve real forecasts from a trained model instead of sample data.