Point of SalePersonal2024

EzCheckout: Aplikasi Web Point of Sale

EzCheckout adalah studi kasus aplikasi web point-of-sale dengan akses berbasis role untuk admin dan kasir. Aplikasi ini menyatukan manajemen produk, transaksi berbasis keranjang, dan laporan penjualan dalam satu sistem.

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.

Peran

Rincian per Skill

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

Web Development

Merancang skema database untuk produk, transaksi, dan role.
Mengimplementasikan autentikasi berbasis JWT dan kontrol akses berbasis role yang bisa dikonfigurasi.
Membangun REST API dengan Express dan MySQL.
Mengelola state aplikasi dengan Redux untuk data keranjang dan transaksi.
Mengembangkan antarmuka kasir dengan React dan Chakra UI.
Membangun halaman inti: home, manajemen produk, riwayat transaksi, dan laporan penjualan.

UI/UX Design

Merancang sistem UI/UX dari nol, termasuk ukuran font dan hierarki visual.
Merancang antarmuka checkout yang cepat dan bebas gangguan untuk kasir.
Mengutamakan kecepatan daripada dekorasi pada UI pencarian produk dan keranjang.
Merancang state visual yang jelas untuk layar login multi-role.
Merancang layout yang sederhana dan mudah dibaca sekilas untuk riwayat transaksi dan laporan.

Graphic Design

Merancang logo dan identitas brand dari nol.
Memilih palet warna dan sistem tipografi.
Membuat ikon UI dasar untuk aksi keranjang dan transaksi.
Membuat favicon situs.
Mengompres setiap gambar ke WebP dan mayoritas di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

Menulis copy UI yang jelas dan ringkas untuk tombol, label, dan pesan status di seluruh aplikasi.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, masalah yang diselesaikan selama pengembangan, dan hasilnya.

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 kasir, dengan permission yang bisa dikonfigurasi.
Dashboard admin untuk menambah, menghapus, dan mengelola akun kasir, role, serta permission tugas.
Pencarian produk dan filter kategori.
Fitur tambah ke keranjang dengan perhitungan transaksi otomatis.
Panel admin untuk menambahkan produk baru ke katalog.
Riwayat transaksi dan laporan penjualan.

Tantangan yang Dihadapi

Mengonfigurasi Akses Berbasis Role

Admin perlu bisa menentukan apa saja yang boleh dan tidak boleh diakses kasir, jadi dibangun sistem role dan permission yang bisa dikonfigurasi, bukan dua role tetap yang di-hardcode.

Mengelola State Keranjang di Seluruh Aplikasi

Data keranjang dan transaksi harus tetap sinkron di banyak komponen, jadi Redux dipakai agar pengelolaan state lebih mudah diprediksi.

Menjaga Alur Checkout Tetap Cepat

Transaksi kasir harus tetap responsif walau daftar produknya besar, jadi diterapkan pencarian produk instan dan optimasi query backend.

Pelajaran yang Didapat

Belajar bahwa desain query backend sangat berpengaruh terhadap kecepatan yang dirasakan pengguna pada alur transaksi berfrekuensi tinggi.
Berlatih merancang kontrol akses berbasis role dari nol, bukan mengandalkan bawaan framework.
Belajar bahwa memusatkan state keranjang dan transaksi di Redux membuat sinkronisasi UI di seluruh halaman jadi lebih sederhana.

Dampak

Masalah yang Terselesaikan Setelah Rilis

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

Gambar di bawah 200KB

Sistem RBAC custom

Proyek full-stack end-to-end

Performa

Halaman Lambat Akibat Gambar yang Tidak Dioptimasi

Sebelum

Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.

Sesudah

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

Peningkatan

Contoh Nyata Kontrol Akses Berbasis Role

Sebelum

Belum ada proyek pribadi yang menunjukkan sistem permission yang bisa dikonfigurasi, lebih dari sekadar layar login dasar.

Sesudah

Role yang bisa dikonfigurasi admin dan autentikasi berbasis JWT menjadi bukti nyata kemampuan merancang kontrol akses.

Peningkatan

Simulasi Alur Transaksi Retail End-to-End

Sebelum

Belum ada studi kasus pribadi yang mencakup alur POS lengkap, dari input produk sampai laporan transaksi.

Sesudah

EzCheckout menjadi portofolio yang menunjukkan kemampuan membangun sistem transaksi full-stack dari nol.