Aplikasi web modern untuk membagi tagihan dengan teman-teman secara mudah dan transparan. Dibangun dengan React, TypeScript, dan Tailwind CSS.

Pastikan Anda sudah menginstal:

• Node.js (versi 18 atau lebih baru)
• npm atau pnpm

1. Clone repository

   git clone https://github.com/AgengPraba/paroan-splitbill.git
   cd paroan-splitbill

2. Install dependencies

   npm install
   # atau jika menggunakan pnpm
   pnpm install

3. Jalankan development server

   npm run dev
   # atau
   pnpm dev

4. Buka aplikasi

   • Aplikasi akan berjalan di http://localhost:5173
   • Development server mendukung hot reload

npm run build
# atau
pnpm build

File hasil build akan tersimpan di folder dist/.

npm run preview
# atau
pnpm preview

src/
├── components/ # Komponen React
│ ├── AddButton.tsx # Tombol tambah teman
│ ├── Alert.tsx # Komponen alert
│ ├── AlertContainer.tsx
│ ├── Friend.tsx # Komponen item teman
│ ├── FriendList.tsx # Daftar teman
│ ├── Footer.tsx # Footer aplikasi
│ ├── ModalAlert.tsx # Modal alert custom
│ └── Navbar.tsx # Navigation bar
├── hooks/ # Custom React hooks
│ ├── useAlerts.ts # Hook untuk sistem alert
│ └── useModalAlert.ts # Hook untuk modal alert
├── utils/ # Utility functions
│ └── localStorage.ts # Fungsi localStorage
├── App.tsx # Komponen utama
└── main.tsx # Entry point

• Klik tombol "+" di pojok kanan bawah
• Isi nama teman (3-30 karakter)
• Pilih foto: gunakan foto default atau upload foto sendiri
• Klik "Tambah Teman"

• Klik icon dollar ($) pada teman yang ingin diajak split bill
• Isi form split bill:
  • Total Tagihan: Jumlah total yang harus dibayar
  • Tagihan Kamu: Bagian yang harus kamu bayar
  • Tagihan Teman: Bagian yang harus dibayar teman (otomatis terhitung)
  • Ditalangin sama: Pilih siapa yang membayar terlebih dahulu
• Klik "Simpan Split Bill"

• Gunakan search bar di navbar
• Ketik nama teman yang ingin dicari
• Hasil akan muncul secara real-time

• Klik icon trash (🗑️) pada teman yang ingin dihapus
• Konfirmasi penghapusan di modal yang muncul

Distributed under the MIT License. See LICENSE for more information.