All Projects

February 1, 2023

KantingGo

KantinGo adalah ekosistem pembayaran dan pemesanan kantin berbasis web yang menempatkan dashboard admin sebagai pusat operasi: memproses transaksi, merekonsiliasi kas, dan memonitor kinerja penjualan harian untuk staf kantin.

Dalam proyek ini, sebagai Frontend Web Dev, saya bertanggung jawab penuh merancang dan mengimplementasikan Web Admin Dashboard — mulai dari arsitektur komponen, state management, integrasi API transaksi, hingga visualisasi laporan untuk staf kasir dan manajer.

KantingGo
Next.jsAnt DesignAxioszustandRechartsi18nAccessibility

Role

Front End Web Dev

Duration

4 months

Team

4 developers

Project Gallery

Swipe or hover to explore

Project Overview

KantinGo adalah ekosistem pembayaran dan pemesanan kantin berbasis web yang menempatkan dashboard admin sebagai pusat operasi: memproses transaksi, merekonsiliasi kas, dan memonitor kinerja penjualan harian untuk staf kantin.

Dalam proyek ini, sebagai Frontend Web Dev, saya bertanggung jawab penuh merancang dan mengimplementasikan Web Admin Dashboard — mulai dari arsitektur komponen, state management, integrasi API transaksi, hingga visualisasi laporan untuk staf kasir dan manajer.

Problem

Staf kantin kesulitan memproses transaksi secara cepat dan akurat: catatan manual menyebabkan ketidaksesuaian kas, tidak ada ringkasan penjualan harian yang mudah diakses, dan proses refund/void yang rawan kesalahan.

Goal

Menyediakan dashboard operasional yang memungkinkan staf mengelola transaksi real-time, melakukan rekonsiliasi cepat, dan memantau KPI penjualan tanpa kebutuhan dukungan teknis backend.

Solution

Membangun Web Admin Dashboard single-page yang modular: tabel transaksi tervirtualisasi, formulir CRUD menu dan outlet, endpoint reconciliation (CSV import/export), dan panel analitik berbasis chart yang mengambil data tersaring dari API. Fokus pada UX kasir: kecepatan, kejelasan status transaksi, dan undo/confirm untuk actions sensitif.

Technical Highlights

  • Next.js — routing & build pipelines
  • Ant Design — komponenisasi form dan tabel enterprise
  • Axios + error handling terpusat untuk integrasi API
  • zustand untuk state management lokal (session-scoped)
  • Recharts untuk visualisasi metrik penjualan
  • Virtualized table untuk dataset transaksi besar