Web & Mobile Development

Kumpulan pengalaman nyata di bidang Web & Mobile Development — dari aplikasi web eTax, proyek World Bank, platform internal CodeIgniter & React, sistem optimasi rute FMCG, hingga aplikasi mobile Flutter yang sudah dirilis ke Play Store.

Sebagian besar gambar adalah rekreasi ilustratif; sebagian proyek personal menampilkan screenshot asli.

Use Cases

Web eTax, World Bank & Internal Apps

Multi-Industry

Membangun berbagai aplikasi web multi-konteks: sistem eTax untuk pelaporan pajak badan swasta, modul pelaporan berbasis web untuk proyek World Bank, serta beberapa internal app menggunakan CodeIgniter 4 dan React untuk kebutuhan operasional perusahaan.

Platform Portofolio Full-Stack Modern

Personal Project

Membangun platform portofolio digital ini dari nol menggunakan Next.js 16, TypeScript, dan Tailwind CSS — dengan dukungan multi-bahasa (ID/EN), animasi berbasis motion, konten dinamis dari JSON, dan deployment production-grade di Vercel.

Sales Route Optimization System

FMCG

Membangun sistem optimasi rute kunjungan sales berbasis web untuk industri FMCG — mengintegrasikan algoritma clustering & routing dengan Google Maps API untuk menghasilkan rute realistis dalam constraint waktu kerja 8 jam per hari.

BabyTrack – Platform Kesehatan Anak Full-Stack

Healthcare

Membangun platform tracking kesehatan anak end-to-end menggunakan Next.js App Router, TypeScript, dan Supabase — dari desain skema database dengan Row-Level Security hingga 10+ modul frontend terintegrasi, sistem admin berbasis role, dan deployment production di Vercel.

Ledgerin – Aplikasi Keuangan Pribadi (Flutter + Firebase)

Personal Project

Aplikasi mobile manajemen keuangan pribadi end-to-end — dibangun dengan Flutter & Firebase, backend Go + Swagger, dan integrasi Google Drive untuk backup. Dirilis ke Play Store & Firebase App Distribution.

Home Tracker – Manajemen Rumah Tangga Digital

Personal Project

Aplikasi mobile untuk tracking kebutuhan dan tugas rumah tangga — dibangun dengan Flutter & Firebase dengan backend Go yang terdokumentasi Swagger. Dirilis ke Play Store.

Web eTax, World Bank & Internal Apps

Berpengalaman membangun web application di berbagai konteks proyek nyata: sistem eTax berbasis web untuk kebutuhan pelaporan pajak perusahaan swasta, implementasi modul web dalam proyek yang didanai World Bank, serta beberapa internal application menggunakan CodeIgniter 4 dan React yang digunakan untuk operasional perusahaan sehari-hari.

📊 Impact

Sistem eTax memungkinkan perusahaan swasta melakukan pelaporan pajak secara mandiri dan terstruktur melalui web
Modul World Bank terdeliver tepat waktu sesuai milestone proyek dengan standar dokumentasi internasional
Internal apps berbasis CI4 menggantikan workflow manual dan spreadsheet yang sering error
Komponen React yang dibangun dapat direuse di beberapa modul sehingga mempercepat development
Kualitas kode terjaga melalui code review, standar PSR, dan test coverage manual

🧩 Tech Stack

CodeIgniter 4, React, PHP, MySQL, REST API, HTML/CSS/JavaScript, Bootstrap, jQuery, MVC Architecture

⚡ Problem Statement

Perusahaan swasta membutuhkan sistem web untuk mencatat dan melaporkan kewajiban pajak secara terstruktur
Proyek World Bank membutuhkan modul web yang terintegrasi dalam ekosistem sistem yang sudah berjalan
Tim operasional masih menggunakan spreadsheet untuk proses yang seharusnya bisa diotomasi via web app
Beberapa internal tools dibangun dengan teknologi berbeda-beda sehingga sulit dimaintain
Kebutuhan form yang kompleks dengan validasi multi-level dan approval workflow antar departemen

🧠 Solution Overview

Membangun aplikasi eTax dengan form wizard multi-step, validasi pajak otomatis, dan laporan periodik
Mengintegrasikan modul web baru ke sistem World Bank yang ada dengan API contract yang disepakati
Migrasi workflow operasional ke CodeIgniter 4: CRUD modules, workflow approval, notifikasi email
Standarisasi komponen frontend dengan React: reusable form components, tabel dinamis, dan modal
Implementasi role-based access: admin, approver, user input dengan session management yang aman

🏗️ Architecture

Backend: CodeIgniter 4 dengan arsitektur MVC, RESTful API layer, dan middleware untuk autentikasi
Frontend: Hybrid approach — server-rendered PHP/CI4 views dengan React components untuk bagian interaktif
Database: MySQL dengan relational schema untuk tax records, approval workflow, dan audit trail
Auth & RBAC: session-based authentication dengan CI4 Shield library + kustom role permission layer
Deployment: shared hosting / VPS dengan Nginx + PHP-FPM, konfigurasi .env per environment

