React Backoffice Starter Template

React Backoffice Starter Template! Template ini dirancang untuk mempercepat pengembangan aplikasi backoffice atau dashboard admin Anda. Dibangun dengan kombinasi teknologi modern dan terkini, template ini menyediakan dasar yang kokoh dan komponen UI yang siap pakai untuk mengelola data dan pengguna.

✨ Fitur Utama

• React 19: Menggunakan versi terbaru dari pustaka React (^19.1.0) untuk performa dan fitur terkini.
• TypeScript: Menambahkan keamanan tipe ke JavaScript untuk kode yang lebih kuat dan mudah dirawat.
• Vite 6: Toolchain pengembangan frontend generasi berikutnya yang sangat cepat (^6.3.5).
• Tailwind CSS 4: Kerangka kerja CSS utility-first versi terbaru (^4.1.7) untuk membangun desain kustom dengan cepat, didukung oleh @tailwindcss/vite.
• Bun: Digunakan sebagai runtime dan package manager yang ultra-cepat untuk pengalaman pengembangan yang optimal.
• Routing dengan React Router DOM 7: Navigasi yang mudah antar halaman dengan versi terbaru (^7.6.1).
• Pustaka Utility Styling: Integrasi clsx dan tailwind-merge untuk penulisan kelas CSS yang lebih bersih dan efisien.
• Ikon dengan Lucide React: Penggunaan lucide-react (^0.511.0) untuk ikon yang modern dan mudah dikustomisasi.
• Komponen UI Komprehensif: Berbagai komponen UI umum yang telah dirancang dengan baik, termasuk Tombol, Input Formulir, Kotak Centang, Dropdown, Modal, Radio Group, Select, Switch, Tabel, Textarea, Card, Badge, Toast dan lainnya.
• Manajemen State dengan React Context: Contoh penggunaan ToastContext untuk notifikasi global.
• Custom Hooks: Implementasi custom hooks seperti useSidebarMenu dan useToast untuk logika yang dapat digunakan kembali.
• Halaman Umum yang Dirancang:
  • Dashboard: Tinjauan umum metrik bisnis utama dan aktivitas terbaru.
  • Manajemen Pengguna (Data Tables): Tampilan tabel interaktif untuk mengelola pengguna dengan detail dan tindakan.
  • Formulir Inkuiri Proyek (Form Builder): Contoh formulir kompleks dengan berbagai jenis input untuk pengumpulan data.
  • Halaman Kosong: Titik awal yang bersih untuk membangun halaman baru.
  • Autentikasi: Halaman dasar untuk pendaftaran dan login pengguna dengan opsi sosial login.
• Tata Letak Responsif: Dirancang untuk terlihat baik di berbagai ukuran layar.

🚀 Memulai

Ikuti langkah-langkah ini untuk menjalankan proyek secara lokal:

Prasyarat

Pastikan Anda telah menginstal yang berikut:

• Bun: Instalasi Bun adalah prasyarat utama untuk proyek ini. Bun akan berfungsi sebagai runtime JavaScript dan package manager Anda.

Instalasi

1. Kloning repositori:

   git clone [URL_REPOSITORI_ANDA]
   cd react-backoffice-starter-template

2. Instal dependensi dengan Bun:

   bun install

   Catatan: Bun akan secara otomatis membaca package.json dan membuat file bun.lockb.

Menjalankan Pengembangan

Untuk menjalankan server pengembangan:

bun dev

Ini akan memulai server pengembangan Vite di http://localhost:5173 (atau port lain yang tersedia). Proyek akan otomatis memuat ulang saat Anda membuat perubahan.

Membangun untuk Produksi

Untuk membangun aplikasi untuk produksi:

bun build

Ini akan mengkompilasi kode Anda ke direktori dist/ untuk deployment.

Pratinjau Hasil Build

Untuk mempratinjau hasil build produksi secara lokal:

bun preview

Ini akan melayani file dari direktori dist/.

📦 Dependensi Utama

Berikut adalah versi utama dari beberapa dependensi kunci yang digunakan dalam proyek ini:

• React: ^19.1.0
• React DOM: ^19.1.0
• Vite: ^6.3.5
• TypeScript: ~5.8.3
• Tailwind CSS: ^4.1.7
• React Router DOM: ^7.6.1
• Lucide React: ^0.511.0

🛠 Kustomisasi

Tema dan Styling

Template ini menggunakan Tailwind CSS untuk styling. Anda dapat mengkustomisasi tema, warna, font, dan lainnya dengan memodifikasi file tailwind.config.js. Untuk detail lebih lanjut tentang kustomisasi Tailwind, kunjungi dokumentasi Tailwind CSS.

Menambahkan Halaman Baru

1. Buat file komponen React baru di src/pages/.
2. Tambahkan rute baru di src/app.tsx untuk mengaitkan path URL dengan komponen baru Anda.
3. Perbarui navigasi sidebar (biasanya di src/components/layout/Sidebar.tsx) untuk menyertakan tautan ke halaman baru.

Menambahkan Komponen Baru

Buat komponen React yang dapat digunakan kembali di src/components/. Pastikan untuk mengimpor dan menggunakannya di halaman atau komponen lain sesuai kebutuhan.

🤝 Kontribusi

Kontribusi dipersilakan! Jika Anda memiliki saran, perbaikan bug, atau fitur baru untuk ditambahkan, silakan buka issue atau kirim pull request.