Skip to main content
KILIEx 26

Gradbudget

UNIVERSITI TEKNOLOGI MARA CAW. KELANTAN

1 view · Published October 8, 2026

About the Project

1. INTRODUCTION Financial literacy remains a critical challenge for fresh graduates entering the workforce. With entry-level salaries, young professionals often struggle to allocate their income effectively across essential categories such as daily expenses, emergency savings, investments, and insurance. While numerous financial applications exist, many are cluttered with complex features, require constant internet connectivity, or demand paid subscriptions. This project introduces a lightweight, intuitive, and entirely offline-capable Progressive Web Application (PWA) designed specifically to help fresh graduates plan their monthly salary allocations seamlessly. 2. PROBLEM STATEMENT Three main issues hinder effective financial planning among fresh graduates: Information Overload: Existing financial apps are often overly complex, deterring beginners from basic budget planning. Accessibility Constraints: Most modern applications rely heavily on cloud servers, making them inaccessible in areas with poor internet connectivity or for users without active mobile data. Data Privacy Concerns: Users are often hesitant to input their financial data into third-party servers due to privacy risks. 3. OBJECTIVES To develop a user-friendly, web-based financial calculator tailored for fresh graduates. To implement a flexible fraction-based allocation system (Expenses, Savings, Investments, Insurance) that adapts to user-defined salaries. To deploy a Progressive Web App (PWA) architecture that allows 100% offline functionality and local data storage without requiring app store installation. 4. METHODOLOGY & SYSTEM ARCHITECTURE The application was developed using a purely client-side technology stack comprising HTML, CSS, and vanilla JavaScript, eliminating the need for backend servers. Algorithm: The core logic utilizes a dynamic calculation model: Allocation=Salary×(Percentage/100). The system actively validates the user's input to ensure the total fraction strictly equals 100%. Offline Architecture (PWA): A Service Worker (sw.js) and a Web App Manifest (manifest.json) were integrated. The Service Worker aggressively caches all interface assets upon the first visit. Data Persistence: The application employs the browser's localStorage API, ensuring that user inputs (salary and preferred percentages) are saved locally on the device and immediately retrieved during subsequent offline sessions. 5. NOVELTY AND USEFULNESS The primary novelty lies in its Zero-Install, Offline-First approach. Users simply access a generated Netlify URL and add the tool directly to their smartphone's home screen. It operates identically to a native mobile app but consumes less than 1MB of storage. By keeping all calculations and data processing strictly on the client side, the application guarantees zero server costs and 100% data privacy. 6. COMMERCIALIZATION & SOCIAL IMPACT As a free educational tool, this application holds significant potential for adoption by universities, career counseling centers, and financial literacy NGOs. It addresses the Sustainable Development Goals (SDG 1: No Poverty & SDG 4: Quality Education) by providing an accessible digital tool to cultivate healthy financial habits among youths before they face risks of debt or bankruptcy. 7. CONCLUSION The developed PWA successfully provides a seamless, secure, and highly accessible financial planning tool for fresh graduates. By leveraging local browser caching and simple mathematical modeling, the application demonstrates how lightweight digital innovations can effectively solve daily socio-economic challenges without relying on heavy infrastructure.

More from the same competition

Browse Showcase