{"id":31052848,"url":"https://github.com/devnamdev2003/angular-expense-tracker","last_synced_at":"2026-05-01T18:33:09.766Z","repository":{"id":286848664,"uuid":"962758912","full_name":"devnamdev2003/angular-expense-tracker","owner":"devnamdev2003","description":"📱 A mobile-first Expense Tracker built with Angular \u0026 Tailwind CSS, featuring dashboards, calendar, budget tracking, and LocalStorage-based data management","archived":false,"fork":false,"pushed_at":"2026-04-04T03:49:32.000Z","size":76684,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-04T05:28:11.486Z","etag":null,"topics":["android-application","angular","expense-manager","expense-tracker","money-manager","spend-analysis","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://devnamdev2003.github.io/angular-expense-tracker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnamdev2003.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-08T16:21:23.000Z","updated_at":"2026-04-04T03:49:35.000Z","dependencies_parsed_at":"2025-07-25T21:05:09.335Z","dependency_job_id":"20929591-74c4-4f25-b7cf-67c959cae935","html_url":"https://github.com/devnamdev2003/angular-expense-tracker","commit_stats":null,"previous_names":["devnamdev2003/expensewise","devnamdev2003/angular-expense-tracker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devnamdev2003/angular-expense-tracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnamdev2003%2Fangular-expense-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnamdev2003%2Fangular-expense-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnamdev2003%2Fangular-expense-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnamdev2003%2Fangular-expense-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnamdev2003","download_url":"https://codeload.github.com/devnamdev2003/angular-expense-tracker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnamdev2003%2Fangular-expense-tracker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32508901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-application","angular","expense-manager","expense-tracker","money-manager","spend-analysis","tailwindcss","typescript"],"created_at":"2025-09-15T01:30:05.351Z","updated_at":"2026-05-01T18:33:09.748Z","avatar_url":"https://github.com/devnamdev2003.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [📘 Expense Tracker](https://exwise.vercel.app/)\n\n\u003e ### Expense Wisely – Where Your Money Stops Playing Hide and Seek!\n\n## 📌 Overview\n\n**Expense Tracker** is a mobile-first financial management application designed to help users easily track their daily and monthly expenses. The application emphasizes a user-friendly UI/UX tailored specifically for smartphones, allowing seamless personal finance management on the go.\n\nThis application leverages **Angular** as the frontend framework and **Tailwind CSS** for responsive and modern UI styling. All user data is stored in **LocalStorage**, making the app lightweight and independent of backend dependencies.\n\n---\n\n\u003ca href=\"https://github.com/devnamdev2003/angular-expense-tracker/raw/refs/heads/main/exwise.apk\"\u003e⬇️ Download APK\u003c/a\u003e | \u003ca href=\"https://exwise.vercel.app/\"\u003e🌐 Live Demo\u003c/a\u003e | \u003ca href=\"https://github.com/devnamdev2003/angular-expense-tracker\"\u003e🔗 GitHub\u003c/a\u003e | \u003ca href=\"https://exwisedoc.vercel.app/\"\u003e📄 Code Documentation\u003c/a\u003e\n\n---\n\n## 🧰 Tech Stack\n\n| Technology           | Purpose                         |\n| -------------------- | ------------------------------- |\n| Angular              | Frontend application logic      |\n| Tailwind CSS         | Styling and responsive UI       |\n| LocalStorage         | Persistent data storage         |\n| Spring Boot          | Backend api logic               |\n\n---\n\n## 📱 Features \u0026 Functionality\n\n### 1. **Dashboard View**\n\n* Upon launch, users are greeted with two interactive graphs:\n  * **Expense Graph**:\n    - Displays a line graph representing user expenses over time.\n    - Supports multiple **time-based views**:\n      - **Daily** – View expenses for individual days.\n      - **Monthly** – View month-wise expense distribution.\n      - **Yearly** – View yearly expense trends.\n    - Includes a **graph representation toggle**:\n      - **Discrete (discrete values)** – Shows period-wise expense values.\n      - **Cumulative** – Shows a running total of expenses over time, useful for understanding overall spending growth.\n    - Graph updates dynamically based on the selected time range and graph mode.\n  * **Category-wise Pie Chart**: Visualizes how the expenses are distributed across different categories (e.g., Food, Travel, Shopping).\n\n---\n\n### 2. **Add Expense View**\n\nAllows users to add new expense entries through a form. Input fields include:\n\n* 💰 **Amount**\n* 📅 **Date \u0026 Time**\n* 🏷️ **Category** (chosen from a dropdown list)\n* 💳 **Payment Mode**\n* 📍 **Location** (chosen from a dropdown list or manually typed)\n* 📝 **Note** (chosen from a dropdown list or manually typed)\n* 💡 **Extra Spending**\n\nAll expenses are stored in the device's **LocalStorage** and reflected immediately in graphs and listings.\n\n---\n\n### 3. **Calendar View**\n\n* Users can view a **monthly calendar** to explore expenses on specific dates.\n* Tap any date to open a **popup modal** displaying all expenses for that day.\n* Navigate across **months and years** to view past or future expenses.\n* Toggle the Show HeatMap switch to highlight each day based on spending intensity.\n  * Days are color-coded based on spending thresholds (e.g. No expense, \u003c threshold, between thresholds, \u003e threshold) for quick insights.\n  * Users can now **customize the threshold amounts** for each heatmap color:\n    * **Red (Rose)** – default  \u003e ₹1000\n    * **Yellow (Amber)** – default ₹500 - 1000\n    * **Green (Emerald)** – default \u003c ₹500\n  * A **summary table** displays each color, the number of days, the total expense, and an **Edit button** for updating the thresholds.\n    * Editing allows users to set a new amount for the corresponding color, immediately updating the heatmap visualization.\n  * Additionally, users can enable a radio option to automatically set threshold values based on their budget, where\n    * Rose represents the average spent per day amount.\n    * Emerald represents the suggested spending per day amount.\n\n---\n\n### 4. **List View**\n\n* Displays all user expenses in a scrollable, and sortable list.\n* Users can:\n\n  * 🔍 **Search** expenses quickly by typing keywords (category, note, or payment mode).\n  * 🧾 **Sort** expenses by date, amount, or category.\n  * 🎯 **Filter** by category, date, extra spending, and payment mode.\n  * 🖱️ Tap any entry to open a **modal** with complete details and options to **edit** or **delete** the expense.\n\n---\n\n### 5. **Budget \u0026 Income Management**\n\nThe **Budget \u0026 Income** module provides a sophisticated financial dashboard that transitions between total income tracking and granular monthly budgeting, along with advanced filtering capabilities for deeper financial insights.\n\n**Key capabilities include:**\n\n* 💼 **Dynamic Financial Modes**\n  * **Income Tracking:** Tracks total accumulated income and overall savings rates.\n  * **Budget Tracking:** Focuses on a specific month's limits to prevent overspending.\n  * The system intelligently calculates metrics based on the active `viewMode`.\n\n* 🔎 **Income Date Range Filtering**\n  * Users can filter income records between a selected **start month and end month**.\n  * Displays income analytics based only on the selected period.\n  * Allows better financial analysis such as:\n\n    * Tracking income trends over time.\n    * Reviewing earnings for specific periods.\n    * Simplifying historical income comparisons.\n\n* 📊 **Advanced Financial Analytics**\n  * **Income Growth:** Automatically calculates the percentage increase or decrease in income compared to the previous month.\n  * **Savings Rate:** Real-time calculation of the percentage of income retained after expenses.\n\n\n* 📅 **Daily Spending Intelligence**\n  * **Allowed/Day:** Your theoretical daily limit based on the total budget and days in the month.\n  * **Spent/Day:** Actual average spending calculated from the day of your first expense to today.\n  * **Suggested/Day:** A dynamic \"correction\" metric that tells you exactly how much you can spend for the remaining days to stay on target.\n\n* 🎨 **Visual Feedback \u0026 Progress**\n  * **Smart Progress Bar:** A multi-state indicator that shifts colors based on your spending velocity:\n    * 🟢 **Green to Indigo:** (Below 50%) – Safe zone.\n    * 🟠 **Orange:** (50%–90%) – Warning zone.\n    * 🔴 **Red:** (Above 90%) – Critical limit / Exceeded.\n  * **Contextual Status:** Text insights (e.g., *\"Excellent! Saving \u003e 50%\"* or *\"⚠️ You have exceeded your limit!\"*).\n\n* 🛠️ **Transaction Management**\n  * **Full CRUD Operations:** Add, edit, and delete income/budget records.\n  * **Validation Layer:** Integrated error handling for:\n    * Maximum amount limits\n    * Required notes\n    * Month selection validation\n---\n\n### 6. **Settings View**\n\nProvides customization and utility options for better personalization:\n\n* 🎨 **Theme Mode Toggle** — Switch between **Dark** and **Light** modes\n* ⬇️ **Download Data** — Export expenses in **PDF**, **JSON**, or **Excel** formats within a selected date range. Users can also choose **All Data** to export every expense record\n* 📤 **Import Data** — Upload and import expense data into the application\n* 🔄 **Update App** — Update the application to the latest available version\n* ☁️ **Data Backup** — Enable automatic or manual data backup for data safety. When enabled, a backend API runs automatically in the background to upload your data to the database.\n* ❓ **[Help \u0026 Support](https://devnamdev2003.github.io/angular-expense-tracker/public/help.html)** — Redirects to the external help center for FAQs, guides, and customer support\n* ➕ **Add Category** — Create custom categories for better expense organization\n* ✏️ **Edit Category** — Update or rename existing categories\n* ❌ **Delete Category** — Remove unused or incorrect categories\n\n---\n\n## ☁️ 7. Cloud Backup View\n\nThe **Cloud Backup** page provides secure cloud synchronization and backup management for your financial data.\nThis page can be accessed from **Settings → Cloud Backup** and helps users protect their data against device loss, app reinstall, or accidental deletion.\n\n### 🔐 Key Features\n\n#### ✅ Auto Backup\n\n* Enables **automatic periodic backup** of user data to the cloud.\n* Once enabled, the app automatically uploads updated data in the background.\n* Users can toggle this option anytime.\n\n#### ☁️ Cloud Synchronization\n\n* Allows users to **manually sync current local data to the cloud**.\n* Useful when:\n\n  * You want an instant backup.\n  * You updated important data recently.\n* Includes a loading indicator during sync.\n\n#### 🔑 Get Backup Key\n\n* Retrieves a **secure cloud backup key** linked to the user’s stored data.\n* This key is required to restore data later.\n* Users can:\n\n  * View the key securely in a modal.\n  * Copy it to clipboard for safekeeping.\n\n\u003e ⚠️ Important: Keep this key safe. Without it, data restoration may not be possible.\n\n#### 🔄 Restore From Backup Key\n\n* Allows users to **restore data from the cloud** using their backup key.\n* Process includes:\n\n  * Entering the backup key.\n  * Confirming restoration.\n  * Automatic replacement of current local data with cloud data.\n* Includes:\n\n  * Data validation before restore.\n  * Automatic rollback if restoration fails.\n\n---\n\n### 🔒 Data Safety Measures\n\n* Backup key–based authentication ensures secure data access.\n* Local data is backed up before restore to prevent accidental loss.\n* Invalid or corrupted backup data is rejected automatically.\n\n---\n\n### 📌 Typical Usage Flow\n\n1. Enable **Auto Backup** for continuous protection.\n2. Use **Sync to Cloud** before switching devices.\n3. Save your **Backup Key** securely.\n4. Use **Restore from Backup Key** when reinstalling or changing devices.\n\n\n## 📱 Mobile-First Design\n\n* The application is specifically designed for **mobile devices**.\n* Features responsive components, intuitive touch controls, and visually appealing UI optimized for small screens.\n* Not intended for laptop or desktop usage (though it works as PWA).\n\n---\n\n## 🗃️ Data Storage\n\nAll user data is stored using the **browser’s LocalStorage API**, ensuring:\n\n* ✅ No need for a backend or server\n* ⚡ Fast read/write operations\n* 🔒 Data stays on the user's device for privacy and control\n\n---\n\n## 📈 User Flow Summary\n\n1. **Launch App** → View Expense Graphs (Toggle between Month/Day).\n2. **Add Expenses** via the ➕ tab.\n3. Navigate to:\n\n   * **Calendar** to view per-date expenses.\n   * **List** for detailed log with **search, filter, and sort** options.\n   * **Budget** to monitor spending.\n   * **Settings** for customization.\n\n---\n\n## 📄 Code Documentation\n\nFor developers and contributors, detailed code-level documentation is available here:\n👉 [Documentation](https://devnamdev2003.github.io/angular-expense-tracker/documentation/)\n\n---\n\n## 🖼️ Screenshots\n\n\u003cdiv style=\"\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n    justify-items: center;\n    padding: 16px;\n\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/home.jpg\" alt=\"home\" style=\"width: 200px; border-radius: 8px;\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/add.jpg\" alt=\"add\" style=\"width: 200px; border-radius: 8px;\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/calendar.jpg\" alt=\"calendar\" style=\"width: 200px; border-radius: 8px;\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/settings.jpg\" alt=\"settings\" style=\"width: 200px; border-radius: 8px;\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/budget.jpg\" alt=\"budget\" style=\"width: 200px; border-radius: 8px;\"\u003e\n    \u003cimg src=\"https://exwise.vercel.app/assets/appScreenshot/list.jpg\" alt=\"list\" style=\"width: 200px; border-radius: 8px;\"\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnamdev2003%2Fangular-expense-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnamdev2003%2Fangular-expense-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnamdev2003%2Fangular-expense-tracker/lists"}