Galaxy Glasses adalah website katalog dan booking untuk toko optik Galaxy Glasses di Depok Town Square. Pelanggan bisa melihat koleksi frame, menyaring berdasarkan material, lalu bertanya produk atau memesan jadwal periksa mata langsung lewat WhatsApp. Dibuat mobile-first dan dibangun bersama tim 3 orang sebagai proyek pengabdian masyarakat Politeknik IDN Bogor.
Klik untuk ukuran penuh
Tentang Portofolio Ini
Dokumentasi & Alur Fitur
Bagian 1
Galaxy Glasses adalah optik di Square Margonda, Depok, yang selama ini melayani pelanggan lewat kunjungan langsung dan chat WhatsApp satu per satu. Pelanggan tidak bisa melihat pilihan frame dari rumah, dan pemesanan jadwal periksa mata harus menunggu balasan. Proyek ini dibuat sebagai tugas mata kuliah sistem informasi untuk masyarakat, dengan mitra pemilik optik, lalu diserahkan ke mitra untuk dipakai.
Tujuan
Memberi toko etalase online sederhana yang bisa dibuka dari HP, tanpa sistem rumit yang sulit dirawat pemilik toko.
Fitur utama
- Beranda dengan profil toko, foto utama, dan tombol aksi cepat
- Bagian “Pilihan Kami”, deretan produk yang bisa digeser
- Katalog frame dengan filter material (Plastik, TR90, Metal, Kombinasi) dan label tipe seperti Sporty
- Form booking jadwal (nama, layanan, tanggal, jam 10.30-20.30) yang membuka WhatsApp toko dengan pesan sudah terisi otomatis
- Tombol “Tanya via WhatsApp” di setiap produk
- Tombol WhatsApp melayang di semua halaman
- Informasi layanan, alamat, jam buka, dan tautan Instagram toko
- Tampilan responsif, dirancang untuk HP lebih dulu
Teknologi
HTML, CSS, JavaScript (tanpa framework), data produk dalam products.json, font Plus Jakarta Sans, Git dan GitHub untuk versi kode, dan Netlify untuk hosting. Aset dan kode dikerjakan dengan bantuan alat AI (Antigravity), lalu ditinjau dan disesuaikan manual.
Keputusan desain dan teknis
- Seluruh produk disimpan di satu file JSON, jadi nama, harga, dan foto bisa diganti tanpa mengubah kode halaman.
- Booking dan pertanyaan produk diarahkan ke WhatsApp karena itu kanal yang sudah dipakai toko, sehingga tidak perlu backend atau pembayaran online.
- Palet warna dibatasi pada biru dari logo toko supaya tampilan bersih dan konsisten dengan identitas merek.
- Tampilan tetap ringan: tidak ada library tambahan, dan foto produk dikompres ke ukuran kecil.
Tantangan
Mengikuti beberapa revisi dari pemilik toko (teks layanan, susunan footer, warna logo), merapikan nama file foto agar cocok dengan data produk, dan menyesuaikan foto dengan ukuran yang berbeda-beda agar kartu produk tetap seragam.
