🛍️ Fanthom Store - Aplikasi Web Responsif

Fanthom Store adalah aplikasi e-commerce responsif berbasis Next.js yang secara otomatis menyesuaikan antarmuka untuk perangkat desktop dan mobile.
Proyek ini mengimplementasikan SSR (Server-Side Rendering) dengan deteksi perangkat sehingga tata letak, data, dan aset dapat dioptimalkan sesuai perangkat yang digunakan.

✨ Fitur Utama

Deteksi perangkat otomatis menggunakan User-Agent.
SSR untuk SEO yang lebih baik & pengiriman HTML sesuai perangkat.
UI berbeda untuk desktop dan mobile.
Katalog produk dengan gambar, harga, dan judul.
Optimasi performa untuk mobile (data & gambar lebih ringan).
Desain modern dan bersih dengan Tailwind CSS.

🖥️ Tampilan Versi Desktop

Tata letak full-width yang memanfaatkan seluruh lebar layar.
Grid multi kolom untuk menampilkan banyak produk.
Gambar besar & jelas.
Efek hover pada kartu produk.
Informasi produk lebih lengkap.
Optimasi untuk penggunaan mouse.

📱 Tampilan Versi Mobile

Tata letak ringkas untuk layar kecil.
Kolom tunggal untuk fokus pada konten.
Kartu produk sederhana namun informatif.
Gambar lebih kecil untuk pemuatan yang lebih cepat.
Navigasi bawah (bottom navigation) yang ramah sentuhan.

🚀 Instalasi & Menjalankan Proyek

Clone repository

git clone <repository-url>

Install Dependensi

npm install
# atau
yarn install

Jalankan server pengembangan

npm run dev
# atau
yarn dev

Buka http://localhost:3000 di browser Anda

Struktur Proyek

fanthom-store/
├── src/
│   ├── app/         # Direktori app Next.js
│   ├── components/  # Komponen yang dapat digunakan kembali
│   ├── styles/      # Gaya global
│   └── types/       # Tipe TypeScript
├── public/          # Aset statis
└── ...file konfigurasi

Pengujian

Pengujian Desktop

Buka aplikasi di browser desktop.
Aplikasi akan otomatis menyesuaikan ke tampilan desktop.

Pengujian Mobile

Menggunakan perangkat mobile asli:

Buka URL aplikasi yang sudah dideploy di perangkat mobile.
Atau gunakan IP lokal: http://ip-anda:3000

Menggunakan Chrome DevTools:

Tekan F12 untuk membuka DevTools.
Klik ikon Toggle Device Toolbar (atau tekan Ctrl+Shift+M).
Pilih preset perangkat mobile dari dropdown.

Gaya Responsif Fanthom Store

Bagikan proyek ini:

Tentang Proyek