Skip to content

Ranjini-ctrl/Expense-Tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

expense.tracker.video.mp4

Real-Time Expense Tracker Dashboard

A comprehensive web application for tracking personal expenses with real-time synchronization across multiple browser tabs, interactive visualizations, and financial insights.

To view project-click here[https://staging.d3cjgvjkcc358z.amplifyapp.com/]

Features

User Profile Management

  • Personal Information: Set and update your name and monthly salary
  • Financial Overview: View your remaining balance and monthly savings at a glance
  • Persistent Storage: User profile data is saved between sessions

Expense Tracking

  • Easy Input: Add expenses with amount, category, date, and optional description
  • Categorization: Organize expenses into predefined categories
  • Date Tracking: Record when each expense occurred

Visualization

  • Category Breakdown: Interactive pie chart showing spending distribution by category
  • Spending Trends: Line chart displaying expense patterns over time
  • Summary Statistics: Quick view of total, weekly, and daily expenses

Advanced Filtering

  • Time-Based Filters: Filter by today, this week, this month, or custom date range
  • Category Filters: Focus on specific expense categories
  • Combination Filters: Apply multiple filters simultaneously for detailed analysis

Real-Time Synchronization

  • Multi-Tab Support: Changes made in one tab instantly appear in all open tabs
  • No Server Required: Uses BroadcastChannel API for client-side synchronization
  • Immediate Updates: See changes to expenses and profile data in real-time

User Experience

  • Dark Mode: Toggle between light and dark themes
  • Responsive Design: Works on desktop, tablet, and mobile devices
  • Interactive Notifications: Get feedback when actions are completed
  • Intuitive Interface: Clean, modern design for easy navigation

Technologies Used

  • HTML5: Structure and semantic markup
  • CSS3: Styling with custom properties for theming
  • JavaScript (ES6+): Core application logic
  • Chart.js: Interactive data visualization
  • BroadcastChannel API: Real-time synchronization across tabs
  • localStorage API: Persistent data storage
  • Font Awesome: Icons and visual elements

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors