This blog is dedicated to the creating of a advanced budgeting web application project. When i normally start a project i create a scope, features and then i outline phases so i know i'm on track below is my scope , features i'm going to be creating.

Scope

The budgeting web application is to provide a comprehensive management tool that can offer personalised budgeting recommendations. The website will help users track their income and expenses, identify areas to reduce spending ,and creating a customised budget based on their own situation.

fEATURES

  1. User Authentication and Security: Allow users to create a account and securely log in and encrypt data. 2FA Implementation.
  2. Bank Integration and Transaction Analysis.
  3. Personalised Budgeting: Collect user details such as rent , transport, food expenses.
  4. Budget Calculations and Recommendations: Display a summary of expenses.Calculates and suggest budget allocation based on user input and transaction analysis.
  5. Budget Targets: If you want a retirement fund of 1 million set a target and see how much you need to save. How much you need to save for a emergency fund.

Ok most developers use a project management system to track their progress throughout each phase however since i'm solo developing i will not and just stick to each phase then move on to the next.

pHASE 1: Setup Environment

  • Install Vscode or a text editor.
  • Install XAMPP.
  • We will be needing a database for this project, i will be using MySQL it comes preinstalled in XAMPP so does PHP, on the extension of using mysql, workbench is a gui for mysql which is free.

Phase 2: Designing Mockups

  • I will be using figma at this time it is free, it  helps in designing what your website will look like before you jump into development.
  • Ensure the layout is reponsive for mobile and desktop views.

Phase 3: Developing User Interface

  • Ok when im tasked with creating a project like this when i get to this stage of actually developing the application , i like before i do any backend code / server side code is to create the entirety of the user interface , so we can test the server code when developing. The User interface doesn't have to be pretty or professional because i'm no designer either.

Phase 4: User Authentication

  • Create user registration and login forms.
  • Set up 2FA we can use google or outlook as a alternative sign in method.
  • Implement secure data storage and password hashing.

Phase 5: Bank Integration and Transaction Analysis

  • Research a banking API provider.
  • Implement functionality to connect our bank account and fetch transaction to the website.
  • Develop a algorithm to categorise each transaction in to predefined categories for example  rent , food etc.
  • Store the data in the database securely hashing and salting passwords  and other personal information used.

Phase 6: Personalised budgeting

  • Create forms within the user interface to collect user input such as rent , food expenses etc.
  • Store that in the database.
  • Develop algorithms to calculate personalised budgets based on user input and transactions.
  • Create a syste m that provides budgeting recommendations based on user input and transactions.

Phase 7: Budget Targets and Recommendations

  • Develop functionality to allow users to set financial goals (e.g., retirement fund, emergency fund).
  • Implement algorithms to calculate how much users need to save or invest to meet their targets.

Phase 8: Backend to Frontend Integration

  • Now we will need to integrate the backend with the frontend to visualize the budgeting , i'm thinking we use charts and graphs for this part.
  • Generate Financial reports that we can download as PDF files which are monthly and yearly.

Phase 9: Testing and Debugging

  • Now this is where we fix every bug we can possibly find and we let family,friends try the website which will gain us insights on what to improve.

Phase 10: Deployment

  • I will deploy the website to hosting service for instance aws

The length of each phase does not outline every piece of code that needs to be developed,software that needs to be installed. Below this text i will list software, frameworks i will use.In the next part of this blog i will design the user interface within Figma.