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.
- 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.
-
Clone the repository:
git clone https://github.com/yourusername/monthly-spending-visualizer.git cd monthly-spending-visualizer
-
Install dependencies:
npm install
-
Start the development server:
npm start
- Open your web browser and navigate to
http://localhost:5173/
. - Enter your monthly spending for each category (food, clothing, saving, and rent) in the input fields.
- Click the "Save" button to save your data and update the chart.
- Optionally, you can click the "Cancel" button to clear all input fields.
- The chart will dynamically update to display your spending distribution.
- 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.
Contributions are welcome! If you have suggestions for improvements, feel free to create an issue or submit a pull request.
This project is licensed under the MIT License.
- Thanks to the Chart.js team for their amazing charting library.
- Thanks to the React team for their powerful UI library.
For any inquiries, please contact [baffoebarrister23@gmail.com].