Savings Plans & Progress
Highlight / 01
Gold-Based Savings
Savings plans help users prepare for Umrah with progress tracking, savings details, reminders, and financial insights that make their goals easier to follow.
Selected Work / Case Study
2025Fintech / WebView Application
Gold to Mecca — Umrah.
A gold-based Umrah savings platform featuring financial planning, gold trading, and travel package booking.
Role
Frontend Development
Year
2025
01 / The Overview
About The ProjectMaking every step
toward Umrah count.
Gold to Mecca — Umrah is a financial planning experience that helps users prepare for their Umrah journey through gold-based savings. Built as a WebView application integrated with native mobile platforms, it brings financial tools and travel planning into one connected experience.
The platform combines gold and cash wallets, savings plans, financial insights, gold transactions, and Umrah package booking, helping users manage their savings and plan their journey within a unified interface.
01
The Purpose
Support Umrah financial planning through accessible gold-based savings and clear progress tracking.
02
The Experience
Connect savings, wallet management, gold transactions, and travel planning within a mobile-first experience.
03
The Platform
Deliver a Vue-based WebView experience integrated with native mobile applications.
02 / The Process
Behind The WorkSimplifying complexity.
One step at a time.
01 / The Challenge
Making financial journeys easier to navigate.
The product brings together multiple financial activities, from managing gold and cash balances to tracking savings and booking Umrah packages. The challenge was to present these connected workflows clearly within a mobile WebView environment.
01
Organize multiple financial features into intuitive mobile navigation.
02
Present balances, transaction histories, and savings progress clearly.
03
Maintain a consistent experience across native and WebView interactions.
02 / The Approach
A structured, mobile-first experience.
The frontend was built around reusable Vue components, structured state management, and API-driven data flows. This approach supports complex financial interactions while keeping the interface consistent and manageable.
01
Build reusable components for shared financial interface patterns.
02
Manage application state and server data with Pinia and Vue Query.
03
Use typed interfaces and form validation to support reliable user flows.
From Concept to Experience
03 / Selected Highlights
Project DetailsFrom saving gold to planning the journey.
A closer look at the connected financial tools and travel experiences within Gold to Mecca — Umrah.
Gold Wallet & Transactions
Highlight / 02
Gold & Wallet Management
A connected financial experience for viewing gold and cash balances, managing gold purchases and sales, and reviewing transaction history and asset ownership.
Travel Packages & Booking
Highlight / 03
Umrah Package Booking
Users can explore available Umrah travel packages and continue through booking and payment workflows within the same application experience.
04 / Tech Stack & Reflection
Behind The BuildBuilding for clarity.
Designing for confidence.
The technologies and frontend considerations behind a connected financial WebView experience.
01 / Technologies
01
Frontend & UI
Vue 3 · TypeScript · Vite · Tailwind CSS · Reka UI
02
State & Data
Pinia · TanStack Vue Query · Axios
03
Forms & Utilities
VeeValidate · Yup · VueUse · Decimal.js
02 / Reflection
Connecting complex experiences.
Working on Gold to Mecca — Umrah reinforced the importance of making complex financial information approachable. Bringing together wallets, savings plans, gold transactions, and travel booking required careful attention to component structure, data handling, and interface consistency.
Developing within a WebView environment also highlighted the importance of coordinating web experiences with native application flows. The project strengthened my approach to building maintainable, API-driven frontend applications with clear and reliable user interactions.
Always Learning, Always Building
Harie.05 / Up Next
Project 03Continue Exploring
Gold to Mecca — Hajj.
Fintech / WebView Application
2025© 2026 Harie. All Rights Reserved.
Made with Intention