# Aplikasi E-Commerce "Ujian Frontend"

Aplikasi e-commerce modern yang dikembangkan dengan React dan Vite, menyediakan platform lengkap untuk belanja online dengan fitur manajemen admin.

## 📋 Deskripsi Aplikasi

Platform e-commerce ini dirancang untuk memberikan pengalaman belanja online yang intuitif bagi pengguna akhir, serta panel administrasi yang powerful untuk mengelola produk, kategori, dan pengguna. Aplikasi ini menggunakan arsitektur frontend modern dengan integrasi API backend untuk data dinamis.

## 🚀 Fitur Utama

### **Halaman Publik (Untuk Pengguna Akhir)**

#### 1. **Landing Page** (`/`)

- **Tujuan**: Halaman utama aplikasi yang menampilkan katalog produk secara menarik
- **Fungsionalitas**:
  - Menampilkan daftar produk dalam bentuk card dengan gambar, nama, harga, dan deskripsi
  - Fitur pencarian produk berdasarkan nama
  - Filter produk berdasarkan kategori
  - Tombol "Add to Cart" untuk setiap produk
- **Alur Pengguna**:
  - Jika pengguna belum login dan mencoba menambah produk ke cart → otomatis redirect ke halaman login
  - Setelah login berhasil → kembali ke landing page dan dapat menambah produk ke cart

#### 2. **Halaman Kategori** (`/categories`)

- **Tujuan**: Menampilkan produk berdasarkan kategori tertentu
- **Fungsionalitas**: Filter otomatis produk berdasarkan kategori yang dipilih dari landing page
- **Alur Pengguna**: Sama dengan landing page, redirect ke login jika belum terautentikasi

#### 3. **Halaman Login** (`/login`)

- **Tujuan**: Autentikasi pengguna untuk mengakses fitur belanja
- **Fungsionalitas**:
  - Form login dengan email dan password
  - Validasi input dan error handling
  - Redirect otomatis ke halaman sebelumnya setelah login berhasil
- **Alur Pengguna**:
  - Jika belum punya akun → link ke halaman register
  - Setelah login → token JWT disimpan di localStorage

#### 4. **Halaman Register** (`/register`)

- **Tujuan**: Pendaftaran akun baru untuk pengguna
- **Fungsionalitas**:
  - Form registrasi dengan validasi nama, email, password
  - Konfirmasi password
  - Redirect ke login setelah registrasi berhasil
- **Alur Pengguna**: Setelah register → otomatis ke halaman login

#### 5. **Halaman Checkout** (`/checkout`)

- **Tujuan**: Proses final pembelian produk
- **Fungsionalitas**:
  - Menampilkan daftar produk di cart dengan quantity dan total harga
  - Form alamat pengiriman dengan dropdown provinsi, kota/kabupaten, kecamatan (menggunakan API wilayah Indonesia)
  - Tombol checkout untuk menyelesaikan transaksi
  - Modal konfirmasi setelah checkout berhasil
- **Alur Pengguna**:
  - Hanya dapat diakses jika sudah login
  - Jika cart kosong → redirect ke landing page
  - Setelah checkout berhasil → cart dikosongkan dan redirect ke purchase history

#### 6. **Riwayat Pembelian** (`/purchase-history`)

- **Tujuan**: Melihat history transaksi pengguna
- **Fungsionalitas**: Tabel daftar pembelian dengan detail produk dan tanggal
- **Alur Pengguna**: Hanya dapat diakses setelah login

### **Panel Administrator (Dashboard)**

#### 7. **Dashboard Utama** (`/dashboard`)

- **Tujuan**: Overview statistik dan navigasi ke fitur admin
- **Fungsionalitas**:
  - Chart visualisasi data produk, kategori, dan pengguna menggunakan Recharts
  - Cards statistik (total produk, kategori, pengguna)
  - Navigasi ke halaman manajemen lainnya
- **Alur Pengguna**: Hanya dapat diakses oleh admin yang sudah login

#### 8. **Manajemen Produk** (`/dashboard/products`)