🔥 Challenges & Solutions

Integrasi modul baru ke sistem World Bank yang legacy — memerlukan pemahaman mendalam terhadap arsitektur yang sudah ada
Validasi perpajakan multi-level (PKWTT, PKWT, PPh 21) dengan logic yang kompleks dan berubah sesuai regulasi
Memastikan konsistensi UI antara komponen React dan template CI4 dalam satu aplikasi hybrid

Platform Portofolio Full-Stack Modern

Platform portofolio digital ini dibangun dari nol menggunakan stack modern: Next.js 16, TypeScript, dan Tailwind CSS. Dirancang sebagai aplikasi full-stack yang sepenuhnya data-driven, mendukung multi-bahasa (ID/EN), dan siap di-deploy ke production di Vercel dengan performa tinggi.

📊 Impact

Time-to-first-byte (TTFB) rendah berkat Next.js server-side rendering dan static generation
Konten sepenuhnya data-driven dari JSON — mudah diperbarui tanpa menyentuh kode komponen
Multi-bahasa (ID/EN) terintegrasi secara native dengan URL param sync dan tanpa library i18n eksternal
Mobile-first, fully responsive di semua ukuran layar dari mobile hingga desktop widescreen
Deploy otomatis ke Vercel: zero-downtime, preview URL per branch, rollback instan

🧩 Tech Stack

Next.js 16, TypeScript, Tailwind CSS, Framer Motion, React Icons, Vercel, JSON-based content architecture

⚡ Problem Statement

Butuh platform portofolio yang bisa update konten dengan cepat tanpa rebuild seluruh aplikasi
Multi-bahasa harus bekerja tanpa library i18n berat dan tetap di-index oleh search engine
Performa loading harus tinggi di perangkat mobile dengan koneksi lambat
Deployment harus zero-friction — update kode langsung live tanpa setup CI/CD kompleks
Arsitektur harus scalable seiring bertambahnya use case baru di setiap domain

🧠 Solution Overview

Arsitektur konten berbasis JSON: setiap domain (data engineering, analytics, dll.) punya use-cases.json sendiri
Multi-bahasa via URL query param (?lang=id/en) dengan sync state dan server-side rendering
Animasi dengan Framer Motion untuk pengalaman UI yang halus tanpa mengorbankan performa
Server components Next.js untuk rendering sisi server yang cepat dan SEO-friendly
Deployment ke Vercel: auto-deploy dari GitHub, preview deployments, analytics bawaan

🏗️ Architecture

App Router: Next.js 16 App Router dengan server components untuk layout dan page rendering
Konten Layer: JSON files per domain yang di-import langsung ke page components (zero API call)
Styling: Tailwind CSS utility-first dengan konfigurasi custom untuk design system yang konsisten
Animation: Framer Motion untuk page transitions, hover effects, dan scroll-triggered animations
Deployment: Vercel dengan Git integration — push ke main = production deploy otomatis

🔥 Challenges & Solutions

Multi-bahasa tanpa library i18n: diatasi dengan URL param + useSearchParams + server-side lang detection
Konten scalable tanpa CMS: diatasi dengan arsitektur JSON modular per domain yang mudah diperluas
SVG architecture diagrams di Next.js Image: diatasi dengan konfigurasi dangerouslyAllowSVG di next.config

Sales Route Optimization System

Saya membangun sistem optimasi rute kunjungan sales berbasis web untuk industri FMCG dan distribusi agritech. Sistem ini membantu sales memenuhi target kunjungan ±20 store per hari dalam constraint waktu kerja 8 jam, melalui kombinasi algoritma clustering geografis dan routing berbasis Google Maps API. Output dihasilkan dalam bentuk visualisasi peta per salesman dan export Excel untuk operasional lapangan.

📊 Impact

Sales dapat memenuhi target kunjungan ±20 store dalam 8 jam kerja dengan rute yang dioptimalkan
Rute lebih realistis dibanding pendekatan naive — memperhitungkan kondisi jalan nyata via Google Maps API
Meningkatkan efisiensi kunjungan lapangan secara signifikan dibanding perencanaan manual
Menjadi bridge antara data (lat/long store) dan operasional lapangan melalui output yang mudah digunakan
Output Excel memudahkan tim non-teknis untuk langsung menggunakan hasil optimasi tanpa pelatihan khusus

🧩 Tech Stack

Web Application (Custom), Backend Algorithm (Clustering + Routing), Google Maps API (Directions + Polyline), Excel Export, GIS Collaboration

⚡ Problem Statement

