├── src ├── components │ ├── Header.vue │ ├── Balance.vue │ ├── IncomeExpenses.vue │ ├── TransactionList.vue │ ├── AddTransaction.vue │ └── CategoryReport.vue ├── main.js ├── assets │ └── style.css └── App.vue ├── index.html ├── vite.config.js ├── package.json └── README.md /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expense Tracker 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | export default defineConfig({ 7 | plugins: [ 8 | vue(), 9 | ], 10 | resolve: { 11 | alias: { 12 | '@': fileURLToPath(new URL('./src', import.meta.url)) 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import Toast from 'vue-toastification'; 3 | import 'vue-toastification/dist/index.css'; 4 | import './assets/style.css'; 5 | import 'bootstrap/dist/css/bootstrap.min.css'; 6 | import 'bootstrap/dist/js/bootstrap.bundle.min'; 7 | import App from './App.vue'; 8 | 9 | const app = createApp(App); 10 | app.use(Toast); 11 | app.mount('#app'); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expense-tracker", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^5.3.0", 12 | "chart.js": "^4.5.0", 13 | "vue": "^3.3.4", 14 | "vue-chartjs": "^5.3.2", 15 | "vue-toastification": "^2.0.0-rc.5" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.4.0", 19 | "vite": "^4.4.11" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Balance.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | -------------------------------------------------------------------------------- /src/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | :root { 4 | --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | #app 12 | { 13 | width: 35em; 14 | } 15 | 16 | body { 17 | background-color: #f7f7f7; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | min-height: 100vh; 23 | margin: 0; 24 | font-family: 'Lato', sans-serif; 25 | font-size: 18px; 26 | } 27 | 28 | .container { 29 | border: 1px solid #d8d8d8; 30 | } 31 | 32 | #delbtn { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | width: 1em; 37 | height: 1em; 38 | padding: 0; 39 | border: none; 40 | background-color: transparent; 41 | color: #dc3545; 42 | font-size: 1em; 43 | font-weight: 700; 44 | margin-left: 0.5em; 45 | } 46 | 47 | .list li:hover .delete-btn { 48 | opacity: 1; 49 | } 50 | 51 | #list-exp 52 | { 53 | display:flex; 54 | } 55 | 56 | table 57 | { 58 | border: 1px solid #c5c5c5; 59 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Expense Tracker built with Vue.js & Composition API 2 | 3 | ![screen-capture](https://github.com/user-attachments/assets/af59ae9f-0d98-4bb5-82a0-dcb72e507c66) 4 | 5 | The Expense Tracker allows users to manage their transactions, providing insights into their balance, income, and expenses. It includes features for adding new transactions, viewing a list of transactions, and deleting transactions. The application persists data locally using localStorage. 6 | 7 | ## Added Features 8 | 9 | **Real-Time Balance Calculation**: Instantly updates the total balance based on recorded transactions. 10 | 11 | **Income & Expense Tracking**: Separately categorizes and computes total income and expenses. 12 | 13 | **Interactive Transaction List**: Displays all transactions with options to delete specific entries. 14 | 15 | **Local Data Storage**: Uses localStorage to persist transaction data directly in the user's browser. 16 | 17 | **Transaction Categorization**: Allows users to assign categories to transactions for better organization. 18 | 19 | **Category-Based Reporting**: Provides a dedicated report section showing income and expense breakdowns by category. 20 | 21 | ## Installation 22 | 23 | - Run npm install to install dependencies 24 | - Run npm run dev to launch the local server 25 | 26 | ## Live Demo 27 | 28 | https://expense-tracker-flame-six.vercel.app/ 29 | -------------------------------------------------------------------------------- /src/components/IncomeExpenses.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 66 | -------------------------------------------------------------------------------- /src/components/TransactionList.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 62 | -------------------------------------------------------------------------------- /src/components/AddTransaction.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 71 | -------------------------------------------------------------------------------- /src/components/CategoryReport.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 54 | 55 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 116 | --------------------------------------------------------------------------------