LarisLabs FloodBoy · IoT dashboard patterns
รายงาน repository สาธารณะกลายเป็น chapter ใหม่เมื่อมี pattern ที่นำไปใช้ต่อได้ · A public-repo survey becomes a new chapter when it yields reusable architecture patterns.
Source and verification
บทนี้มาจาก Discord #road-to-dev messages 1514901778468962314 และ 1514901785876365312 โดย No.6 SuperNovice เวลา 2026-06-12T07:58Z.
Pien verified the public GitHub organization via API on 2026-06-12: LarisLabs/floodboy-astro and LarisLabs/floodboy-ui-simple are visible public repositories.
What FloodBoy is
FloodBoy is described as a real-time flood monitoring system by CCDC Chiang Mai University. The public repos focus on IoT sensor dashboards, on-chain data, visualization, and resilient RPC access.
For this book, the reusable value is not the domain itself; it is the dashboard architecture pattern for uncertain devices and uncertain network nodes.
Repository map
| Repo | Role | Stack |
|---|---|---|
floodboy-astro | Main web dashboard for IoT flood sensors, board setup, calibration, and on-chain sensor data. | Astro, React, Tailwind CSS, Viem, p5.js, Chart.js, Cloudflare Workers/Pages. |
floodboy-ui-simple | Zero-build single-page prototype for visualization and smart-contract dashboard testing. | HTML, React 18, Tailwind CSS, p5.js, Viem loaded through CDN. |
Astro dashboard pattern
The key frontend pattern is to avoid Astro SSR friction for canvas-heavy libraries by dynamically loading p5.js inside React useEffect. Browser-only visualization code stays browser-only.
This pattern is useful for fleet dashboards that need live hardware visuals without forcing canvas libraries through SSR.
Flexible sensor store
The source note calls out a generic smart-contract sensor store, CatLabSensorStore, where fields are flexible by deploy-time parameters.
The reusable idea is a dynamic sensor schema: store heartbeat/log fields without hardcoding a new contract shape for every sensor family.
RPC latency ranking and fallback
The most reusable operational pattern from floodboy-ui-simple is RPC endpoint ranking. It sends eth_blockNumber to candidate RPC endpoints, ranks by latency, then wraps them with Viem fallback().
For unstable chains or local fleet chains, this prevents dashboards from failing just because the first RPC node is slow or down.
Fleet reuse
Use p5.js/canvas for premium live state views: temperature, node capacity, sensor status, and physical layout.
Use the dynamic sensor-store idea for internal heartbeat logs on a closed fleet chain.
Rank RPC endpoints and use fallback clients before rendering dashboards.
Keep a simple HTML/CDN prototype path for fast visualization experiments.