Selected Work / Case Study
2025Fintech / WebView Application
A Hajj-focused gold savings experience supporting travel planning, asset management, and gold transactions.
Role
Frontend Development
Year
2025
01 / The Overview
About The ProjectGold to Mecca — Hajj is a mobile WebView experience designed to support Hajj financial planning through gold-based savings and asset management. Integrated into the BPKH native application, it provides access to financial tools within an existing mobile ecosystem.
The experience brings together three Hajj savings plans—Registration, Settlement, and Travel Expenses—alongside gold, cash, and RPED wallets, financial insights, and gold transactions. Each savings plan supports a different stage of Hajj preparation, from securing a place in the pilgrimage queue to completing payments and preparing travel funds.
Support different stages of Hajj preparation through dedicated savings plans and gold-based financial tools.
Make savings progress, wallet balances, asset ownership, and financial activity easier to understand and manage.
Deliver a mobile-first WebView interface integrated with the BPKH native application.
02 / The Process
Behind The Work01 / The Challenge
The application combines multiple Hajj savings plans, wallet types, gold transactions, and financial information within a mobile environment. The challenge was to organize these connected features into an experience that remains clear, consistent, and practical for everyday use.
Present different Hajj savings plans and their progress clearly.
Organize gold, cash, and RPED wallet information consistently.
Maintain intuitive financial workflows within a native application WebView.
02 / The Approach
The frontend uses reusable Vue components, typed data structures, and API-driven interactions to support savings and financial workflows. A consistent visual system and clear information hierarchy help users navigate between savings plans, wallets, transactions, and financial details.
Build reusable UI patterns for savings plans, wallets, and financial information.
Organize application state and server data using Pinia and Vue Query.
Support financial forms and transactions with validation and clear feedback.
From Concept to Experience
03 / Selected Highlights
Project DetailsA closer look at the savings plans and connected financial tools that support different stages of Hajj preparation.
Registration, Settlement & Travel Savings
Three dedicated savings plans support different stages of Hajj preparation: Registration for securing a pilgrimage queue number, Settlement for completing Hajj payments, and Travel Expenses for preparing personal funds during the journey.
Gold, Cash & RPED Wallets
A connected interface for viewing and managing gold, cash, and RPED wallets, with financial information organized for clarity and accessibility.
Gold Trading & Financial Overview
Gold buying and selling workflows connect with transaction histories, asset ownership, profit and loss information, and withdrawal features to provide a clearer view of financial activity.
04 / Tech Stack & Reflection
Behind The BuildThe technologies and frontend considerations behind a financial WebView experience for Hajj preparation.
01 / Technologies
Vue 3 · TypeScript · Vite · Tailwind CSS · Reka UI
Pinia · TanStack Vue Query · Axios
VeeValidate · Yup · VueUse · Decimal.js
02 / Reflection
Working on Gold to Mecca — Hajj reinforced the importance of presenting financial information with clarity and consistency. Supporting different savings plans alongside wallet management and gold transactions required careful consideration of how complex information is organized and presented.
The project also provided experience in building mobile-first interfaces within an existing native application ecosystem. It strengthened my approach to reusable components, API integration, and maintaining a cohesive experience across related financial products.
Always Learning, Always Building
Harie.05 / Up Next
Project 04Continue Exploring
Fintech / Internal Management Platform
2025© 2026 Harie. All Rights Reserved.
Made with Intention