Monthly Spending Visualizer

This is a simple React web application that allows users to input their monthly spending on different categories (food, clothing, saving, and rent) and visualizes the distribution of their spending using a bar chart.

Features

• Input Form: Users can enter their monthly spending for each category through a user-friendly input form.
• Chart Visualization: The application dynamically generates a bar chart to visually represent the distribution of spending across different categories.
• Local Storage: User data is stored locally in the browser's storage, allowing users to revisit the page and see their previously entered data.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/monthly-spending-visualizer.git
   cd monthly-spending-visualizer

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Usage

1. Open your web browser and navigate to http://localhost:5173/.
2. Enter your monthly spending for each category (food, clothing, saving, and rent) in the input fields.
3. Click the "Save" button to save your data and update the chart.
4. Optionally, you can click the "Cancel" button to clear all input fields.
5. The chart will dynamically update to display your spending distribution.

Dependencies

• React: A JavaScript library for building user interfaces.
• Chart.js: A JavaScript library for creating charts.
• react-chartjs-2: A React wrapper for Chart.js.

Contributing

Contributions are welcome! If you have suggestions for improvements, feel free to create an issue or submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgements

• Thanks to the Chart.js team for their amazing charting library.
• Thanks to the React team for their powerful UI library.

Contact

For any inquiries, please contact [[email protected]].