Logo Resmi Fadhil
Fadhil NuruzzamanSoftware Engineer
Logo Resmi Fadhil
E-CommercePersonal2023

Soundsense: Aplikasi Web E-Commerce Musik

Soundsense adalah studi kasus e-commerce alat musik tempat pelanggan bisa browsing dan checkout sendiri, dengan satu lapisan kompleksitas tambahan yaitu mengecek dan mengelola stok di banyak gudang sekaligus.

Tidak PublikKembali ke Proyek

Preview

Jelajahi Situsnya

Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.

Screenshot desktop segera hadir

Desktop

Screenshot mobile segera hadir

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Logo HTML
Logo CSS
Logo JavaScript
Logo ReactJs
Logo Chakra UI
Logo NodeJs
Logo ExpressJs
Logo MySQL
Logo VSCode
Logo HTTPie

Peran

Rincian per Skill

Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.

Web Development

  • Merancang skema database multi-gudang.
  • Mengimplementasikan autentikasi berbasis JWT dan akses berbasis role untuk akun admin dan pelanggan.
  • Membangun REST API untuk produk, stok, dan transaksi.
  • Mengimplementasikan logic alokasi stok lintas-gudang.
  • Mengelola state aplikasi dengan Redux untuk data keranjang dan transaksi.
  • Membangun halaman inti: home, manajemen produk admin, dan riwayat pesanan pelanggan.

Web Design

  • Merancang pengalaman browsing katalog dengan kategori dan pencarian yang jelas.
  • Menjaga alur keranjang belanja tetap sederhana meski ada kompleksitas stok tambahan.
  • Merancang indikator ketersediaan stok yang jelas per gudang.
  • Merancang state visual yang jelas untuk layar login multi-role.
  • Merancang layout yang sederhana dan mudah dipindai untuk riwayat transaksi dan laporan.

Graphic Design

  • Membuat wordmark dasar untuk branding studi kasus proyek ini.
  • Mengandalkan UI berbasis komponen yang bersih dibanding pekerjaan ilustrasi custom.
  • Merancang ikon kategori sederhana untuk katalog alat musik.
  • Membuat favicon situs.
  • Mengompres setiap gambar ke WebP dan di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

  • Menulis copy UI dan deskripsi produk yang jelas dan ringkas di seluruh storefront.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.

Fitur Utama

  • Desain full responsive di perangkat desktop dan mobile.
  • Gambar dioptimasi untuk loading cepat.
  • Autentikasi berbasis JWT.
  • Akses berbasis role untuk akun admin dan pelanggan.
  • Pencarian produk dan filter kategori.
  • Pengecekan stok multi-gudang.
  • Keranjang dan checkout mandiri untuk pelanggan.
  • Manajemen produk admin.
  • Riwayat pesanan dan laporan penjualan.

Tantangan yang Dihadapi

Mengonfigurasi Akses Berbasis Role

Admin butuh mengelola produk dan gudang secara terpisah dari apa yang bisa diakses pelanggan biasa, jadi sistem permission berbasis role dibangun untuk memisahkan keduanya.

Mengelola State Keranjang di Seluruh Aplikasi

Data keranjang dan transaksi harus tetap sinkron di banyak komponen, jadi Redux dipakai untuk mengelola state secara terprediksi.

Alokasi Stok Lintas-Gudang

Satu produk bisa tersedia di banyak gudang dengan jumlah berbeda, jadi logic query dirancang untuk otomatis memilih gudang terdekat atau yang tersedia saat checkout.

Konsistensi Data Saat Transaksi Bersamaan

Stok bisa terpotong dua kali kalau dua transaksi berjalan bersamaan, ditangani dengan transaksi database untuk menjaga jumlah stok tetap konsisten.

Pelajaran yang Didapat

  • Belajar bahwa logic multi-gudang sama besarnya masalah data modeling seperti halnya masalah UI.
  • Berlatih menangani transaksi bersamaan secara aman di level database.
  • Belajar bagaimana memusatkan state keranjang dan transaksi di Redux menyederhanakan sinkronisasi UI di seluruh halaman.

Dampak

Masalah yang Terselesaikan Setelah Rilis

Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.

Gambar di bawah 200KB

Sistem RBAC custom

Dukungan multi-gudang

Performa

Halaman Lambat Akibat Gambar yang Tidak Dioptimasi

Sebelum

Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.

Sesudah

Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.

Peningkatan

Demonstrasi Konkret Kontrol Akses Berbasis Role

Sebelum

Belum ada proyek pribadi yang mendemonstrasikan sistem permission yang bisa dikonfigurasi, bukan cuma layar login dasar.

Sesudah

Role yang bisa dikonfigurasi admin dan autentikasi berbasis JWT jadi demonstrasi konkret kemampuan merancang access-control.

Peningkatan

Studi Kasus E-Commerce Dengan Kompleksitas Multi-Gudang

Sebelum

Belum ada proyek portofolio yang mencakup manajemen stok lintas-lokasi.

Sesudah

Soundsense mendemonstrasikan kemampuan merancang sistem e-commerce dengan business logic yang lebih kompleks dari toko online sederhana.