Vodostaj Rijeka: AI-Powered Water Level Monitoring
Amidst rising river levels and a desire for better data visualization, I embarked on a project to create Vodostaj Rijeka, an application for real-time and historical water level monitoring. The existing online resources were often basic, with graphs updated infrequently (e.g., every 30 minutes) and showing limited data. This sparked an idea for a more comprehensive and user-friendly solution.
The Challenge: AI-Driven Development
Inspired by the buzz around AI and “vibe coding,” I set a challenge: build a simple yet functional app that displays real-time and historical water levels from multiple sources, relying entirely on AI assistance for development. The goal was to see how effectively AI could handle the heavy lifting, from logic to styling.
Technology Stack
To keep things agile and modern, I opted for a straightforward yet powerful stack:
- Frontend: TypeScript with Vite, React, TailwindCSS,
shadcn/uifor components, andshadcn/charts(which utilizes Recharts) for data visualization. - Backend: Hono on Bun with SQLite
- Deployment: A single Docker image
Development Process: “Vibe Coding” with AI
Over approximately 3-4 hours, using about 30 AI prompts, the application took shape. While not every AI suggestion was perfect on the first try—requiring tweaks like “move X component” or “change GET to POST”—the AI managed most of the core development tasks. This AI-assisted approach, or “vibe coding,” allowed for rapid prototyping and implementation.
Key Features
The result is a practical application that offers:
- Real-time Data: Up-to-date water level information.
- Historical View: Access to past river level data.
- Multiple Sources: Aggregates data for a comprehensive overview.
- Clean UI: A user-friendly and responsive interface.
- Zero Manual Coding (Almost!): Built primarily through AI prompts, demonstrating the power of AI in modern development workflows.
Recent Update: AI-Enhanced Graphs
A recent enhancement involved adding reference lines to the graph to indicate the maximum and minimum water levels for a selected period. This was achieved with a single, descriptive AI prompt:
“I would like to add reference lines to the graph—one indicating the maximum value for the selected period, and another for the minimum value. The maximum reference line should be a dark red line with a simple label placed above it, following the style used in the rest of the graph. The minimum reference line should be dark green, with its label positioned below the line.”
The AI successfully handled the logic, styling (dark red and dark green lines with styled labels), and placement, requiring zero manual coding for this feature.
Conclusion
Vodostaj Rijeka stands as a testament to the capabilities of AI-assisted development. It’s a small but practical app that effectively addresses a real-world need, built rapidly and efficiently.
Check out the live application: vodostaj.zeljic.com