Skip to content

Repository files navigation

Expense Tracker

Overview

Expense Tracker is a modern web application built with React and AWS services that helps users manage daily expenses, monitor budgets, and analyze spending habits through an intuitive dashboard.

The application supports local storage for offline usage and optional AWS integration for cloud-based data storage and synchronization.


Features

Expense Management

  • Add, edit, and delete expenses
  • Track payment methods
  • Organize expenses by category
  • Record expense descriptions and dates

Dashboard

  • Responsive user interface
  • Mobile-first design
  • Light and dark themes
  • Quick access to recent expenses

Analytics

  • Spending breakdown by category
  • Monthly spending trends
  • Summary statistics
  • Interactive charts and reports

Budget Management

  • Set monthly budgets
  • Monitor budget utilization
  • Spending progress indicators

Search and Filtering

  • Search expenses by description
  • Filter by category
  • Filter by date range
  • Real-time search results

Data Management

  • Local storage support
  • JSON export and import
  • Optional AWS DynamoDB integration
  • Multi-currency support

Technologies Used

Technology Purpose
React Frontend development
Vite Build tool
Tailwind CSS Styling
React Router Client-side routing
Recharts Data visualization
DynamoDB Cloud database
Amazon S3 Static website hosting
CloudFront Content delivery
CloudFormation Infrastructure provisioning

Project Structure

expense-tracker/
├── src/
├── public/
├── aws/
├── package.json
└── README.md

Getting Started

Prerequisites

  • Node.js 16+
  • npm
  • AWS CLI (optional)
  • AWS Account (optional)

Installation

npm install

Start Development Server

npm run dev

Build

npm run build

AWS Integration

The application optionally supports:

  • Amazon DynamoDB
  • Amazon S3
  • Amazon CloudFront
  • AWS CloudFormation
  • Amazon Cognito

Local development works without AWS configuration using browser local storage.


Applications

  • Personal expense management
  • Budget tracking
  • Spending analysis
  • Financial planning
  • Expense reporting

Learning Outcomes

This project demonstrates:

  • React application development
  • State management using Context API
  • Responsive UI development
  • Data visualization
  • AWS cloud integration
  • Local and cloud-based data storage
  • Component-based architecture

Future Enhancements

  • User authentication
  • Recurring expenses
  • Shared budgets
  • Receipt uploads
  • Notification reminders
  • Financial goal tracking
  • Mobile application

Conclusion

Expense Tracker is a modern expense management application that combines a responsive React frontend with optional AWS cloud services to provide users with an efficient way to manage expenses, monitor budgets, and visualize spending patterns.

About

A full-stack expense tracker built with React and AWS, featuring expense management, budgeting, analytics, and optional cloud synchronization.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages