{"id":3321,"date":"2026-07-15T12:00:00","date_gmt":"2026-07-15T12:00:00","guid":{"rendered":"https:\/\/setian.co\/studio\/?p=3321"},"modified":"2026-11-03T02:09:24","modified_gmt":"2026-11-03T07:09:24","slug":"watershed-watch-app","status":"publish","type":"post","link":"https:\/\/setian.co\/studio\/watershed-watch-app\/","title":{"rendered":"Watershed Watch App <br>{ Field Data Collection PWA }"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\">Web &amp; Apps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Offline-First Field Data Collection App (PWA)<\/h3>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">for The Watershed Project<\/h3>\n\n\n\n<p><strong>Watershed Watch<\/strong> is a mobile-first, offline-first Progressive Web App built for <strong>The Watershed Project<\/strong>&rsquo;s water-quality monitoring program in the East Bay. Volunteers, team leaders and scientists use it at the creek to record observations and measurements, even without a signal; sessions sync to the organization&rsquo;s database when connectivity returns and export directly in the formats regulators and partners need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-heartbeat\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>What it does<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Field sessions that work offline:<\/strong> station, team and site observations are entered in the field and stored on the device first, then synced when the phone is back online.<\/li>\n\n\n<li><strong>Team access-code login:<\/strong> each monitoring crew signs in with its own code and sees only its own stations.<\/li>\n\n\n<li><strong>Seven water-quality parameters, four replicates each:<\/strong> temperature, pH, turbidity, dissolved oxygen, oxygen saturation, specific conductance and nitrate, with notes per parameter.<\/li>\n\n\n<li><strong>Real-time validation:<\/strong> replicate readings must agree within 10% of their average, flagged as the volunteer types so bad readings are caught at the creek, not back at the office.<\/li>\n\n\n<li><strong>Two entry modes:<\/strong> one-parameter-at-a-time cards for guided entry, or an all-parameters batch table that is keyboard-friendly for experienced teams.<\/li>\n\n\n<li><strong>Water-not-available handling:<\/strong> dry or unobservable stations are recorded explicitly instead of leaving gaps.<\/li>\n\n\n<li><strong>Review before submit:<\/strong> a session summary page lets teams check everything before it is finalized.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-photo\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>Images<\/strong><\/h3>\n\n\n\n<div class=\"app-carousel\"><button type=\"button\" class=\"app-carousel-prev\" aria-label=\"Previous screenshot\">&lsaquo;<\/button><div class=\"app-carousel-track\"><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-13-468x1024.jpg\" alt=\"Watershed Watch App - Login (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Team login with access code<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-01-468x1024.jpg\" alt=\"Watershed Watch App - Team dashboard (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Team dashboard: stations and monthly progress<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-02-468x1024.jpg\" alt=\"Watershed Watch App - Session management (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Session management<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-03-468x1024.jpg\" alt=\"Watershed Watch App - Observations (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Observations: basic information<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-05-468x1024.jpg\" alt=\"Watershed Watch App - Site observations (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Site observations<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-06-468x1024.jpg\" alt=\"Watershed Watch App - Site conditions (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Site conditions<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-07-468x1024.jpg\" alt=\"Watershed Watch App - Measurements (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Measurements: water-not-available option<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-08-468x1024.jpg\" alt=\"Watershed Watch App - Measuring devices and depth (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Replicate readings, devices and depth<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-09-468x1024.jpg\" alt=\"Watershed Watch App - Departure time (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Departure time and page checks<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-10-468x1024.jpg\" alt=\"Watershed Watch App - Stored data review (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Stored data review: monthly station progress<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-11-468x1024.jpg\" alt=\"Watershed Watch App - Station status (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Station status and data review<\/figcaption><\/figure><figure class=\"app-carousel-slide\"><img decoding=\"async\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/up-12-468x1024.jpg\" alt=\"Watershed Watch App - Online database data (mobile screenshot)\" loading=\"lazy\"\/><figcaption>Data stored on the phone, ready to sync<\/figcaption><\/figure><\/div><button type=\"button\" class=\"app-carousel-next\" aria-label=\"Next screenshot\">&rsaquo;<\/button><div class=\"app-carousel-dots\"><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-file-video\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>Data exports<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CEDEN export:<\/strong> an Excel workbook (field results, habitat results and locations) in the California Environmental Data Exchange Network format, with the code mappings the state template requires.<\/li>\n\n\n<li><strong>WQM export:<\/strong> a CSV for The Watershed Project&rsquo;s water-quality visualization tool.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-heartbeat\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>Administrator portal<\/strong><\/h3>\n\n\n\n<p>A second, role-restricted interface for program staff (still evolving) covers the full session table with pagination and CEDEN export, a data-quality check for duplicate station-and-date sessions and finished sessions with no measurements, session editing, team and team-contact management, station and organization settings, and an analytics dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3401\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: Administrator login\" class=\"wp-image-3401\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-1.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3402\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: Administrator dashboard\" class=\"wp-image-3402\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-2.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3403\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: Completion breakdown by organization\" class=\"wp-image-3403\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-3.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3404\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: Sessions manager\" class=\"wp-image-3404\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-4.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3405\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: CEDEN export\" class=\"wp-image-3405\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-5.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" data-id=\"3406\" src=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-1024x640.jpg\" alt=\"Watershed Watch App administrator portal: Edit session\" class=\"wp-image-3406\" srcset=\"https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-1024x640.jpg 1024w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-300x188.jpg 300w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-768x480.jpg 768w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-1536x960.jpg 1536w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-1240x775.jpg 1240w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6-508x318.jpg 508w, https:\/\/setian.co\/studio\/wp-content\/uploads\/2026\/11\/adm-6.jpg 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-heartbeat\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>Under the hood<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Front end:<\/strong> React 18 and TypeScript, Material UI with Tailwind, Recharts for analytics, installable as a PWA with local storage-based state.<\/li>\n\n\n<li><strong>Back end:<\/strong> PHP API on MySQL.<\/li>\n\n\n<li><strong>Coverage:<\/strong> 58 monitoring stations across 15 creeks and waterbodies, run by TWP and its partner-organization teams.<\/li>\n\n\n<li><strong>Release process:<\/strong> versioned production releases, currently at v2.1.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><i aria-hidden=\"true\" class=\"fa fa-heartbeat\"  style=\"font-size:50px;line-height:50px\"><\/i>&nbsp;<strong>The team:<\/strong><\/h3>\n\n\n\n<p><strong>Sebastian Gonzalez Dixon \/ Setian Studio:<\/strong> App design and development (front end, back end and data exports)<br>Client: The Watershed Project, Richmond, CA<\/p>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Watershed Watch is an offline-first mobile web app (PWA) for The Watershed Project: field water-quality data entry, real-time validation and CEDEN export.<\/p>\n","protected":false},"author":1,"featured_media":2942,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97,42,13,96,106,108,50],"tags":[117,197,199,189,27,188,47,118,201,187,198,200,190,191,196,70],"class_list":["post-3321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-apps","category-apps","category-code","category-html-css-js","category-omotio","category-setian","category-web","tag-apps","tag-citizen-science","tag-dashboard","tag-data-collection","tag-engineering","tag-environment","tag-interface","tag-mobile","tag-mysql","tag-nonprofit","tag-offline-first","tag-php","tag-pwa","tag-react","tag-water-quality","tag-web-design"],"_links":{"self":[{"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/posts\/3321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/comments?post=3321"}],"version-history":[{"count":6,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/posts\/3321\/revisions"}],"predecessor-version":[{"id":3412,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/posts\/3321\/revisions\/3412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/media\/2942"}],"wp:attachment":[{"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/media?parent=3321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/categories?post=3321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/setian.co\/studio\/wp-json\/wp\/v2\/tags?post=3321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}