Mengoptimalkan rute kunjungan sales dalam constraint waktu kerja 8 jam per hari
Menentukan grouping store yang efisien berdasarkan kedekatan geografis
Menghasilkan rute yang realistis (bukan garis lurus) sesuai kondisi jalan nyata
Menyediakan tools yang dapat digunakan secara operasional oleh tim lapangan
Menghasilkan output yang bisa divalidasi dan dipahami tim non-teknis

🧠 Solution Overview

Web interface dengan parameter yang dapat dikonfigurasi: daftar store (lat/long), jumlah sales, working hours, target kunjungan
Clustering first: store dikelompokkan berdasarkan kedekatan geografis membentuk area kerja per salesman
Routing per cluster: setiap cluster dioptimalkan rutenya menggunakan Google Maps API (polyline actual route)
Dynamic starting point: titik awal kunjungan fleksibel, bisa dari titik terdekat, bukan selalu dari satu depot
Time-based constraint: fokus pada pemenuhan 8 jam kerja, bukan sekadar jumlah titik kunjungan
Output dual format: visualisasi peta per salesman di web + export Excel dengan urutan kunjungan & estimasi waktu

🏗️ Architecture

Input Layer: Web interface — user mengatur parameter (store list, jumlah sales, working hours, target visit)
Clustering Engine: algoritma berbasis kedekatan geografis untuk membentuk area kerja per salesman
Routing Engine: Google Maps API (Directions + Polyline) — menghasilkan rute realistis per cluster
Optimization Logic: time-based constraint dengan dynamic starting point dan iterative algorithm tuning
Output Layer: visualisasi peta interaktif per salesman di web
Export Layer: Excel export — urutan kunjungan, estimasi waktu, nama store per salesman

🔥 Challenges & Solutions

Distribusi data tidak merata: solusi — clustering geografis sebelum routing, bukan routing langsung ke semua titik
Akurasi rute (jarak peta ≠ jarak nyata): solusi — integrasi Google Maps API polyline untuk rute aktual di jalan
Real-world constraints (kondisi jalan, akses): solusi — time-based optimization menggantikan pendekatan berbasis jumlah titik
Iterative algorithm tuning: solusi — trial & error intensif dikombinasikan dengan kolaborasi bersama expert GIS

BabyTrack – Platform Kesehatan Anak Full-Stack

Sebagai Full-Stack Developer untuk BabyTrack, saya membangun seluruh lapisan teknis platform dari nol: desain dan migrasi skema SQL di Supabase Postgres, implementasi Row-Level Security untuk data anak yang sensitif, autentikasi berbasis Supabase Auth, dan frontend lengkap menggunakan Next.js App Router dengan TypeScript dan Tailwind CSS. Platform mencakup 10+ modul tracking terintegrasi, sistem admin berbasis role, dan traction dashboard untuk pelaporan bisnis — semuanya di-deploy ke Vercel.

📊 Impact

Membangun 10+ modul tracking anak yang fully integrated dalam satu platform production-ready
Mengimplementasikan Row-Level Security (RLS) Supabase untuk memastikan isolasi data per pengguna pada data kesehatan sensitif
Merancang dan memaintain SQL migrations untuk evolusi skema database seiring penambahan modul baru
Membangun sistem audit log berbasis trigger untuk tindakan admin dan governance controls
Deploy ke Vercel dengan zero-downtime, SEO metadata lengkap (Open Graph, Twitter Card), dan domain-ready branding

🧩 Tech Stack

Next.js (App Router), TypeScript, React, Supabase (Auth, Postgres, RLS), Tailwind CSS, Vercel, SQL Migrations, Trigger-based Audit Logging

⚡ Problem Statement

Data kesehatan anak perlu diisolasi per pengguna dengan keamanan tinggi — cross-user data leak tidak boleh terjadi
Skema database harus bisa berkembang seiring penambahan modul baru tanpa breaking changes
Admin perlu akses terstruktur berdasarkan role tanpa mengekspos data sensitif ke level akses yang salah
Frontend harus responsif, cepat, dan mendukung banyak modul tanpa arsitektur yang terfragmentasi
Audit log untuk aksi admin diperlukan untuk compliance dan governance

🧠 Solution Overview

Mengimplementasikan Supabase RLS policies di semua tabel sensitif untuk isolasi data per user_id
Merancang SQL migrations terstruktur untuk evolusi skema database — setiap modul baru punya migration file tersendiri
Membangun trigger-based updated_at consistency dan admin audit logging di level database
Menggunakan Next.js App Router dengan server components untuk performa rendering optimal dan SEO-friendly
Membangun admin panel dengan role separation (admin operasional vs. super admin) berbasis Supabase Auth claims

🏗️ Architecture

