Point of SalePersonal2024

EzCheckout: Aplikasi Web Point of Sale

EzCheckout adalah studi kasus aplikasi web point-of-sale yang dibangun di sekitar akses berbasis role untuk admin dan kasir, menyatukan manajemen produk, transaksi berbasis keranjang, dan pelaporan 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 interface kasir dengan React dan Chakra UI.
Membangun halaman inti: home, manajemen produk, riwayat transaksi, dan laporan penjualan.

Web Design

Merancang sistem UI/UX dari nol, termasuk ukuran font dan hierarki visual.
Merancang interface checkout yang cepat dan bebas gangguan untuk kasir.
Memprioritaskan kecepatan di atas dekorasi di UI pencarian produk dan keranjang.
Merancang state visual yang jelas untuk layar login multi-role.
Merancang layout yang sederhana dan mudah dipindai 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 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, 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 kasir, dengan permission yang bisa dikonfigurasi.
Admin dashboard untuk menambah, menghapus, dan mengelola akun kasir, role, dan permission tugas.
Pencarian produk dan filter kategori.
Add-to-cart dengan kalkulasi transaksi otomatis.
Admin panel untuk menambahkan produk baru ke katalog.
Riwayat transaksi dan laporan penjualan.

Tantangan yang Dihadapi

Mengonfigurasi Akses Berbasis Role

Admin butuh kemampuan menentukan apa yang bisa dan tidak bisa diakses kasir, jadi sistem role dan permission yang bisa dikonfigurasi dibangun alih-alih hardcode dua role tetap.

Mengelola State Keranjang di Seluruh Aplikasi

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

Menjaga Alur Checkout Tetap Cepat

Transaksi kasir harus tetap responsif bahkan dengan daftar produk yang besar, jadi pencarian produk instan dan optimasi query backend diterapkan.

Pelajaran yang Didapat

Belajar seberapa besar pengaruh desain query backend terhadap kecepatan yang dirasakan di alur transaksi berfrekuensi tinggi.
Berlatih merancang kontrol akses berbasis role dari nol alih-alih mengandalkan default framework.
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

Proyek full-stack end-to-end

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

Simulasi Alur Transaksi Retail End-to-End

Sebelum

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

Sesudah

EzCheckout jadi referensi portofolio yang mendemonstrasikan kemampuan membangun sistem transaksi full-stack dari nol.