Fishpedia adalah ensiklopedia ikan digital interaktif yang awalnya hanya untuk tugas sekolah,namun melihat potensi dari project ini saya berpikir akan mengembangkannya.
⚠️ Status Saat Ini: v1.0 (Prototype)
Data dan gambar saat ini masih menggunakan dummy data untuk keperluan demonstrasi UI/UX.
- 🗂️ Kategorisasi Cerdas: Filter berdasarkan Predator, Hias, dan Aquascape.
- 🔍 Pencarian Real-time: Cari berdasarkan nama spesies atau family.
- 📊 Grouping by Family: Daftar ikan dikelompokkan secara otomatis per keluarga taksonomi.
- 🎨 Modern UI/UX: Glassmorphism, animasi halus, dan desain responsif tanpa emoji berlebihan.
- 📱 Mobile First: Tampilan optimal di semua ukuran perangkat.
- 💡 Interactive Modal: Detail ikan ditampilkan dalam popup yang elegan tanpa pindah halaman.
Proyek ini dikembangkan secara bertahap dengan target fitur sebagai berikut:
- Dark mode toggle
- Improved search & filtering logic
- Sorting berdasarkan nama / harga
- Dedicated fish detail page (non-modal)
- Penambahan data spesies yang lebih lengkap
- Migrasi data dari hardcode ke file JSON terpisah
- Implementasi
fetch()untuk pengambilan data - Loading skeleton & error state handling
- Dynamic category & family generation
- Pagination / Infinite scroll untuk dataset besar
- Custom Hooks (
useFishData,useFavorites, dll) - React Router untuk navigasi multi-halaman
- Context API untuk global state management
- Advanced filtering & URL-based filtering (shareable links)
- Rendering optimization (
useMemo,useCallback)
- REST API menggunakan Express.js
- Endpoint CRUD untuk ikan, kategori, dan family
- MySQL database integration
- API validation & error handling middleware
- Dokumentasi API (Swagger / Postman)
- Kalkulator volume air & kebutuhan tank
- Rekomendasi jumlah ikan berdasarkan ukuran akuarium
- Informasi parameter air dasar (pH, suhu, GH/KH)
- Sistem rekomendasi kompatibilitas ikan
- Admin dashboard untuk manajemen data
- Upload gambar & validasi media
- Statistik & analytics spesies
- Authentication sistem admin
- User favorites / personal collection
- Fish comparison tool (side-by-side)
- Integrasi dengan platform IkanKu
- Monitoring aquarium berbasis IoT
- Data sensor realtime (suhu, pH, TDS)
- Profil akuarium personal user
- Rekomendasi ikan berbasis kondisi akuarium aktual
- Riwayat & grafik parameter air
| Technology | Purpose |
|---|---|
| React 18/19 | Core UI Library |
| Tailwind CSS | Utility-first Styling |
| Vite | Build Tool & Dev Server |
| JavaScript (ES6+) | Programming Language |
# Clone repository
git clone https://github.com/Tokitakun/fishpedia.git
# Install dependencies
npm install
# Run development server
npm run dev