Auth Layer: Supabase Auth dengan role-based claims (admin, super_admin, user) + session management yang aman
Database Layer: Supabase Postgres dengan SQL migrations terstruktur, RLS policies per tabel, trigger-based audit log
API Layer: Server Actions dan API routes via Next.js App Router — zero custom backend server
Frontend Layer: Next.js App Router, TypeScript, Tailwind CSS — server components untuk data-heavy pages
Admin Layer: Operational Dashboard + Traction Dashboard terpisah dengan role-gated access
Deployment: Vercel — auto-deploy dari Git, environment variables per stage, domain-ready dengan favicon & app icon

🔥 Challenges & Solutions

RLS policy design yang kompleks untuk data anak yang dibagikan antar orang tua — diatasi dengan join table ownership dan policy granular
Konsistensi updated_at di banyak tabel — diatasi dengan trigger function reusable yang diterapkan ke semua tabel relevan
Admin audit log yang tidak memperlambat operasi utama — diatasi dengan trigger asinkron di level database

Ledgerin – Aplikasi Keuangan Pribadi (Offline-First)

Personal Project

Ledgerin adalah aplikasi mobile manajemen keuangan pribadi yang menerapkan pendekatan offline-first menggunakan SQLite via Drift sebagai local database utama. Semua transaksi tersimpan lokal — aplikasi tetap berjalan penuh tanpa internet. Backend Go + Swagger menangani sinkronisasi ke server, dan Google Drive API dipakai untuk backup data mandiri. Dirilis ke Google Play Store dan Firebase App Distribution.

📊 Impact

Offline-first: aplikasi berjalan penuh tanpa koneksi internet — data selalu tersedia
SQLite via Drift sebagai single source of truth lokal — performa tinggi tanpa latensi network
Google Drive API untuk backup & restore data keuangan secara mandiri
Backend Go + Swagger untuk sync ke server dengan contract-first API design
Dibangun dengan vibe coding approach — dari ide ke Play Store dalam waktu singkat

🧩 Tech Stack

Flutter, Dart, Drift (SQLite), Go (Golang), Swagger / OpenAPI, Google Drive API, Firebase Auth, REST API, Google Play Store

⚡ Problem Statement

Aplikasi keuangan yang bergantung pada internet tidak bisa dipakai saat koneksi buruk atau tidak ada
Data keuangan harus selalu tersedia secara instan tanpa menunggu respons server
Backup mandiri diperlukan — pengguna tidak ingin bergantung penuh pada satu cloud vendor
Backend API harus terdokumentasi untuk maintainability jangka panjang
Development cepat karena proyek personal di luar jam kerja

🧠 Solution Overview

Drift (SQLite) sebagai local database utama — semua operasi CRUD berjalan lokal tanpa network call
Offline-first architecture: UI selalu baca dari local DB, sync ke server terjadi di background saat online
Firebase Auth untuk autentikasi — hanya auth layer yang butuh koneksi saat login pertama
Google Drive API untuk backup & restore: pengguna bisa export/import data ke Google Drive mereka sendiri
Go REST API untuk sinkronisasi data — Swagger spec didefinisikan sebelum implementasi (contract-first)
Vibe coding: AI-assisted scaffolding dan iterasi UI untuk mempercepat delivery

🏗️ Architecture

Local DB Layer: Drift (SQLite) — type-safe ORM untuk Flutter, single source of truth, zero network dependency
Auth Layer: Firebase Authentication — Google Sign-In, hanya dibutuhkan saat login pertama
Sync Layer: Go REST API — sinkronisasi data lokal ke server saat koneksi tersedia
Backup Layer: Google Drive API — export/import SQLite data dump ke Google Drive pengguna
API Contract: Swagger/OpenAPI — contract-first, spec ditulis sebelum implementasi Go
Deployment: Google Play Store (production) + Firebase App Distribution (beta)

🔥 Challenges & Solutions

Conflict resolution saat sync — data lokal bisa berubah saat offline, perlu strategi merge saat kembali online
Drift schema migration — perubahan skema SQLite memerlukan migration yang hati-hati agar data lama tidak hilang
Google Drive OAuth flow di Flutter — token handling antar session memerlukan penanganan yang cermat

Home Tracker – Manajemen Rumah Tangga Digital (Offline-First + Firestore Sync)

Personal Project

Home Tracker adalah aplikasi mobile household management dengan arsitektur offline-first menggunakan SQLite via Drift sebagai local database utama. Data tersimpan lokal agar aplikasi tetap berjalan tanpa internet. Firestore digunakan sebagai lapisan sinkronisasi pull & sync antar perangkat dalam satu rumah tangga — bukan sebagai database utama. Backend Go + Swagger menangani logika server-side. Dirilis ke Google Play Store.

📊 Impact

Offline-first: aplikasi berjalan penuh tanpa koneksi — data rumah tangga selalu tersedia
Drift (SQLite) sebagai local source of truth — performa instan tanpa latensi network
Firestore sebagai sync layer: pull & sync antar device dalam satu household saat online
Shared household data — anggota rumah tangga melihat update yang sama setelah sync
Dibangun dengan vibe coding approach — delivery cepat sebagai personal project

