1. 🏦 Sistem Simpanan Bank

Sistem manajemen akun deposito modern yang dibangun dengan React, Node.js, Express, dan PostgreSQL. Menampilkan perhitungan bunga otomatis, arsitektur bersih, dan UI yang cantik dengan shadcn/ui.

✨ Fitur

🎯 Fungsionalitas Inti

• Manajemen Pelanggan - Membuat, memperbarui, dan mengelola profil pelanggan.
• Tipe Deposito - Mengonfigurasi berbagai paket deposito dengan suku bunga yang berbeda.
• Manajemen Akun - Membuka dan mengelola akun deposito dengan penautan pelanggan.
• Transaksi Cerdas - Pemrosesan setoran dan penarikan otomatis dengan perhitungan bunga.
• Perhitungan Bunga - Perhitungan otomatis berdasarkan durasi dan tingkat pengembalian bulanan.

💎 Sorotan Teknis

• Arsitektur Bersih - Pemisahan lapisan (routes → controllers → services).
• UI Modern - Dibangun dengan React, Tailwind CSS, dan komponen shadcn/ui.
• API Type-Safe - API RESTful dengan middleware validasi.
• Keamanan Transaksi - Transaksi PostgreSQL dengan penguncian tingkat baris (row-level locking).
• Desain Responsif - Berjalan mulus di perangkat desktop dan seluler.

📸 Cuplikan Layar

Dashboard

Gambaran umum statistik dengan total pelanggan, akun, dan saldo.

Manajemen Pelanggan

Operasi CRUD untuk manajemen pelanggan dengan formulir dialog.

Tipe Deposito

Konfigurasi paket deposito dengan suku bunga berbeda.

Manajemen Akun

Melihat dan mengelola akun pelanggan dengan pelacakan saldo.

Transaksi

Memproses setoran dan penarikan dengan perhitungan bunga otomatis.

2. 🏗️ Arsitektur

┌─────────────────────────────────────────────────────────┐
│                     Frontend (React)                     │
│  React Router │ shadcn/ui │ Tailwind CSS │ Lucide Icons │
└────────────────────┬────────────────────────────────────┘
                     │ HTTP/JSON REST API
┌────────────────────┴────────────────────────────────────┐
│                  Backend (Node.js/Express)               │
│  Routes → Controllers → Services → Database              │
└────────────────────┬────────────────────────────────────┘
                     │ SQL Queries
┌────────────────────┴────────────────────────────────────┐
│                  Database (PostgreSQL)                   │
│  customers │ deposito_types │ accounts │ transactions    │
└─────────────────────────────────────────────────────────┘

Struktur Backend

backend/src/
├── config/          # Konfigurasi database
├── utils/           # Fungsi pembantu (tanggal, hitung bunga)
├── middleware/      # Validasi & penanganan kesalahan
├── services/        # Lapisan logika bisnis
├── controllers/     # Penangan permintaan HTTP
├── routes/          # Definisi endpoint API
└── index.js         # Titik masuk server

Struktur Frontend

frontend/src/
├── components/
│   ├── ui/          # Komponen dasar shadcn/ui
│   └── layout/      # Komponen tata letak (Sidebar, AppLayout)
├── pages/           # Komponen halaman (Dashboard, Customers, dll.)
├── lib/             # Utilitas
├── api.js           # Klien API
└── App.jsx          # Pengaturan Router

3. 🚀 Memulai Cepat

Prasyarat

• Node.js 18+
• PostgreSQL 14+
• npm or yarn

Instalasi

1. Clone repositori

git clone https://github.com/daffa09/bank-saving-system.git
cd bank-saving-system

2. Setup Database

# Buat database PostgreSQL
createdb bank_saving_system

# Jalankan skema (lihat docs/DATABASE_DESIGN.md untuk SQL)
psql bank_saving_system < schema.sql

3. Setup Backend

cd backend
npm install

# Buat file .env
echo "DATABASE_URL=postgresql://user:password@localhost:5432/bank_saving_system" > .env
echo "PORT=5000" >> .env

# Jalankan server backend
npm run dev

4. Setup Frontend

cd frontend
npm install

# Install dependensi yang diperlukan
npm install react-router-dom lucide-react class-variance-authority clsx tailwind-merge sonner date-fns
npm install @radix-ui/react-dialog
npm install -D tailwindcss@3 postcss autoprefixer

# Jalankan server pengembangan frontend
npm run dev

5. Akses aplikasi

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

4. 🐳 Deployment Docker

Mulai Cepat dengan Docker

Backend:

cd backend
docker build -t bank-system-backend .
docker run -p 5000:5000 -e DATABASE_URL=postgresql://user:pass@host:5432/db bank-system-backend

Frontend:

cd frontend
docker build -t bank-system-frontend .
docker run -p 3000:3000 bank-system-frontend

Untuk detail pengaturan Docker, variabel lingkungan, dan konfigurasi Docker Compose, lihat DOCKER.md.

