🛍️ Fanthom Store - Responsive Web App

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 layout, data, dan asset bisa dioptimalkan sesuai device.

✨ Fitur Utama

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

🖥️ Tampilan Versi Desktop

Layout 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

Layout ringkas untuk layar kecil
Single column untuk fokus konten
Kartu produk sederhana namun informatif
Gambar lebih kecil untuk loading lebih cepat
Navigasi bawah (bottom navigation) yang ramah sentuhan

🚀 Instalasi & Menjalankan Proyek

Clone repository

git clone <repository-url>

Install Depedency

npm install
# or
yarn install

Run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser

Project Structure

fanthom-store/
├── src/
│   ├── app/         # Next.js app directory
│   ├── components/  # Reusable components
│   ├── styles/      # Global styles
│   └── types/       # TypeScript types
├── public/          # Static assets
└── ...config files

Testing

Pengujian Desktop

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

Pengujian Mobile

Menggunakan perangkat mobile asli: 1.Buka URL aplikasi yang sudah dideploy di perangkat mobile 2. Atau gunakan IP lokal: http://your-ip: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

Fanthom Store Responsive Style

Share this project:

Project Overview