This project was created to track your expenses and income, so you can always be aware of your cash flow and account balances.
- Create new accounts with names and currencies, edit or delete them
- Track expenses and incomes
- Create new categories with different names, colors, and icons, or edit and delete them
- Create new currencies with different names and symbols, or edit and delete them
- Edit or delete transactions for your expenses and incomes
- Access the history of your transactions and transfers
- Check your total expenses and incomes by month and by account
- Transfer money between your accounts, even if the accounts have different currencies
- Vue 3 Composition API
- Pinia Store
- TypeScript
- Vite
- Vitest
- Firebase
- Libraries:
- calc-js
- v-calendal
- font-awesome-icons
In order to save you time, this app is already deployed on Vercel's servers.
❗ Please note that the app may not function as expected locally when running on Vercel's servers.
🔗 https://money-check-lobk-8vtzgso2g-woshigaofushuais-projects.vercel.app/
- Project Description
- Main Features
- Built With
- Deployed in Vercel
- Login Page
- Loading Screen
- Expenses Page
- Incomes Page
- Accounts Page
- Recommended IDE Setup
- Project Setup
- Contacts
In order to use the app, you need to log in with your Google Account. Otherwise, if you try to access any page in the app, you will be redirected back to the login page.
Those types of screen you will see a lot with different messages: "Your data is loading", "Account is being created", "Editing the transaction" etc. They indicate that a process is in progress and the user should wait momentarily.
When you first log in, you will already have two default accounts with two available currencies (Euro and Dollar).
Within the Expenses page, you can open the Categories window by clicking the icon in the top left corner. Here, you can see all categories for expenses (categories for income will be available on the Income page).
In the Categories window, you have options to edit or create a new category with a title, icon, and color.
Also, within the Expenses page, the user can access the Total Expenses window by clicking the chart-pie icon in the right corner. Here, the user can filter expenses by months and accounts:
❗ If you need to find Total Incomes, you can access it by opening the Incomes page and then clicking on the chart-pie icon.
When clicking on the logout button, you will see a confirmation popup window for logging out:
On the Expenses page, you will see accounts. The default number of accounts is two, but you can add more (instructions on how to add accounts will be provided later). The maximum number of accounts displayed on the page is four. If you have more than four accounts, pagination arrows (left/right) will appear to help you navigate through all of them.
On the Expenses page, you can also use the calculator. As soon as you start clicking on the calculator's number buttons, you will see expense categories below it. After you enter the correct amount and click on one of the categories, an expense transaction will be created.
You can also perform mathematical calculations using this calculator if you need to get a result for your expense.
❗ Note: Negative results will not be added to expenses; only positive numbers are allowed. If you get a negative result and try to click on any category, the result will turn red, and a transaction will not be created.
Below the calculator you can see today's and yesterday's transactions with all spends counted.
All transactions can be edited or deleted. Just click on a transaction to open the Editing Transaction window:
In the Editing Transaction window, you can change the account title, category, amount, and date of the expense. After editing, press the confirm button to apply the new data and perform the necessary calculations.
If you want to find and manipulate a transaction that was created neither today nor yesterday, you need to click on the 'History' button. From there, you can filter transactions by months. Once you find the transaction you were looking for, you can edit or delete it:
All of the features from the Expenses page are the same on the Income page, but with one difference: on the Income page, all transaction sums will be added to the accounts instead of subtracted from them.
On the Accounts page, in the Accounts window, you can edit, delete, or create a new account.
When you try to delete an account, you will be notified that all related operations (expense and income transactions, as well as transfers where the deleted account is either a debit or a credit) will be removed
When you are creating or editing an account and don't have the needed currency, you can find the 'Go To Settings' button at the bottom of the page
which will redirect you to Currency Settings, where you can also edit, delete or create a new currency.
Here, you can create transfers by choosing the debit and credit accounts and submitting a form with the date, note, and amount of the transfer.
But if the accounts have different currencies, when you click on the Amount input in the form, you will see an Exchange Rate popup, which you need to fill out to complete the transfer between accounts with different currencies.
After a transfer is completed, if it has today's or yesterday's date, you will see it right above the form at the bottom of the screen. Other transfers can be found by clicking the 'History' button.
All transfers can be edited or deleted. By clicking on a transfer, you can open the editing window and change the debit and credit titles, amount, date, and note of the transaction, or delete the transaction:
❗ Note: When a transfer is deleted, all sums in the debit and credit accounts will be recalculated.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint
Email: efremovmaxim95@gmail.com TG: http://t.me/mackseam