Langkahku
A Progressive Web App for online drivers to manage income, expenses, savings, and withdrawals with transactional consistency.
LangkahKu is a fullstack Progressive Web App (PWA) developed to help online drivers manage their finances more effectively. The application allows users to record income, expenses, savings, and withdrawals while maintaining accurate financial calculations and transaction consistency. The project scope covered the entire development lifecycle, including authentication, financial dashboards, savings management, withdrawal systems, MongoDB transaction handling, responsive interfaces, and PWA implementation. The main objective was to build a simple yet reliable financial tracking system that can be used daily on both desktop and mobile devices.
The problem
Online drivers often manage their finances manually through notes, spreadsheets, or messaging apps, making it difficult to track actual profits, savings, and cash availability accurately. One of the biggest challenges was maintaining financial consistency across multiple related entities. For example, withdrawing money from a savings category affects savings balances, withdrawal history, and savings usage history simultaneously. Without proper transaction management, partial failures could lead to inconsistent financial data. Additionally, users needed a mobile-friendly experience that behaves like a native app while remaining lightweight and accessible through a browser.
The solution
I built LangkahKu as a fullstack Progressive Web App using Next.js, Express.js, MongoDB, and TypeScript. To ensure financial consistency, I implemented MongoDB Transactions for operations involving multiple collections, such as savings withdrawals and balance restoration. This guarantees that related operations either succeed together or rollback completely when an error occurs. I also designed a snapshot strategy for historical records to preserve category names even after categories are edited or deleted. Atomic operations and ownership validation were applied to prevent race conditions and unauthorized data manipulation. On the frontend, I focused on creating a responsive and mobile-first interface with an installable PWA experience, allowing users to access the application easily across devices just like a native mobile application. The result is a reliable financial management system with transaction safety, responsive design, and a smooth user experience for everyday financial tracking.
- 01
Financial Dashboard
Provides a complete overview of income, expenses, savings, withdrawals, and available balance with automatically updated financial summaries.
- 02
Savings Categories Management
Users can create multiple savings categories, deposit funds, track balances, and manage savings independently for different financial goals.
- 03
Savings Withdrawal System
Supports withdrawing funds directly from savings categories with automatic balance adjustments and synchronized transaction history.
- 04
MongoDB Transactions
Critical financial operations are executed using MongoDB transactions to guarantee atomicity, rollback on failure, and data consistency.
- 05
Transaction History & Snapshot
Stores transaction snapshots to preserve historical records even when savings categories are renamed or removed.
- 06
Progressive Web App (PWA)
Installable web application with service worker support, responsive layouts, and a native app-like experience across devices.
- 07
Responsive Mobile Experience
Designed with a mobile-first approach to provide a seamless experience on smartphones, tablets, and desktop devices.
Frontend
Built with Next.js App Router, TypeScript, and Tailwind CSS. The frontend provides a responsive and mobile-first user interface for managing income, expenses, savings, and withdrawals with reusable components and optimized client-side interactions.
Backend API
RESTful API built using Express.js and TypeScript. Handles authentication, business rules, financial calculations, transaction management, and ownership validation across all financial operations.
Database
MongoDB with Mongoose ODM for schema modeling and data management. MongoDB Transactions are used to ensure atomic financial operations, rollback on failure, and maintain transaction consistency.
Authentication
JWT-based authentication with protected API routes and user ownership validation to ensure secure access to financial data and prevent unauthorized operations.
Progressive Web App
Implemented as a Progressive Web App (PWA) using next-pwa, including service workers, installable experience, offline capabilities, and responsive layouts for mobile and desktop devices.
