Money Check

📜 Project Description

This project was created to track your expenses and income, so you can always be aware of your cash flow and account balances.

‼️ Note: In order to use the app, you need to log in with your Google Account.

🧾 Main Features :

• 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

🧱 Built With :

• Vue 3 Composition API
• Pinia Store
• TypeScript
• Vite
• Vitest
• Firebase
• Libraries:
  • calc-js
  • v-calendal
  • font-awesome-icons

Deployed in Vercel

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/

Table of Contents

• Project Description
• Main Features
• Built With
• Deployed in Vercel
• Login Page
• Loading Screen
• Expenses Page
  • Expenses Page => Categories Window
  • Expenses Page => Total Expenses
  • Expenses Page => Logout
  • Expenses Page => Accounts
  • Expenses Page => Calculator
  • Expenses Page => Transactions
  • Expenses Page => History
• Incomes Page
• Accounts Page
  • Accounts Page => Accounts Window
  • Accounts Page => Accounts Window => Currency Settings
  • Accounts Page => Transfers
• Recommended IDE Setup
• Project Setup
• Contacts

📷 Screenshots

1️⃣ Login Page

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.

2️⃣ Loading Screen

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.

3️⃣ Expenses Page

When you first log in, you will already have two default accounts with two available currencies (Euro and Dollar).

Expenses Page => Categories Window

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.

Or just delete a category:

Expenses Page => Total Expenses

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.

Expenses Page => Logout

When clicking on the logout button, you will see a confirmation popup window for logging out:

Expenses Page => Accounts

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.

Expenses Page => Calculator

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.

Expenses Page => Transactions

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.

Expenses Page => History

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:

4️⃣ Incomes Page

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.

5️⃣ Accounts Page

Accounts Page => Accounts Window

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

Accounts Page => Accounts Window => Currency Settings

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.

Accounts Page => Transfers

Transfers Window View

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.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

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:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

📬 Contacts

Email: efremovmaxim95@gmail.com TG: http://t.me/mackseam