🧩 Tech Stack

Flutter, Dart, Drift (SQLite), Firebase (Auth, Firestore), Go (Golang), Swagger / OpenAPI, REST API, Google Play Store

⚡ Problem Statement

Manajemen rumah tangga masih manual — catatan belanja dan tugas tersebar di chat dan kertas
Anggota rumah tangga butuh data yang sama tapi tidak selalu terhubung internet bersamaan
Aplikasi harus tetap berjalan saat offline — tidak boleh tergantung koneksi untuk fungsi utama
Sync antar device harus smooth tanpa conflict yang membingungkan pengguna

🧠 Solution Overview

Drift (SQLite) sebagai local database utama — semua operasi berjalan lokal, offline by default
Firestore sebagai pull & sync layer — bukan real-time listener, tapi periodic pull saat koneksi tersedia
Sync strategy: local changes di-queue, di-push ke Firestore saat online, devices lain pull saat buka app
Firebase Auth untuk identitas user — memastikan data sync ke household yang benar
Go REST API untuk server-side business logic dengan Swagger dokumentasi
Vibe coding: AI-assisted development untuk iterasi cepat dari konsep ke produk

🏗️ Architecture

Local DB Layer: Drift (SQLite) — type-safe ORM, primary data store, zero network dependency untuk operasi harian
Auth Layer: Firebase Authentication — identitas user untuk routing sync ke household yang benar
Sync Layer: Firestore (pull & sync) — bukan real-time listener; data di-pull saat app buka atau manual refresh
Conflict Strategy: last-write-wins dengan timestamp — simpel dan efektif untuk use case household
Backend Layer: Go REST API — server-side logic dan orchestration dengan Swagger-documented endpoints
Deployment: Google Play Store

🔥 Challenges & Solutions

Merancang sync strategy yang tidak membingungkan — last-write-wins dipilih karena sederhana dan cukup untuk household use case
Drift schema migration — update skema lokal memerlukan migrasi yang aman agar data existing tidak rusak
Memisahkan concern antara local DB dan Firestore sync layer — keduanya harus loosely coupled agar mudah diubah

Jelajahi domain lainnya

Data Engineering →Data Analytics →Data Governance →Data Operations →Product Management →

Untuk kembali ke profil, klik di sini.

Loading…

← Back

ID EN

Web & Mobile Development

Sebagian besar gambar adalah rekreasi ilustratif; sebagian proyek personal menampilkan screenshot asli.

Use Cases

Aplikasi mobile untuk tracking kebutuhan dan tugas rumah tangga — dibangun dengan Flutter & Firebase dengan backend Go yang terdokumentasi Swagger. Dirilis ke Play Store.

Web eTax, World Bank & Internal Apps

📊 Impact

Sistem eTax memungkinkan perusahaan swasta melakukan pelaporan pajak secara mandiri dan terstruktur melalui web
Modul World Bank terdeliver tepat waktu sesuai milestone proyek dengan standar dokumentasi internasional
Internal apps berbasis CI4 menggantikan workflow manual dan spreadsheet yang sering error
Komponen React yang dibangun dapat direuse di beberapa modul sehingga mempercepat development
Kualitas kode terjaga melalui code review, standar PSR, dan test coverage manual

🧩 Tech Stack

CodeIgniter 4, React, PHP, MySQL, REST API, HTML/CSS/JavaScript, Bootstrap, jQuery, MVC Architecture

⚡ Problem Statement

Perusahaan swasta membutuhkan sistem web untuk mencatat dan melaporkan kewajiban pajak secara terstruktur
Proyek World Bank membutuhkan modul web yang terintegrasi dalam ekosistem sistem yang sudah berjalan
Tim operasional masih menggunakan spreadsheet untuk proses yang seharusnya bisa diotomasi via web app
Beberapa internal tools dibangun dengan teknologi berbeda-beda sehingga sulit dimaintain
Kebutuhan form yang kompleks dengan validasi multi-level dan approval workflow antar departemen

🧠 Solution Overview

Membangun aplikasi eTax dengan form wizard multi-step, validasi pajak otomatis, dan laporan periodik
Mengintegrasikan modul web baru ke sistem World Bank yang ada dengan API contract yang disepakati
Migrasi workflow operasional ke CodeIgniter 4: CRUD modules, workflow approval, notifikasi email
Standarisasi komponen frontend dengan React: reusable form components, tabel dinamis, dan modal
Implementasi role-based access: admin, approver, user input dengan session management yang aman

🏗️ Architecture

Backend: CodeIgniter 4 dengan arsitektur MVC, RESTful API layer, dan middleware untuk autentikasi
Frontend: Hybrid approach — server-rendered PHP/CI4 views dengan React components untuk bagian interaktif
Database: MySQL dengan relational schema untuk tax records, approval workflow, dan audit trail
Auth & RBAC: session-based authentication dengan CI4 Shield library + kustom role permission layer
Deployment: shared hosting / VPS dengan Nginx + PHP-FPM, konfigurasi .env per environment

