A sleek and responsive web application designed to help you effortlessly manage and visualize your monthly and yearly expenses. Built with modern web technologies, this app provides an intuitive interface for tracking bills, analyzing spending habits with interactive charts, and keeping your financial data organized.
- Intuitive Bill Management: Easily add new bills with details like name, amount, date, and a descriptive icon.
- Dynamic Data Visualization: Interactive line charts provide a clear view of your spending, with options to toggle between daily statistics for a selected month or an overview of the entire year.
- Monthly & Yearly Views: Seamlessly switch between a detailed view of a specific month and a high-level summary of your annual expenses.
- Key Statistics: At-a-glance cards show your total spend, the number of bills, and the average bill amount for the selected period.
- Data Persistence: Your billing data is automatically saved to your browser's
localStorage, so your information is there when you return. - Import & Export: Easily back up your data by exporting it as a JSON file, or import existing data to get started quickly.
- Fully Responsive: A clean, mobile-first design ensures a great user experience on any device, from desktops to smartphones.
- Framework: React
- Build Tool: Vite
- Styling: Tailwind CSS
- Charts: Chart.js with react-chartjs-2
- Icons: Lucide React
To get a local copy up and running, follow these simple steps.
You need to have Node.js (version 14 or later) and npm installed on your machine.
-
Clone the repository:
git clone [https://github.com/your-username/billing-tracker.git](https://github.com/your-username/billing-tracker.git) cd billing-tracker -
Install NPM packages: This will install all the necessary dependencies for the project.
npm install
-
Run the development server: This command starts the Vite development server, usually on
http://localhost:5173.npm run dev
You should now be able to view and interact with the application in your web browser!
The project follows a standard Vite + React structure, with components and utilities organized for clarity and scalability.
billing-tracker/ ├── public/ ├── src/ │ ├── components/ # Reusable React components (Header, BillList, etc.) │ ├── utils/ # Helper functions, icon maps, and chart configurations │ ├── App.jsx # Main application component and state logic │ ├── index.css # Tailwind CSS directives and global styles │ └── main.jsx # Application entry point ├── package.json ├── tailwind.config.js # Tailwind CSS configuration └── vite.config.js # Vite configuration