zeljic.com

Vodostaj Rijeka: Water Level Monitoring

Vodostaj Rijeka is a web application designed to monitor real-time and historical river water levels. Originally initiated to improve upon infrequent data updates in existing tools, the project has evolved into a high-performance system powered by a modern Rust backend.

Development Methodology: AI-Assisted “Vibe Coding”

The core engineering philosophy for this project is “vibe coding”—an AI-first approach where the developer acts as a director rather than a manual coder. The objective was to build and refactor a fully functional application with minimal developer intervention, relying on AI for logic, styling, and complex architectural migrations.

  • Timeline: Rapid prototyping and feature expansion.
  • Process: Features are implemented primarily through natural language prompts.
  • Result: A robust application where the AI handles everything from frontend components to strict backend type safety.

Technology Stack

The application utilizes a sophisticated, type-safe stack designed for reliability and performance.

Backend Architecture (Rust)

The backend has been migrated from a JavaScript runtime to a robust Rust ecosystem to ensure safety and concurrency:

  • Framework: axum for ergonomic and modular web application routing.
  • Runtime: tokio for handling asynchronous I/O and task scheduling.
  • Database Interface: sqlx for compile-time verified SQL queries.
  • Error Handling: anyhow and thiserror for idiomatic and traceable error management.
  • Database: SQLite (persisted as the reliable storage engine).

Frontend Architecture

  • Core: TypeScript, Vite, and React.
  • Styling & UI: TailwindCSS and shadcn/ui.
  • Visualization: shadcn/charts (Recharts).

Key Features

The application aggregates data from multiple sources to provide a comprehensive user experience. Key capabilities include:

  • Real-time Monitoring: Displays up-to-date water level information.
  • Historical Data: Allows users to view past river level trends via interactive charts.
  • Comprehensive Table View (New): A detailed tabular view allows users to scan, sort, and analyze water level measurements in a structured format.
  • Responsive Design: Features a clean interface optimized for both mobile and desktop devices.

AI Implementation Highlights

1. The Rust Migration

Migrating from a Bun/Hono stack to Rust (axum/tokio) is a significant architectural shift. Utilizing “vibe coding,” this complex refactor—including setting up the sqlx connection pool and implementing distinct error types with thiserror—was achieved with minimal manual code writing.

2. The Table View

The new Table View feature is a prime example of this workflow. The entire component, including data mapping, column sorting, and responsive UI styling, was generated via AI prompts, reinforcing the speed of AI-driven development.

3. Graph Reference Lines

Enhancements such as reference lines for maximum and minimum water levels were implemented using single, descriptive prompts. The AI successfully generated the logic and styling (dark red/green lines) without manual intervention.

Conclusion

Vodostaj Rijeka demonstrates the power of AI-assisted engineering, proving that complex, type-safe systems (like those built with Rust) can be developed rapidly with the “vibe coding” method.

Live Application: water-level.zeljic.com and vodostaj.zeljic.com