🔥 Challenges & Solutions

Integrasi modul baru ke sistem World Bank yang legacy — memerlukan pemahaman mendalam terhadap arsitektur yang sudah ada
Validasi perpajakan multi-level (PKWTT, PKWT, PPh 21) dengan logic yang kompleks dan berubah sesuai regulasi
Memastikan konsistensi UI antara komponen React dan template CI4 dalam satu aplikasi hybrid

Platform Portofolio Full-Stack Modern

📊 Impact

Time-to-first-byte (TTFB) rendah berkat Next.js server-side rendering dan static generation
Konten sepenuhnya data-driven dari JSON — mudah diperbarui tanpa menyentuh kode komponen
Multi-bahasa (ID/EN) terintegrasi secara native dengan URL param sync dan tanpa library i18n eksternal
Mobile-first, fully responsive di semua ukuran layar dari mobile hingga desktop widescreen
Deploy otomatis ke Vercel: zero-downtime, preview URL per branch, rollback instan

🧩 Tech Stack

Next.js 16, TypeScript, Tailwind CSS, Framer Motion, React Icons, Vercel, JSON-based content architecture

⚡ Problem Statement

Butuh platform portofolio yang bisa update konten dengan cepat tanpa rebuild seluruh aplikasi
Multi-bahasa harus bekerja tanpa library i18n berat dan tetap di-index oleh search engine
Performa loading harus tinggi di perangkat mobile dengan koneksi lambat
Deployment harus zero-friction — update kode langsung live tanpa setup CI/CD kompleks
Arsitektur harus scalable seiring bertambahnya use case baru di setiap domain

🧠 Solution Overview

Arsitektur konten berbasis JSON: setiap domain (data engineering, analytics, dll.) punya use-cases.json sendiri
Multi-bahasa via URL query param (?lang=id/en) dengan sync state dan server-side rendering
Animasi dengan Framer Motion untuk pengalaman UI yang halus tanpa mengorbankan performa
Server components Next.js untuk rendering sisi server yang cepat dan SEO-friendly
Deployment ke Vercel: auto-deploy dari GitHub, preview deployments, analytics bawaan

🏗️ Architecture

App Router: Next.js 16 App Router dengan server components untuk layout dan page rendering
Konten Layer: JSON files per domain yang di-import langsung ke page components (zero API call)
Styling: Tailwind CSS utility-first dengan konfigurasi custom untuk design system yang konsisten
Animation: Framer Motion untuk page transitions, hover effects, dan scroll-triggered animations
Deployment: Vercel dengan Git integration — push ke main = production deploy otomatis

🔥 Challenges & Solutions

Multi-bahasa tanpa library i18n: diatasi dengan URL param + useSearchParams + server-side lang detection
Konten scalable tanpa CMS: diatasi dengan arsitektur JSON modular per domain yang mudah diperluas
SVG architecture diagrams di Next.js Image: diatasi dengan konfigurasi dangerouslyAllowSVG di next.config

Sales Route Optimization System

📊 Impact

Sales dapat memenuhi target kunjungan ±20 store dalam 8 jam kerja dengan rute yang dioptimalkan
Rute lebih realistis dibanding pendekatan naive — memperhitungkan kondisi jalan nyata via Google Maps API
Meningkatkan efisiensi kunjungan lapangan secara signifikan dibanding perencanaan manual
Menjadi bridge antara data (lat/long store) dan operasional lapangan melalui output yang mudah digunakan
Output Excel memudahkan tim non-teknis untuk langsung menggunakan hasil optimasi tanpa pelatihan khusus

🧩 Tech Stack

Web Application (Custom), Backend Algorithm (Clustering + Routing), Google Maps API (Directions + Polyline), Excel Export, GIS Collaboration

⚡ Problem Statement

Mengoptimalkan rute kunjungan sales dalam constraint waktu kerja 8 jam per hari
Menentukan grouping store yang efisien berdasarkan kedekatan geografis
Menghasilkan rute yang realistis (bukan garis lurus) sesuai kondisi jalan nyata
Menyediakan tools yang dapat digunakan secara operasional oleh tim lapangan
Menghasilkan output yang bisa divalidasi dan dipahami tim non-teknis

🧠 Solution Overview

Web interface dengan parameter yang dapat dikonfigurasi: daftar store (lat/long), jumlah sales, working hours, target kunjungan
Clustering first: store dikelompokkan berdasarkan kedekatan geografis membentuk area kerja per salesman
Routing per cluster: setiap cluster dioptimalkan rutenya menggunakan Google Maps API (polyline actual route)
Dynamic starting point: titik awal kunjungan fleksibel, bisa dari titik terdekat, bukan selalu dari satu depot
Time-based constraint: fokus pada pemenuhan 8 jam kerja, bukan sekadar jumlah titik kunjungan
Output dual format: visualisasi peta per salesman di web + export Excel dengan urutan kunjungan & estimasi waktu

