Enigma Laundry adalah aplikasi web sederhana untuk mengelola produk, pelanggan, dan transaksi di sebuah toko laundry. Aplikasi ini dibangun menggunakan teknologi modern seperti React, Vite, Tailwind CSS, NextUI, Axios, React Router, dan banyak lagi.
-
Manajemen Produk
- Menambah produk baru
- Melihat daftar produk
- Mengedit detail produk
- Menghapus produk
-
Manajemen Pelanggan
- Menambah pelanggan baru
- Melihat daftar pelanggan
- Mengedit detail pelanggan
- Menghapus pelanggan
-
Manajemen Transaksi
- Membuat transaksi baru
- Melihat daftar transaksi
- Melihat detail tiap transaksi
-
Autentikasi Pengguna
- Login dan Logout
- React: Library JavaScript untuk membangun antarmuka pengguna.
- Vite: Alat build yang cepat untuk pengembangan front-end modern.
- Tailwind CSS: Framework CSS utilitas untuk styling yang cepat dan mudah.
- NextUI: Komponen UI untuk React yang modern dan sepenuhnya dikendalikan.
- Axios: Klien HTTP untuk melakukan permintaan ke API.
- React Router: Routing untuk aplikasi React.
- React Hook Form & Zod: Pengelolaan form dan validasi.
- React Icons: Pustaka ikon untuk React.
- react-toastify: Untuk menampilkan notifikasi.
-
Clone repository ini:
git clone https://github.com/alifsuryadi/challenge-react-laundry.git cd challenge-react-laundry
-
Instal dependensi:
npm install
-
Jalankan aplikasi:
npm run dev
-
Buka di browser:
Buka http://localhost:5174
untuk melihat aplikasi berjalan.
File/Folder Name | Description |
---|---|
src/assets/ |
Aset seperti gambar, ikon, dll. |
src/components/ |
Komponen UI dan logika terkait. |
src/components/ProductContext.jsx |
Konteks produk. |
src/components/products/ |
Komponen terkait produk. |
src/components/customers/ |
Komponen terkait pelanggan. |
src/components/transactions/ |
Komponen terkait transaksi. |
src/lib/ |
Utility dan helper. |
src/lib/axios.js |
Konfigurasi axios. |
src/pages/ |
Halaman utama aplikasi. |
src/pages/HomePage.jsx |
Komponen untuk halaman beranda. |
src/pages/LoginPage.jsx |
Komponen untuk halaman login. |
src/pages/dashboard/ |
Halaman terkait dashboard. |
src/App.jsx |
Komponen utama aplikasi. |
src/index.css |
Gaya global. |
src/main.jsx |
Entry point aplikasi. |
Pastikan Anda memiliki server API yang berjalan dan endpoint disesuaikan dengan kebutuhan aplikasi. Endpoint default dalam proyek ini adalah http://localhost:8888/api/v1
. dan anda bisa baca README ini untuk melihat API yang saya gunakan.
Login
: Masuk dengan menggunakan kredensial yang valid.Dashboard
: Setelah login, Anda akan diarahkan ke dashboard di mana Anda dapat mengelola produk, pelanggan, dan transaksi.Tambah/Edit/Hapus
: Anda dapat menambahkan, mengedit, dan menghapus produk, pelanggan, dan transaksi melalui antarmuka yang disediakan.
Kontribusi selalu diterima! Silakan fork repository ini dan buat pull request untuk menambahkan fitur atau memperbaiki bug.