← Back
IDEN

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.

📌 Catatan: Semua gambar pada halaman ini hanya ilustrasi — bukan tangkapan layar dari dashboard atau arsitektur nyata. Semoga masih mewakili apa yang sudah saya buat.

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

  1. Backend: CodeIgniter 4 dengan arsitektur MVC, RESTful API layer, dan middleware untuk autentikasi
  2. Frontend: Hybrid approach — server-rendered PHP/CI4 views dengan React components untuk bagian interaktif
  3. Database: MySQL dengan relational schema untuk tax records, approval workflow, dan audit trail
  4. Auth & RBAC: session-based authentication dengan CI4 Shield library + kustom role permission layer
  5. 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

  1. App Router: Next.js 16 App Router dengan server components untuk layout dan page rendering
  2. Konten Layer: JSON files per domain yang di-import langsung ke page components (zero API call)
  3. Styling: Tailwind CSS utility-first dengan konfigurasi custom untuk design system yang konsisten
  4. Animation: Framer Motion untuk page transitions, hover effects, dan scroll-triggered animations
  5. 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

  1. Input Layer: Web interface — user mengatur parameter (store list, jumlah sales, working hours, target visit)
  2. Clustering Engine: algoritma berbasis kedekatan geografis untuk membentuk area kerja per salesman
  3. Routing Engine: Google Maps API (Directions + Polyline) — menghasilkan rute realistis per cluster
  4. Optimization Logic: time-based constraint dengan dynamic starting point dan iterative algorithm tuning
  5. Output Layer: visualisasi peta interaktif per salesman di web
  6. 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

  1. Auth Layer: Supabase Auth dengan role-based claims (admin, super_admin, user) + session management yang aman
  2. Database Layer: Supabase Postgres dengan SQL migrations terstruktur, RLS policies per tabel, trigger-based audit log
  3. API Layer: Server Actions dan API routes via Next.js App Router — zero custom backend server
  4. Frontend Layer: Next.js App Router, TypeScript, Tailwind CSS — server components untuk data-heavy pages
  5. Admin Layer: Operational Dashboard + Traction Dashboard terpisah dengan role-gated access
  6. 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

  1. Local DB Layer: Drift (SQLite) — type-safe ORM untuk Flutter, single source of truth, zero network dependency
  2. Auth Layer: Firebase Authentication — Google Sign-In, hanya dibutuhkan saat login pertama
  3. Sync Layer: Go REST API — sinkronisasi data lokal ke server saat koneksi tersedia
  4. Backup Layer: Google Drive API — export/import SQLite data dump ke Google Drive pengguna
  5. API Contract: Swagger/OpenAPI — contract-first, spec ditulis sebelum implementasi Go
  6. 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

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