Backend & Data / Frontend prototype

Smog Prediction Interface

A Next.js air-quality interface exploring prediction API integration, pollutant inputs, and forecast presentation.

Explore the architecture ↓View repository ↗
Focus
Application engineering
Project type
Frontend prototype
Core technologies
Next.js · TypeScript · React · Tailwind CSS
Smog Prediction Interface concept interface illustration
Concept interface illustration

Context

The engineering problem

Prediction outputs need a usable interface that connects pollutant inputs, an external API, and clear presentation of air-quality information.

System architecture

Architecture at a glance

A simplified implementation map based on the linked repository. Arrows show the principal relationships; deployment details live in the source.

  1. clientBrowser
    User interaction
    serviceNext.js feature UI
  2. databaseSample sensor inputs
    Prototype inputs
    serviceNext.js feature UI
  3. serviceNext.js feature UI
    Pollutant payload
    gatewayAxios request
  4. gatewayAxios request
    Prediction request
    externalExternal prediction API
  5. externalExternal prediction API
    Response display
    clientForecast presentation
All system components (6)
  • Browserclient
  • Next.js feature UIservice
  • Sample sensor inputsdatabase
  • Axios requestgateway
  • External prediction APIexternal
  • Forecast presentationclient

Approach

Implementation decisions

  • Next.js
  • TypeScript
  • React
  • Tailwind CSS
  • Axios

Organize by feature

Separate prediction, AQI display, and live-smog areas group the interface around user tasks.

Isolate the API boundary

Axios sends pollutant inputs to a configurable external prediction endpoint.

Distinguish prototype data

Sample sensor fixtures and illustrative future values support interface development; they should not be treated as validated environmental predictions.

Explore the implementation

Start with the source.

These entry points connect the architecture to the implementation.

Implementation scope

Frontend prototype. Some displays use sample data and illustrative forecasts. Model training, forecast validation, and reliable live sensor ingestion are outside this repository.