Expense Tracker
A customizable, insight-driven personal finance tracking application built with Next JS and modern DevOps tools—designed for users who need more than just basic banking apps. This cross-platform solution empowers users with granular control over their finances, offering intuitive store-level tracking, dynamic budgeting, and powerful data visualizations to support better financial decisions and accountability.
Project Links
Please note that the project has not yet launched. Live access will remain unavailable until the official release.
Issues
Despite having multiple financial apps like Maybank and others, I kept running into the same issue: I couldn’t manage my money the way I wanted. These tools were either unintuitive, lacked customization, or failed to provide the insights I needed. I couldn’t easily track spending by store, set dynamic budgets, or visualize where my money was going in a way that helped me stay accountable.
Solutions
I decided to build my own finance tracking tool tailored to my specific needs. The app lets me:
- Track spending by individual stores
- Generate targeted pie charts and visual reports
- Set and monitor custom budgets
- Select and filter the exact data I care about
Instead of relying on rigid templates from other apps, this system gives me full control over how I view and manage my money—ultimately helping me avoid overspending and stay on top of my finances.
Tech Stack (Fullstack)
- Typescript
- NextJs
- React
- TailwindCSS
- React Recharts
- Radix UI
- Node JS
- MongoDB atlas
Tech Stack (DevOps)
- Cloudflare
- Vercel
Key Features and Technical Highlights
Real-Time Budget Tracking with Polling
- Real-time budget tracking system that dynamically updates user data through polling.
- Ensures live updates without page refreshes, providing users immediate clarity on spending habits and budget status.
Financial Data Visualization
- Integrated Recharts to deliver interactive charts that visualize spending patterns.
- Enables users to identify trends, control impulse spending, and make informed financial decisions in real time.
Advanced Date Management
- Utilized React-Day-Picker to allow users to select specific time periods for expense tracking.
- Provides personalized financial views across weekly, monthly, and custom ranges.
Scalable & Reliable Backend
- Powered by MongoDB Atlas for a scalable, cloud-based database solution.
- Handles large datasets efficiently while maintaining high performance and reliability.
Customizable & Responsive UI
- Built using TailwindCSS and Radix UI for a responsive design across all screen sizes.
- Delivers a sleek, accessible, and inclusive user interface on both mobile and desktop.
Optimized Performance with Next.js
- Leveraged Next.js with server-side rendering (SSR) for fast initial load times.
- Ensures smooth performance and reliability during high-traffic periods.
Progressive Web App (PWA) Support
- Implemented PWA features for offline access and installability.
- Enhances usability by offering a native-like experience even without internet connectivity.
Impact and Outcomes
Transformed Financial Awareness
- “Home-Belanja” provided clear, visual insights into my spending habits, helping me better understand my finances.
- Empowered more intentional and proactive financial decisions by balancing income and expenses effectively.
Streamlined Money Management
- Simplified the budgeting process with real-time tracking, customized insights, and easy-to-read charts.
- Turned budgeting from an overwhelming task into a stress-free, daily habit that boosts financial confidence.
Increased Engagement and Accountability
- Encouraged consistent tracking with targeted reports and visualizations that highlight spending patterns.
- Enhanced accountability by making users more mindful of their spending, helping them stay within budget.
Built to Last
- Developed with Next.js, TailwindCSS, and MongoDB to ensure scalability, performance, and long-term adaptability.
- Designed to grow with evolving financial needs, supporting future features and budget flexibility.