{"id":24733751,"url":"https://github.com/ryan-infitech/map-informasi-bencana","last_synced_at":"2025-07-21T04:33:31.960Z","repository":{"id":273547964,"uuid":"920086611","full_name":"Ryan-infitech/Map-Informasi-Bencana","owner":"Ryan-infitech","description":"website pemantauan bencana indonesia secara realtime","archived":false,"fork":false,"pushed_at":"2025-03-20T13:03:20.000Z","size":19613,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T12:50:12.042Z","etag":null,"topics":["bencana","bmkg","disasters","map","react","tugas-kuliah","university-assignment","vercel","vite"],"latest_commit_sha":null,"homepage":"https://map-bencana-indonesia.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ryan-infitech.png","metadata":{"files":{"readme":"README-ID.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-21T14:42:57.000Z","updated_at":"2025-03-20T13:03:23.000Z","dependencies_parsed_at":"2025-01-21T15:35:46.478Z","dependency_job_id":"0f018164-ac6d-4657-85d7-794a902afbf1","html_url":"https://github.com/Ryan-infitech/Map-Informasi-Bencana","commit_stats":null,"previous_names":["ryan-infitech/map-informasi-bencana"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ryan-infitech/Map-Informasi-Bencana","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-infitech%2FMap-Informasi-Bencana","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-infitech%2FMap-Informasi-Bencana/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-infitech%2FMap-Informasi-Bencana/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-infitech%2FMap-Informasi-Bencana/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ryan-infitech","download_url":"https://codeload.github.com/Ryan-infitech/Map-Informasi-Bencana/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryan-infitech%2FMap-Informasi-Bencana/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266240973,"owners_count":23898063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bencana","bmkg","disasters","map","react","tugas-kuliah","university-assignment","vercel","vite"],"created_at":"2025-01-27T18:44:19.422Z","updated_at":"2025-07-21T04:33:31.942Z","avatar_url":"https://github.com/Ryan-infitech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"right\"\u003e\n\n\u003ca href=\"README.md\"\u003e\u003cimg src=\"https://flagcdn.com/w40/gb.png\" width=\"25\" alt=\"English\"\u003e\u003c/a\u003e | \n\u003ca href=\"README-ID.md\"\u003e\u003cimg src=\"https://flagcdn.com/w40/id.png\" width=\"20\" alt=\"Indonesian\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n# Sistem Pemantauan Data Bencana Indonesia\n\nWebsite interaktif berbasis cloud yang menyajikan informasi real-time mengenai bencana alam di Indonesia dengan memanfaatkan teknologi React, Leaflet.js, dan Amazon Web Services (AWS). Sistem ini dirancang untuk memberikan akses mudah dan cepat kepada masyarakat serta pemangku kepentingan terkait mitigasi bencana.\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Live Demo](https://img.shields.io/badge/Live_Demo-00A4EF?style=for-the-badge\u0026logo=web\u0026logoColor=white)](https://map-informasi-bencana.vercel.app/)  [![Documentation](https://img.shields.io/badge/Documentation-00A4EF?style=for-the-badge\u0026logo=book\u0026logoColor=white)](https://drive.google.com/file/d/1fNdvSFGxiFrcWCKH0iKVoJJOPUsXY9Po/view?usp=drive_link)\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![preview](https://github.com/Ryan-infitech/Map-Informasi-Bencana/blob/main/readmemedia/preview.gif)\n\n\u003c/div\u003e\n\n## Gambaran Umum\n\nProyek ini dirancang untuk memvisualisasikan data bencana alam secara real-time menggunakan peta interaktif yang dilengkapi dengan ikon spesifik untuk setiap jenis bencana. Sistem ini memanfaatkan teknologi cloud AWS untuk menjamin skalabilitas dan ketersediaan informasi, serta dirancang responsif agar dapat diakses melalui berbagai perangkat.\n\n## Cara Penggunaan\n\n1. **Akses Website**: Buka [website](https://zekia-map-bencana-indonesia.vercel.app/) melalui browser.  \n2. **Eksplorasi Peta**: Gunakan fitur zoom dan drag untuk menjelajahi lokasi bencana di seluruh Indonesia.  \n3. **Klik Ikon Bencana**: Dapatkan detail informasi seperti jenis bencana, lokasi, waktu, dan tingkat keparahan.  \n4. **Gunakan Filter**: Pilih jenis bencana tertentu melalui tombol di sisi kanan layar.  \n5. **Mode Tampilan**: Ubah mode terang/gelap melalui tombol di sudut kanan atas.\n\n## Contoh Tampilan\n\n### Peta Interaktif\n![](./readmemedia/sslightmode.png)\n\n### Detail Bencana\n![](./readmemedia/ssdetailbencana.png)\n\n\n## Fitur Utama\n\n- **Real-Time Data**: Informasi bencana terkini langsung dari API BMKG.  \n- **Peta Interaktif**: Pengguna dapat mengeksplorasi lokasi bencana dengan fitur zoom, drag, dan klik ikon untuk detail informasi.  \n- **Filter Bencana**: Memilih jenis bencana tertentu seperti gempa bumi, banjir, atau tsunami.  \n- **Mode Terang/Gelap**: Tampilan yang dapat disesuaikan untuk kenyamanan pengguna.  \n- **Responsif**: Dapat diakses dengan optimal di perangkat desktop, tablet, maupun ponsel.\n\n\n\n## Teknologi yang Digunakan\n![](./readmemedia/vite+react.gif)  \n\n\u003cdiv align=\"center\"\u003e\n   \n![AWS](https://github.com/Ryan-infitech/Map-Informasi-Bencana/blob/main/readmemedia/aws.gif)  ![Vercel](https://github.com/Ryan-infitech/Map-Informasi-Bencana/blob/main/readmemedia/vercel.gif)  ![Leaflet.js](https://github.com/Ryan-infitech/Map-Informasi-Bencana/blob/main/readmemedia/leaflet.gif)  ![Tailwind CSS](https://github.com/Ryan-infitech/Map-Informasi-Bencana/blob/main/readmemedia/tailwind.gif)\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\n## Instalasi dan Konfigurasi\n\n1. **Clone repositori:**\n   ```bash\n   git clone https://github.com/username/project-name.git\n   cd project-name\n   ```\n\n2. **Instalasi dependensi:**\n   ```bash\n   npm install\n   ```\n\n3. **Konfigurasi file `.env`:**\n   Buat file `.env` di root proyek dan masukkan variabel-variabel berikut:\n   ```env\n   VITE_AWS_ACCESS_KEY_ID=your-aws-key-id\n   VITE_AWS_SECRET_ACCESS_KEY=your-aws-secret-access-key\n   VITE_AWS_REGION=your-aws-region\n   ```\n\n4. **Menjalankan aplikasi lokal:**\n   ```bash\n   npm run dev\n   ```\n\n5. **Deployment ke Vercel:**\n   - Hubungkan repositori ke akun Vercel.\n   - Atur variabel lingkungan yang sama pada pengaturan proyek di Vercel.\n   - Lakukan deployment melalui dashboard Vercel.\n\n\n\n## Rencana Pengembangan\n\n1. Penambahan fitur notifikasi peringatan dini.  \n2. Integrasi dengan data historis untuk analisis jangka panjang.  \n3. Optimalisasi untuk wilayah dengan koneksi internet rendah.  \n4. Penambahan fitur personalisasi pengguna.  \n5. Pengembangan laporan berbasis data untuk pengambil kebijakan.\n\n\n\n## Kontribusi\n\nKontribusi dalam bentuk kode, ide, atau saran sangat diterima!  \n1. Fork repositori ini.  \n2. Buat branch untuk fitur baru.  \n3. Commit perubahan Anda.  \n4. Push ke branch Anda.  \n5. Buat Pull Request.  \n\n\n\n## Lisensi\n\nProyek ini dilindungi oleh lisensi MIT. Silakan cek file `LICENSE` untuk informasi lebih lanjut.\n\n\n\n ## Kontak\n\nJika Anda memiliki pertanyaan atau saran, silakan buka issue baru di repository ini.\n\n[![WhatsApp](https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge\u0026logo=whatsapp\u0026logoColor=white)](https://wa.me/6285157517798)\n[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge\u0026logo=instagram\u0026logoColor=white)](https://www.instagram.com/ryan.septiawan__/)\n[![linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/rian-septiawan-23b0a5351/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-infitech%2Fmap-informasi-bencana","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryan-infitech%2Fmap-informasi-bencana","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-infitech%2Fmap-informasi-bencana/lists"}