🏗️ Architecture

Input Layer: Web interface — user mengatur parameter (store list, jumlah sales, working hours, target visit)
Clustering Engine: algoritma berbasis kedekatan geografis untuk membentuk area kerja per salesman
Routing Engine: Google Maps API (Directions + Polyline) — menghasilkan rute realistis per cluster
Optimization Logic: time-based constraint dengan dynamic starting point dan iterative algorithm tuning
Output Layer: visualisasi peta interaktif per salesman di web
Export Layer: Excel export — urutan kunjungan, estimasi waktu, nama store per salesman

🔥 Challenges & Solutions

Distribusi data tidak merata: solusi — clustering geografis sebelum routing, bukan routing langsung ke semua titik
Akurasi rute (jarak peta ≠ jarak nyata): solusi — integrasi Google Maps API polyline untuk rute aktual di jalan
Real-world constraints (kondisi jalan, akses): solusi — time-based optimization menggantikan pendekatan berbasis jumlah titik
Iterative algorithm tuning: solusi — trial & error intensif dikombinasikan dengan kolaborasi bersama expert GIS

BabyTrack – Platform Kesehatan Anak Full-Stack

📊 Impact

Membangun 10+ modul tracking anak yang fully integrated dalam satu platform production-ready
Mengimplementasikan Row-Level Security (RLS) Supabase untuk memastikan isolasi data per pengguna pada data kesehatan sensitif
Merancang dan memaintain SQL migrations untuk evolusi skema database seiring penambahan modul baru
Membangun sistem audit log berbasis trigger untuk tindakan admin dan governance controls
Deploy ke Vercel dengan zero-downtime, SEO metadata lengkap (Open Graph, Twitter Card), dan domain-ready branding

🧩 Tech Stack

Next.js (App Router), TypeScript, React, Supabase (Auth, Postgres, RLS), Tailwind CSS, Vercel, SQL Migrations, Trigger-based Audit Logging

⚡ Problem Statement

Data kesehatan anak perlu diisolasi per pengguna dengan keamanan tinggi — cross-user data leak tidak boleh terjadi
Skema database harus bisa berkembang seiring penambahan modul baru tanpa breaking changes
Admin perlu akses terstruktur berdasarkan role tanpa mengekspos data sensitif ke level akses yang salah
Frontend harus responsif, cepat, dan mendukung banyak modul tanpa arsitektur yang terfragmentasi
Audit log untuk aksi admin diperlukan untuk compliance dan governance

🧠 Solution Overview

Mengimplementasikan Supabase RLS policies di semua tabel sensitif untuk isolasi data per user_id
Merancang SQL migrations terstruktur untuk evolusi skema database — setiap modul baru punya migration file tersendiri
Membangun trigger-based updated_at consistency dan admin audit logging di level database
Menggunakan Next.js App Router dengan server components untuk performa rendering optimal dan SEO-friendly
Membangun admin panel dengan role separation (admin operasional vs. super admin) berbasis Supabase Auth claims

🏗️ Architecture

Auth Layer: Supabase Auth dengan role-based claims (admin, super_admin, user) + session management yang aman
Database Layer: Supabase Postgres dengan SQL migrations terstruktur, RLS policies per tabel, trigger-based audit log
API Layer: Server Actions dan API routes via Next.js App Router — zero custom backend server
Frontend Layer: Next.js App Router, TypeScript, Tailwind CSS — server components untuk data-heavy pages
Admin Layer: Operational Dashboard + Traction Dashboard terpisah dengan role-gated access
Deployment: Vercel — auto-deploy dari Git, environment variables per stage, domain-ready dengan favicon & app icon

🔥 Challenges & Solutions

RLS policy design yang kompleks untuk data anak yang dibagikan antar orang tua — diatasi dengan join table ownership dan policy granular
Konsistensi updated_at di banyak tabel — diatasi dengan trigger function reusable yang diterapkan ke semua tabel relevan
Admin audit log yang tidak memperlambat operasi utama — diatasi dengan trigger asinkron di level database

Ledgerin – Aplikasi Keuangan Pribadi (Offline-First)

Personal Project

📊 Impact

Offline-first: aplikasi berjalan penuh tanpa koneksi internet — data selalu tersedia
SQLite via Drift sebagai single source of truth lokal — performa tinggi tanpa latensi network
Google Drive API untuk backup & restore data keuangan secara mandiri
Backend Go + Swagger untuk sync ke server dengan contract-first API design
Dibangun dengan vibe coding approach — dari ide ke Play Store dalam waktu singkat

🧩 Tech Stack

Flutter, Dart, Drift (SQLite), Go (Golang), Swagger / OpenAPI, Google Drive API, Firebase Auth, REST API, Google Play Store

