Sidekick - Platform E-Commerce Thrift Shop Modern

Repository
ReactJSTailwind CSSFramer MotionVite

đźš© Latar Belakang

Industri thrift shop (barang bekas berkualitas) sedang naik daun, tetapi banyak toko masih mengandalkan Instagram atau penjualan offline yang menyulitkan pembeli untuk mencari ukuran atau brand spesifik. Sidekick, sebuah brand kurasi barang branded sejak 2011, membutuhkan platform digital yang lebih dari sekadar katalog—mereka butuh identitas.

Tantangan utamanya adalah bagaimana menampilkan ratusan produk unik (satu barang, satu stok) dengan sistem navigasi yang tidak membingungkan, sekaligus mempertahankan estetika “Hype” dan “Streetwear” yang menjadi ciri khas brand mereka.

🛠️ Solusi & Pendekatan Teknis

Saya mengembangkan website ini dengan fokus pada User Experience (UX) pencarian barang dan Visual Identity yang kuat.

1. Desain UI/UX Bernuansa Streetwear

Saya memadukan tema Dark Mode pada bagian Hero untuk memberikan kesan eksklusif dan premium, namun beralih ke layout yang bersih (Clean Light) pada bagian katalog agar produk terlihat jelas. Tipografi yang tebal dan elemen grafis yang tegas digunakan untuk memperkuat branding.

2. Sistem Filter Real-Time

Karena setiap barang thrift itu unik (hanya ada satu ukuran/kondisi), fitur filter adalah nyawa dari website ini. Saya membangun logika filter yang responsif menggunakan React State untuk menyortir berdasarkan:

  • Kategori: Vintage, Flannel, T-Shirt, Sport.
  • Rentang Harga: Slider min/max harga.
  • Ukuran & Kondisi: Memudahkan user mencari item yang pas.

3. Optimasi Performa

Dengan banyaknya gambar produk resolusi tinggi, saya mengimplementasikan teknik Lazy Loading dan format gambar WebP. Hal ini memastikan website tetap ngebut bahkan saat dibuka di jaringan seluler.

🚀 Fitur Utama

  • Dynamic Hero Section: Banner interaktif dengan Copywriting yang kuat (“Real Hype, Real Thrift”).
  • Smart Catalog: Grid produk yang responsif dengan status otomatis (misal: label merah “SOLD OUT” jika barang terjual).
  • Testimonial Slider: Menampilkan ulasan pelanggan dalam format chat bubble yang relate dengan audiens muda.
  • Mobile-First Design: Tampilan katalog yang tetap nyaman dan mudah diakses via smartphone.

🎓 Pelajaran yang Didapat

Proyek ini mengajarkan saya pentingnya menyeimbangkan antara estetika desain yang “ramai” (style streetwear) dengan fungsionalitas e-commerce yang harus tetap simpel. Saya juga memperdalam pemahaman tentang state management yang kompleks untuk menangani filter produk yang berlapis.