Skip to main content

Runoff Depth Calculator Workshop

Welcome! In this workshop you will build a Tethys Component App from scratch — a web app whose entire interface is written in Python using Tethys's component framework (no HTML, no JavaScript, no CSS).

What you'll build​

The Runoff Depth Calculator estimates stormwater runoff for an urban area using the NRCS Curve Number method. The finished app lets a user:

  1. Click an urban-area polygon on an interactive map.
  2. Choose a design storm depth with a slider.
  3. Pick a hydrologic soil group and a land use.
  4. View the estimated runoff volume and a chart of runoff across design storms.

What you'll learn​

  • The Component App App class and @App.page functions
  • The lib namespace and component syntax (props-as-kwargs, children-as-call)
  • Reactive state with lib.hooks.use_state
  • Event handlers and the Mantine Stepper
  • Separating pure Python logic from the UI
  • Showing results with a modal and a Plotly chart

Prerequisites​

  • A working Tethys Platform install. If you don't have one, complete the Tethys Quick Start first.
  • Basic Python familiarity. No web development experience required.

When you're ready, start with Step 1: Set up & scaffold.