The latest articles on DEV Community by Gusti Permana Putra (@gustipermanap). https://dev.to/gustipermanap https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3526224%2Fd732671d-679c-4088-897a-f63d41b2c109.jpeg https://dev.to/gustipermanap en Gusti Permana Putra Wed, 24 Sep 2025 09:40:51 +0000 https://dev.to/gustipermanap/building-a-flood-monitoring-dashboard-with-django-react-2m4i https://dev.to/gustipermanap/building-a-flood-monitoring-dashboard-with-django-react-2m4i <h1> Building a Flood Monitoring Dashboard with Django &amp; React </h1> <h2> The Problem: Banjir di Tangerang Selatan </h2> <p>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.</p> <h2> Tech Stack Choice </h2> <ul> <li> <strong>Backend:</strong> Django REST Framework (handles data processing &amp; API)</li> <li> <strong>Frontend:</strong> React + Chart.js (real-time visualization)</li> <li> <strong>Database:</strong> PostgreSQL (for scalability)</li> <li> <strong>Future Plan:</strong> IoT water sensors for real data collection</li> </ul> <h2> Day 1 Progress: Basic Setup </h2> <h3> Backend (Django) </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code># 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" </code></pre> </div> <p><strong>Frontend (React)</strong></p> <ul> <li>Setup basic React app dengan Create React App</li> <li>Komponen sederhana untuk menampilkan data level air</li> <li>Fetch data dari Django API endpoint</li> </ul> <p><strong>Current Challenge</strong><br> Membuat interface yang mudah dipahami masyarakat umum. Tidak semua orang paham istilah teknis seperti "water level cm" - perlu visualisasi yang intuitif.</p> <p><strong>What's Next</strong></p> <ul> <li>Add map integration (Google Maps/OpenStreetMap)</li> <li>Create mock data untuk demo purposes</li> <li>Build alert system ketika level air mencapai threshold tertentu</li> <li>Mobile-responsive design</li> </ul> <p><strong>GitHub Repository</strong><br> [Repository akan di-update soon!] - Masih dalam development awal</p> <p>Let's connect! Follow my journey:</p> <p>GitHub: github.com/gustipermanap</p> <h2> GitHub Repository </h2> <p>🚀 <strong>Repository is now live!</strong> Follow the progress and contribute:</p> <p><a href="https://github.com/gustipermanap/flood-monitoring-dashboard" rel="noopener noreferrer">https://github.com/gustipermanap/flood-monitoring-dashboard</a></p> <p>Current structure:</p> <ul> <li>✅ Basic Django models and API setup</li> <li>✅ React frontend initialization </li> <li>🚧 Map integration (in progress)</li> </ul> <h2> What's Coming Next </h2> <p>In Part 2, I'll cover:</p> <ul> <li>Setting up the complete project structure</li> <li>Django REST Framework serializers and views</li> <li>Connecting React frontend to Django API</li> <li>Dealing with CORS configuration</li> </ul> <p><strong>Stay tuned!</strong> ⚡</p> <h1> IndonesianDeveloper #Django #WebDev #IOT #REACT </h1> django react iot webdev