Building a Flood Monitoring Dashboard with Django & React

The Problem: Banjir di Tangerang Selatan

Sebagai developer yang tinggal di Tangerang Selatan, saya sering melihat bagaimana banjir mempengaruhi kehidupan sehari-hari. Sistem monitoring yang ada seringkali terbatas aksesnya bagi masyarakat umum.

Tech Stack Choice

• Backend: Django REST Framework (handles data processing & API)
• Frontend: React + Chart.js (real-time visualization)
• Database: PostgreSQL (for scalability)
• Future Plan: IoT water sensors for real data collection

Day 1 Progress: Basic Setup

Backend (Django)

# models.py class FloodData(models.Model): location = models.CharField(max_length=100) water_level = models.FloatField() # in cm timestamp = models.DateTimeField(auto_now_add=True) status = models.CharField(max_length=20) # normal, waspada, bahaya def __str__(self): return f"{self.location} - {self.water_level}cm" 

Frontend (React)

• Setup basic React app dengan Create React App
• Komponen sederhana untuk menampilkan data level air
• Fetch data dari Django API endpoint

Current Challenge
Membuat interface yang mudah dipahami masyarakat umum. Tidak semua orang paham istilah teknis seperti "water level cm" - perlu visualisasi yang intuitif.

What's Next

• Add map integration (Google Maps/OpenStreetMap)
• Create mock data untuk demo purposes
• Build alert system ketika level air mencapai threshold tertentu
• Mobile-responsive design

GitHub Repository
[Repository akan di-update soon!] - Masih dalam development awal

Let's connect! Follow my journey:

GitHub: github.com/gustipermanap

GitHub Repository

🚀 Repository is now live! Follow the progress and contribute:

https://github.com/gustipermanap/flood-monitoring-dashboard

Current structure:

• ✅ Basic Django models and API setup
• ✅ React frontend initialization
• 🚧 Map integration (in progress)

What's Coming Next

In Part 2, I'll cover:

• Setting up the complete project structure
• Django REST Framework serializers and views
• Connecting React frontend to Django API
• Dealing with CORS configuration

Stay tuned! ⚡

IndonesianDeveloper #Django #WebDev #IOT #REACT