Adopt Pet App adalah aplikasi berbasis web yang menyediakan platform untuk adopsi hewan peliharaan. Aplikasi ini memudahkan orang untuk mencari dan mengadopsi hewan peliharaan, serta memungkinkan pemilik hewan untuk membuka adopsi.
-
🔐 Sistem Autentikasi
- Register sebagai Pengadopsi atau Pemilik Hewan
- Login/Logout
- Role-based access control
-
🐾 Manajemen Hewan
- Daftar kucing dan anjing yang tersedia untuk adopsi
- Filter dan pencarian hewan
- Detail informasi hewan termasuk umur dan lokasi
- Integrasi dengan Google Maps untuk lokasi hewan
-
📝 Fitur Adopsi
- Form pengajuan adopsi
- Status adopsi tracking
- Notifikasi keberhasilan adopsi
- Kontak langsung dengan pemilik
-
🏠 Open Adopsi
- Form pendaftaran hewan untuk diadopsi
- Upload foto hewan
- Input lokasi dengan koordinat
- Manajemen status adopsi
- Frontend: Next.js 13+ dengan App Router
- Styling: Tailwind CSS
- UI/UX: Modern dan responsif dengan gradien warna dan animasi
- Maps: Google Maps API untuk visualisasi lokasi
- Image Handling: Cloudinary
- Authentication: JWT (JSON Web Tokens)
- Clone repository:
git clone https://github.com/yourusername/adopt-pet-app.git
cd adopt-pet-app
- Install dependencies:
npm install
- Setup environment variables:
Buat file
.env.local
dan isi dengan:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
- Jalankan development server:
npm run dev
- Buka http://localhost:3000 di browser.
- Beranda (
/
) - Landing page dengan informasi utama - Daftar Kucing (
/cat-list
) - Katalog kucing untuk adopsi - Daftar Anjing (
/dog-list
) - Katalog anjing untuk adopsi - Open Adopsi (
/open-adopt
) - Form untuk mendaftarkan hewan - Login (
/login
) - Halaman login - Register (
/register
) - Halaman pendaftaran - Adopsi Sukses (
/adoption-success
) - Halaman konfirmasi adopsi
-
Pengadopsi
- Melihat daftar hewan
- Mengajukan adopsi
- Melihat detail hewan dan lokasi
-
Pemilik Hewan
- Semua fitur Pengadopsi
- Mendaftarkan hewan untuk adopsi
- Mengelola status adopsi
- Menghapus listing hewan
- Responsive design untuk semua ukuran layar
- Animasi smooth untuk interaksi pengguna
- Color scheme yang konsisten dengan tema orange
- Loading states dan error handling
- Modal confirmations untuk aksi penting
- Image preview saat upload
- Sistem chat internal
- Riwayat adopsi
- Review dan rating
- Filter berdasarkan lokasi
- Notifikasi real-time