⚡ Problem Statement

Aplikasi keuangan yang bergantung pada internet tidak bisa dipakai saat koneksi buruk atau tidak ada
Data keuangan harus selalu tersedia secara instan tanpa menunggu respons server
Backup mandiri diperlukan — pengguna tidak ingin bergantung penuh pada satu cloud vendor
Backend API harus terdokumentasi untuk maintainability jangka panjang
Development cepat karena proyek personal di luar jam kerja

🧠 Solution Overview

Drift (SQLite) sebagai local database utama — semua operasi CRUD berjalan lokal tanpa network call
Offline-first architecture: UI selalu baca dari local DB, sync ke server terjadi di background saat online
Firebase Auth untuk autentikasi — hanya auth layer yang butuh koneksi saat login pertama
Google Drive API untuk backup & restore: pengguna bisa export/import data ke Google Drive mereka sendiri
Go REST API untuk sinkronisasi data — Swagger spec didefinisikan sebelum implementasi (contract-first)
Vibe coding: AI-assisted scaffolding dan iterasi UI untuk mempercepat delivery

🏗️ Architecture

Local DB Layer: Drift (SQLite) — type-safe ORM untuk Flutter, single source of truth, zero network dependency
Auth Layer: Firebase Authentication — Google Sign-In, hanya dibutuhkan saat login pertama
Sync Layer: Go REST API — sinkronisasi data lokal ke server saat koneksi tersedia
Backup Layer: Google Drive API — export/import SQLite data dump ke Google Drive pengguna
API Contract: Swagger/OpenAPI — contract-first, spec ditulis sebelum implementasi Go
Deployment: Google Play Store (production) + Firebase App Distribution (beta)

🔥 Challenges & Solutions

Conflict resolution saat sync — data lokal bisa berubah saat offline, perlu strategi merge saat kembali online
Drift schema migration — perubahan skema SQLite memerlukan migration yang hati-hati agar data lama tidak hilang
Google Drive OAuth flow di Flutter — token handling antar session memerlukan penanganan yang cermat

Home Tracker – Manajemen Rumah Tangga Digital (Offline-First + Firestore Sync)

Personal Project

📊 Impact

Offline-first: aplikasi berjalan penuh tanpa koneksi — data rumah tangga selalu tersedia
Drift (SQLite) sebagai local source of truth — performa instan tanpa latensi network
Firestore sebagai sync layer: pull & sync antar device dalam satu household saat online
Shared household data — anggota rumah tangga melihat update yang sama setelah sync
Dibangun dengan vibe coding approach — delivery cepat sebagai personal project

🧩 Tech Stack

Flutter, Dart, Drift (SQLite), Firebase (Auth, Firestore), Go (Golang), Swagger / OpenAPI, REST API, Google Play Store

⚡ Problem Statement

Manajemen rumah tangga masih manual — catatan belanja dan tugas tersebar di chat dan kertas
Anggota rumah tangga butuh data yang sama tapi tidak selalu terhubung internet bersamaan
Aplikasi harus tetap berjalan saat offline — tidak boleh tergantung koneksi untuk fungsi utama
Sync antar device harus smooth tanpa conflict yang membingungkan pengguna

🧠 Solution Overview

Drift (SQLite) sebagai local database utama — semua operasi berjalan lokal, offline by default
Firestore sebagai pull & sync layer — bukan real-time listener, tapi periodic pull saat koneksi tersedia
Sync strategy: local changes di-queue, di-push ke Firestore saat online, devices lain pull saat buka app
Firebase Auth untuk identitas user — memastikan data sync ke household yang benar
Go REST API untuk server-side business logic dengan Swagger dokumentasi
Vibe coding: AI-assisted development untuk iterasi cepat dari konsep ke produk

🏗️ Architecture

Local DB Layer: Drift (SQLite) — type-safe ORM, primary data store, zero network dependency untuk operasi harian
Auth Layer: Firebase Authentication — identitas user untuk routing sync ke household yang benar
Sync Layer: Firestore (pull & sync) — bukan real-time listener; data di-pull saat app buka atau manual refresh
Conflict Strategy: last-write-wins dengan timestamp — simpel dan efektif untuk use case household
Backend Layer: Go REST API — server-side logic dan orchestration dengan Swagger-documented endpoints
Deployment: Google Play Store

🔥 Challenges & Solutions

Merancang sync strategy yang tidak membingungkan — last-write-wins dipilih karena sederhana dan cukup untuk household use case
Drift schema migration — update skema lokal memerlukan migrasi yang aman agar data existing tidak rusak
Memisahkan concern antara local DB dan Firestore sync layer — keduanya harus loosely coupled agar mudah diubah

Jelajahi domain lainnya

Data Engineering →Data Analytics →Data Governance →Data Operations →Product Management →

Untuk kembali ke profil, klik di sini.