Selected Work / Case Study
2025Fintech / Internal Management Platform
An internal management platform supporting travel operations, financial workflows, and administrative processes within the Gold to Mecca ecosystem.
Role
Frontend Development
Year
2025
Harie / Selected Work
2025
Internal Platform / Frontend Development
Technical Case Study
Project Overview
01 / The Overview
About The ProjectGold to Mecca — Admin is a web-based internal management platform supporting operational activities within the Gold to Mecca ecosystem. It provides administrative tools for managing travel agencies, Umrah and Hajj packages, financial records, and related business information.
The platform brings different management workflows into a structured web interface. My role focused on frontend development, building reusable interfaces, integrating APIs, and implementing consistent interactions across administrative modules.
Support travel management, financial administration, and operational activities through a centralized platform.
Provide clear data tables, structured forms, and consistent interactions for administrative workflows.
Develop frontend interfaces, integrate backend APIs, and maintain reusable UI patterns across modules.
02 / The Process
Behind The Work01 / The Challenge
An administrative platform involves multiple types of information, forms, and operational workflows. The frontend challenge was to present these elements consistently while keeping interfaces readable, responsive, and practical for daily use.
Organize complex information through structured tables and forms.
Maintain consistent UI patterns across different management modules.
Handle asynchronous data, form states, and user feedback clearly.
02 / The Approach
I developed frontend interfaces using Vue 3 and TypeScript, with reusable components and API-driven data handling. Shared UI patterns, structured state management, and form validation helped maintain consistency across different administrative features.
Build reusable components for data tables, forms, and management interfaces.
Manage application state and server data using Pinia and TanStack Vue Query.
Implement API integration, form validation, loading states, and error feedback.
From Concept to Experience
03 / Key Features
Project DetailsAn overview of the platform's core capabilities and the frontend work involved in supporting administrative workflows.
Feature / 01
Management interfaces for travel agencies, Umrah and Hajj packages, and related business information. My frontend work involved implementing structured data tables, reusable forms, and API-connected management interactions.
Feature / 02
Administrative interfaces supporting financial records, payment information, and transaction-related activities. I worked on presenting structured data, handling API responses, and implementing consistent interface states.
Feature / 03
A component-based frontend approach using Vue 3 and TypeScript to support multiple administrative modules. Shared interface patterns, state management, form validation, and API integration helped maintain consistency and reduce duplicated implementation.
04 / Tech Stack & Reflection
Behind The BuildThe technologies and frontend considerations behind a multi-module administrative platform.
01 / Technologies
Vue 3 · TypeScript · Vite · Tailwind CSS · Reka UI
Pinia · TanStack Vue Query · Axios
VeeValidate · Yup · VueUse · Day.js
02 / Reflection
Working on Gold to Mecca — Admin reinforced the importance of building consistent frontend experiences across multiple administrative modules. Reusable components, predictable interaction patterns, and structured data handling were essential for keeping complex interfaces maintainable and understandable.
The project strengthened my experience with Vue 3, TypeScript, API integration, and state management in data-intensive applications. It also improved my approach to frontend architecture, form validation, and designing interfaces around practical operational needs.
Always Learning, Always Building
Harie.05 / Up Next
Project 05Continue Exploring
Developer Tools / API Platform
2025© 2026 Harie. All Rights Reserved.
Made with Intention