This Vue.js application provides a comprehensive financial dashboard that allows users to track their transactions, view balances, and analyze their income and expenses through interactive charts. It features a dark mode toggle and supports multiple currencies.
The application is currently running on GitHub Pages at https://henriits.github.io/budget_planner_vue_ts/.
- Dark Mode Toggle: Users can switch between light and dark themes for better visibility according to their preference.
- Currency Selection: Supports multiple currencies, allowing users to select and view financial data in their chosen currency.
- Transaction Management: Add, view, and delete transactions from a dynamic list.
- Financial Charts: Visualize income and expenses with Doughnut charts, providing a clear breakdown of financial activities.
- Persistent Storage: Transactions and user preferences (like selected currency and theme) are saved locally to maintain state across sessions.
- Clone the repository.
- Install dependencies:
npm install- Run the application locally:
npm run dev- Vue.js
- TypeScript
- FontAwesome for icons
- LocalStorage for data persistence
- Vitest for unit testing
- Playwright for end-to-end testing
src/components/: Contains all the reusable components.src/: Main source directory containing the Vue application.
- User Authentication: Implement user login and registration to personalize and secure user data. This will require reintegrating Vue Router to handle different authentication states and navigation.
- Date-based Filtering for Charts: Add functionality to track expenses and income on a weekly and monthly basis through interactive charts.
- Currency API Integration: Integrate a currency conversion API to provide more currency options and real-time conversion rates.
- Extend Currency Support: Enhance the current currency selection feature to include a broader range of currencies.
- State Management Upgrade: Transition from LocalStorage to Pinia for enhanced state management across the application.