- **Tujuan**: CRUD operasi untuk produk
- **Fungsionalitas**:
  - Tabel daftar produk dengan pagination
  - Tambah produk baru dengan form upload gambar
  - Edit produk existing
  - Hapus produk
- **Alur Pengguna**: Admin dapat mengelola inventori produk

#### 9. **Manajemen Kategori** (`/dashboard/categories`)

- **Tujuan**: CRUD operasi untuk kategori produk
- **Fungsionalitas**:
  - Tabel daftar kategori
  - Tambah, edit, hapus kategori
- **Alur Pengguna**: Admin mengatur struktur kategori produk

#### 10. **Manajemen Pengguna** (`/dashboard/users`)

- **Tujuan**: Mengelola akun pengguna
- **Fungsionalitas**:
  - Tabel daftar pengguna
  - Tambah pengguna baru
  - Edit data pengguna
  - Hapus pengguna
- **Alur Pengguna**: Admin dapat mengelola user accounts

## 🔄 Alur Pengguna Umum

1. **Pengguna Baru**:
   - Kunjungi landing page → melihat produk
   - Klik "Add to Cart" → redirect ke login
   - Belum punya akun → ke register → isi form → login → kembali ke cart

2. **Pengguna Existing**:
   - Login → browse produk → add to cart → checkout → isi alamat → selesai → lihat history

3. **Admin**:
   - Login → akses dashboard → kelola produk/kategori/users

## 🛠️ Teknologi yang Digunakan

- **Frontend Framework**: React 19
- **Build Tool**: Vite
- **Routing**: React Router DOM
- **UI Library**: Bootstrap & Reactstrap
- **HTTP Client**: Axios
- **Charts**: Recharts
- **Icons**: React Icons
- **Loading States**: React Loading Skeleton
- **Authentication**: JWT (JSON Web Token)
- **State Management**: React Context API
- **Styling**: CSS Modules + Bootstrap

## 📦 Instalasi dan Menjalankan

### Prerequisites

- Node.js (versi 16+)
- npm atau yarn

### Langkah Instalasi

1. **Install dependencies**

   ```bash
   npm install
   ```

2. **Setup environment variables**
   - Buat file `.env` di root directory
   - Tambahkan:
     ```
     VITE_API_URL=http://localhost:3000/api
     ```

3. **Jalankan development server**

   ```bash
   npm run dev
   ```

4. **Build untuk production**

   ```bash
   npm run build
   ```

5. **Preview production build**
   ```bash
   npm run preview
   ```

## 📁 Struktur Proyek

```
src/
├── components/
│   ├── Pages/
│   │   ├── LandingPage/
│   │   ├── Login/
│   │   ├── Register/
│   │   ├── Checkout/
│   │   ├── Dashboard/
│   │   ├── Produk/
│   │   ├── Kategori/
│   │   ├── Users/
│   │   └── ...
│   └── SideBar/
├── context/
│   └── SearchContext.jsx
├── utils/
│   └── axiosInstance.jsx
├── App.jsx
├── main.jsx
└── ...
```

## 🔒 Keamanan dan Validasi

- **Authentication**: JWT token untuk sesi pengguna
- **Route Protection**: Redirect otomatis untuk halaman yang memerlukan login
- **Input Validation**: Validasi form di frontend dan backend
- **Error Handling**: Penanganan error untuk API calls

## 🎨 UI/UX Features

- **Responsive Design**: Kompatibel desktop dan mobile
- **Loading States**: Skeleton loading untuk pengalaman yang lebih baik
- **Toast Notifications**: Feedback untuk aksi pengguna
- **Modal Dialogs**: Konfirmasi aksi penting

## 🚀 Deployment

Aplikasi ini dapat di-deploy ke platform seperti Vercel, Netlify, atau server hosting lainnya. Pastikan environment variables API URL disesuaikan dengan production backend.

## 📝 Catatan Pengembang

- Menggunakan arsitektur component-based dengan React
- Integrasi dengan backend API untuk data dinamis
- Fokus pada user experience dan admin functionality

---

**Dikembangkan dengan ❤️ menggunakan React & Vite**
