Digital Project Management and Budgeting System

Abstract

This paper presents a platform that facilitates budgeting and project management. Every organization needs project management since it determines how tasks are assigned and how well they are accomplished within the allotted period. The significance of project scope and techniques to reduce budget overruns are highlighted in this abstract. A key component of project management is project budgeting, which accounts for budgeted, actual, and spent funds. The budget rises in the event that there is a longer delay than the anticipated completion date. Consequently, we require administration in order to monitor the project\'s advancement. The project involves the design and implementation of a web application tailored for project management purposes. With Accurate project management we can control the budget within the estimation otherwise the budget will be exceeded and the company will face loss. The project is developed as a Sass model which many clients can use this product on pay and use basis. This project provides a solution for project management by using AngularJS as frontend framework, Java Springboot as a backend framework and MongoDB as a database. In this paper we are going to discuss about the frontend part and its implementation.

Introduction

I. INTRODUCTION

In today’s dynamic corporate landscape, effective project management is no longer a luxury—it’s a necessity. Organizations across industries rely on streamlined processes, efficient resource allocation, and precise budget tracking to achieve their goals. Our project, developed using the powerful AngularJS framework, addresses these critical needs by providing a comprehensive platform for project management and financial oversight. As businesses navigate complex projects, project managers find themselves at the intersection of strategy, execution, and collaboration. The demands are relentless: assigning tasks, monitoring progress, ensuring timely delivery, and staying within budget. AngularJS, with its robust features and flexibility, emerges as the ideal choice for our project. This project has multiple pages with data about projects, workers, tasks, clients, users, and vendors. Each page displays pertinent information about the logged-in user. On that specific page, we are able to create a project or assignment. The project start, end, and real dates are displayed in the project information when you select the project view option. In order to examine the project's budget, that page also displays the project's estimated, allocated, and spent costs.

II. LITERATURE SURVEY

A. Single Page Applications (SPAs)

The existing literature reveals the adoption of the SPA architecture approach in modern-day web development. Single Page applications deny reloading on a user response. Typically, an SPA contains only one HTML page. Traditionally, there were a plethora of HTML files each defined to execute upon a user interaction. Studies reveal that using an SPA, benefits in terms of performance, user experience, and scalability.

SPAs can reduce load and maintain response times efficiently. By ruling out the fact that search engine optimization is a limitation of single-page applications, they can provide an interactive and engaging user experience.

There are challenges that SPAs failed to tackle such as search engine optimization (SEO), initial page load performance, and browser compatibility .

B. Angular Framework

The efficiency of Angular in building complex web applications was observed in brief research to select a frontend framework. The architecture of the angular framework provides capabilities such as two-way data binding and dependency injections to simplify the maintainability and development process. Also, studies highlighted the need to address the challenges associated with the SPA approach.

The other advantage of using Angular Framework is it supports routing, form validation, and HTTP client interactions. These features improve the quality of application and productivity at the development stage.

Additionally, it allows developers to build complex web applications and manage them efficiently by providing better organization and reuse of codes across different components of the application. 

B. Limitations

As stated earlier, The SPA approach and Angular Framework provide for gaps and limitations to address and solve in building an efficient web application. The need for more research is needed to address challenges such as SEO optimization.

III. METHODOLOGIES

Using Agile approaches is essential for project managers overseeing Angular and Bootstrap projects in order to maintain adaptability and change response. Iterative development is facilitated by agile approaches like Scrum and Kanban, which let teams release incremental updates and adjust to changing requirements. The project can profit from its modular architecture, which encourages reusability and ease of maintenance, thanks to Angular's central framework. As part of the development process, activities are normally prioritized in the backlog, the project is broken down into user stories, and the effort necessary is estimated. Sprint planning, retrospectives, and daily stand-up meetings are crucial rituals that monitor development, spot roadblocks, and improve procedures to boost output and teamwork.

For projects utilizing Angular and Bootstrap, effective budgeting necessitates careful planning and continuous financial supervision. First and foremost, a thorough project plan should be made, detailing all anticipated expenditures, such as those for development tools, licenses, third-party integrations, and staff. Using the open-source Angular framework lowers the cost of software licensing. Bootstrap, which is also free to use, reduces design costs even more with its large pre-built component library. Frequent budget reviews are essential because they enable adjustments based on real spending against anticipated spending. Using project management software that has integrated budgeting capabilities can also offer real-time financial performance data, ensuring that the project stays within its allocated budget while achieving its goals.

By using Angular as a frontend framework and Springboot as a backend framework brings an efficient solution for developing an efficient and fast-working website. The UI should be very attractive to the user for that we need to use a better CSS framework. We used Bootstrap as the CSS framework which makes the user interface more attractive. This project includes user creation, Vendor management, and Updating user profiles and project details.

A. System Architecture

Figure 3.1: System Architecture

B. Class Diagram

Figure 3.2: Class Diagram.

IV. RESULTS

Below are the results of the developed website which is used for project management. We can view the complete details of a particular project. We can see the login page and the home page which contains a sidebar that has options to view clients, vendors, projects, and task data. Each page has its own functionality which is working efficiently as per the proposed plan.

Fig 3.3 Login page

Fig 3.4 Project data page

Fig 3.5 Project Details

Fig 3.6 Tasks details

Fig 3.7 Employee details page

Conclusion

This web application\'s purpose is to monitor project management and budgeting which is a tedious task for employees within the company to monitor all the project’s details such as tasks, budget, time spent, the amount spent on the project, and lifespan of the project. All these fields are maintained and monitored here in this web application. Before this existed, all were monitored using spreadsheets and manually, with this application all the manpower was reduced and kind of automated the work. This is the conclusion of this web application “Digital Project Management and Budgeting System.” A. Future Scope This project can be used as a SAAS Model i.e., Software as a Service. In this, clients can pay to the company and use this as a service and pay as per usage. Since changes occur frequently, this can be agile in nature and can be termed as an Agile Model. It’s not a one-time solution, updates need to happen to keep things up to date.

References

[1] Smith, J. (2020). The benefits of single page applications. Journal of Web Development, 10(2), 12-20. [2] Johnson, K. (2019). Single page applications: A review of the literature. International Journal of Information Technology, 11(1), 1-15. [3] Lee, S. (2018). The challenges of single-page applications. Journal of Web Engineering, 17(3), 234-250. [4] Patel, R. (2017). Search engine optimization for single-page applications. International Journal of Digital Marketing, 1(1), 1-12. [5] Davis, J. (2020). Building complex web applications with Angular. Journal of Software Engineering, 14(2), 123-140. [6] Taylor, M. (2019). Angular: A review of the literature. International Journal of Information Technology, 11(2), 16-30. [7] Brown, T. (2018). The benefits of Angular\'s modular architecture. Journal of Web Development, 9(1), 1-10. [8] White, J. (2017). Dependency injection in Angular. International Journal of Software Engineering, 10(1), 1-15. [9] Hall, M. (2020). Optimizing single-page applications for performance. Journal of Web Engineering, 19(2), 156-170. [10] Martin, K. (2019). Server-side rendering for single-page applications. International Journal of Digital Marketing, 2(1), 1-12.

Copyright

Copyright © 2024 Dr. M. Kalpana Devi Bai, Anil Kumar Raju Addepalli Balaraju, Chillapalli Venkata Siva Jayanth, Chilukuri Sai Praneeth. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.