5. 📚 Dokumentasi

Dokumentasi komprehensif tersedia di folder docs/:

• Desain Database - ERD, skema, relasi.
• Dokumentasi API - Semua endpoint dengan contoh.
• Diagram UML - Diagram Class, sequence, use case.
• User Journey - Alur pengguna dan wireframe.
• Koleksi Postman - Tes API siap impor.
• API Blueprint (Apiary) - Format dokumentasi API online.

Dokumentasi API Online

Lihat dokumentasi API secara online: Dokumentasi Apiary

6. 🔌 Endpoint API

URL Dasar: http://localhost:5000

7. 💰 Perhitungan Bunga

Sistem menghitung bunga menggunakan rumus berikut:

bulan = selisihBulan(tanggal_buka, tanggal_penarikan)
pengembalian_bulanan = pengembalian_tahunan / 12 / 100
bunga = saldo × bulan × pengembalian_bulanan
saldo_akhir = saldo + bunga

Contoh:

• Saldo Awal: Rp 10.000.000
• Pengembalian Tahunan: 6%
• Durasi: 12 bulan
• Bunga yang Didapat: Rp 600.000
• Total Pembayaran: Rp 10.600.000

8. 🛠️ Tech Stack

Frontend

• React 19 - Library UI.
• React Router - Navigasi.
• Tailwind CSS - CSS utility-first.
• shadcn/ui - Library komponen.
• Lucide React - Ikon.
• Sonner - Notifikasi toast.
• Vite - Alat build.

Backend

• Node.js - Runtime.
• Express.js - Framework web.
• PostgreSQL - Database.
• pg - Klien PostgreSQL.
• dotenv - Variabel lingkungan.
• cors - Middleware CORS.

Alat Pengembangan

• ESLint - Linting kode.
• Postman - Pengujian API.
• Git - Kontrol versi.

9. 📊 Skema Database

customers
├── id (PK)
└── name

deposito_types
├── id (PK)
├── name
└── yearly_return

accounts
├── id (PK)
├── packet
├── customer_id (FK → customers)
├── deposito_type_id (FK → deposito_types)
├── balance
└── opened_at

transactions
├── id (PK)
├── account_id (FK → accounts)
├── type (DEPOSIT/WITHDRAW)
├── amount
└── created_at

10. 🎨 Komponen UI

Aplikasi menggunakan komponen shadcn/ui untuk antarmuka yang konsisten dan modern:

• Button - Tindakan utama dengan varian.
• Card - Wadah konten.
• Dialog - Formulir modal.
• Input - Input formulir dengan validasi.
• Table - Tampilan data.
• Badge - Indikator status.
• Toast - Notifikasi.
• Select - Dropdown.

11. 🔒 Fitur Keamanan

• Pencegahan injeksi SQL melalui query berparameter.
• Penguncian tingkat baris untuk keamanan transaksi.
• Middleware validasi input.
• Penanganan kesalahan dengan respons yang disanitasi.
• Konfigurasi CORS.

12. 🚦 Pengujian

Pengujian Manual

1. Impor koleksi Postman dari docs/Bank_Saving_System_API.postman_collection.json.
2. Atur variabel lingkungan base_url ke http://localhost:5000.
3. Jalankan permintaan secara berurutan:
   • Buat pelanggan.
   • Buat tipe deposito.
   • Buat akun.
   • Proses transaksi.

Skenario Pengujian

• Buat pelanggan → Buka akun → Setor → Tarik.
• Beberapa setoran ke akun yang sama.
• Verifikasi perhitungan bunga penarikan.
• Hapus cascade (pelanggan dengan akun).

13. 📈 Peningkatan Masa Depan

• Autentikasi & otorisasi pengguna.
• Tampilan riwayat transaksi.
• Ekspor laporan (PDF/Excel).
• Notifikasi email.
• Pelacakan riwayat suku bunga.
• Aplikasi seluler (React Native).
• Tes otomatis (Jest, Cypress).
• Kontainerisasi Docker.
• Pipeline CI/CD.

14. 🤝 Kontribusi

Kontribusi sangat diterima! Silakan ikuti langkah-langkah ini:

1. Fork repositori.
2. Buat branch fitur (git checkout -b feature/FiturLuarBiasa).
3. Commit perubahan Anda (git commit -m 'Menambah FiturLuarBiasa').
4. Push ke branch tersebut (git push origin feature/FiturLuarBiasa).
5. Buka Pull Request.

15. 📝 Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT - lihat file LICENSE untuk detailnya.

16. 👨‍💻 Penulis

Daffa Fathan

• GitHub: @daffa09
• LinkedIn: Daffa Fathan

17. 🌟 Ucapan Terima Kasih

• shadcn/ui - Library komponen yang luar biasa.
• Tailwind CSS - Framework CSS utility-first.
• Lucide Icons - Set ikon yang cantik.
• Radix UI - Komponen aksesibel tanpa gaya.