sagaust / budget_allocation_app

Budget Allocation App

Overview

Welcome to the Budget Allocation App, an interactive web application designed to manage and track budget allocations across various departments. Built with React JS, this app stands out for its dynamic user interface, efficient data management, and responsive design. It's perfect for individuals or businesses looking to streamline their budgeting process.

Features

• Dynamic Budget Setting: Set and edit the overall budget with real-time adjustments.
• Department-wise Allocation: Allocate budgets to different departments like Marketing, Finance, Sales, HR, IT, and more.
• Real-time Budget Updates: Changes in allocations and budgets are reflected immediately.
• Interactive UI with React JS: Utilizes the power of React for a seamless user experience.
• Responsive Design: Compatible with various devices and screen sizes.

Key Features and Screenshots

1. User Can Select a Department from the Dropdown and Allocate Amount from the Initial Budget

2. User Can Change the Currency

3. The Change of Currency Reflects Across Various Components on the App

4. Dashboard with Allocation in Pounds

5. The Dashboard After Departmental Allocation

6. User Can Increase Budget Allocation Using the Plus Button

7. User Can Reduce or Add to the Amount Already Budgeted for a Department

8. Already Allocated Budgets Can Be Deleted

9. Error Handling: When the Budget Value Allocated Is Lower Than the Spending

10. Error Handling: When the Allocation to a Department Exceeds the Remaining Budget

Technologies Used

• React JS: For building the user interface.
• Bootstrap: For styling and responsive design.
• Font Awesome Icons: For intuitive icons.
• Netlify: For deployment and hosting.

Installation and Setup

To get this project up and running on your local machine, follow these steps:

1. Clone the Repository

git clone https://github.com/Sagaust/Budget_Allocation_App.git

2. Navigate to the Project Directory

cd Budget_Allocation_App

3. Install Dependencies

npm install -s

4. Start the Development Server

npm start

The app should now be running on http://localhost:3000.

Usage

• Set Initial Budget: Start by setting an initial budget for your allocations.
• Allocate Budget: Select a department and allocate a specific budget to it.
• Edit Allocations: Increase, decrease, or delete allocations as needed.
• View Budget Details: Observe the total budget, remaining budget, and total expenses.

Contributing

Contributions to enhance the Budget Allocation App are welcome. If you have suggestions or improvements, feel free to fork the repository and submit a pull request.

1. Fork the Repository
2. Create a New Branch (git checkout -b feature/AmazingFeature)
3. Commit Your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Augustine Farinola - LinkedIn: https://www.linkedin.com/in/augustine-farinola-31230a46/ Email- [email protected]

Project Link: [https://github.com/Sagaust/Budget_Allocation_App.git ]

Live Demo: