Random User Profile Card

Sebuah aplikasi web interaktif yang menampilkan kartu profil pengguna secara acak. Aplikasi ini mengambil data dari Random User Generator API dan menampilkannya dalam antarmuka yang bersih dan modern.

Link ke Live Demo 👈

---

✨ Fitur Utama

• 👤 Tampilan Profil Dinamis: Menampilkan foto, nama, email, dan detail lainnya dari pengguna yang digenerate secara acak.
• 🔄 Generate User Baru: Tombol untuk memuat profil pengguna acak yang baru tanpa perlu me-refresh halaman.
• 🔐 Tampilan Detail Tersembunyi: Informasi sensitif dan detail lengkap hanya ditampilkan setelah menekan tombol "Login".
• 🌓 Mode Terang & Gelap: Tombol toggle untuk mengubah tema antara mode terang (light mode) dan gelap (dark mode) dengan transisi yang mulus.
• 🧩 Arsitektur Berbasis Komponen: Kode dipecah menjadi komponen-komponen React yang kecil, bersih, dan dapat digunakan kembali.
• ⏳ Indikator Loading & Error: Memberikan umpan balik visual kepada pengguna saat data sedang dimuat atau jika terjadi kesalahan saat mengambil data.
• 📱 Desain Responsif: Tampilan yang optimal di berbagai ukuran layar, dari perangkat mobile hingga desktop.

---

🛠️ Teknologi yang Digunakan

Proyek ini dibangun menggunakan tumpukan teknologi modern untuk pengembangan frontend:

• Vite: Build tool super cepat untuk pengembangan web modern.
• React: Pustaka JavaScript untuk membangun antarmuka pengguna.
• TypeScript: Menambahkan tipe statis ke JavaScript untuk meningkatkan skalabilitas dan maintainabilitas proyek.
• Tailwind CSS: Kerangka kerja CSS utility-first untuk desain yang cepat dan kustom.
• Lucide React: Pustaka ikon yang simpel, indah, dan ringan.

---

🚀 Instalasi dan Menjalankan Proyek

Ikuti langkah-langkah di bawah ini untuk menjalankan proyek ini di mesin lokal Anda.

Prasyarat

Pastikan Anda sudah menginstal Node.js (disarankan versi LTS) dan npm atau yarn.

Langkah-langkah

1. Clone repositori ini:

   git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)
   cd your-repo-name

2. Instal semua dependensi:

   npm install

   atau jika Anda menggunakan yarn:

   yarn install

3. Jalankan server pengembangan:

   npm run dev

   atau

   yarn dev

4. Buka browser Anda dan kunjungi http://localhost:5173 (atau port lain yang ditampilkan di terminal Anda).

---

📄 Lisensi

Proyek ini dilisensikan di bawah MIT License. Lihat file LICENSE untuk detail lebih lanjut.

created by oxa defrizal khasay