Expense Tracker App with Angular and webMethods

Overview

Managing personal finances is a crucial skill in today’s fast-paced world, yet many people struggle to keep track of their income, expenses, and savings. An Expense Tracker Application provides a simple, intuitive way to record financial activities, identify spending habits, and plan for the future. This Angular-based project combines functionality with an elegant design to help users take control of their finances with ease.

This application offers:

• User Registration and Login: Securely register and log in to access your financial dashboard.
• Earnings, Expenses, and Savings Tracking: Record and review your income and spending with detailed analytics.
• Custom Categories: Create and manage personalized categories for more accurate tracking.
• Profile Management: Upload a profile picture to make your experience more personalized.
• Financial Reports: View financial activities over specific timeframes to gain insights into your habits.

Components used :

• Angular: Used for the frontend development.
• MySQL: Used as the backend database for storing application data.
• ImageKit: Used to store and manage profile pictures.
• webMethods: Used to expose REST APIs for seamless backend integration.
• Tailwind CSS: Used for styling the user interface (UI).

Pre-requisite :

• MySql server should be installed
• webMethods integration should have installed and running.
• Node.js should be installed along with Angular.

Download code base :

• Download webMethods package which contains restAPI to handle requests :
  
  
• Download Angular code base :
  

Get ImageKit credential :

• Click here to navigate to theImageKit.io website.
• Log in using your email.
• Navigate to the Media Library option and create a folder named ‘MoneyTracker’. You can also create a folder with any other name, but ensure that you update it in the Angular environments.ts file. We will cover this later in the article.
• Go to the Developer Options in ImageKit.io and create a credential. Keep this credential safe, as it will be used to upload the profile picture.

Create table and stored procedure :

We need to create few tables and stored procedures to store user events, as well as all user and transaction-related data.
If you have cloned the webMethods package, you will find a SQL file in the config directory. Run this file in your MySQL environment to create the necessary tables and stored procedures required for this project. Additionally there is a category.csv file , you can import it into the category table which will create some default category.

Please note that we are using Icons8 icons for this project, and all credit goes to them for creating such amazing icons.

Get PGP Key details :

We are encrypting and decrypting user credentials using PGP. For this, we need a public key and a private key along with a passphrase. Follow the steps below to generate them:

1. Navigate to a PGP key generator website.
2. Fill in all the required details to create the public and private keys.
3. Once all the details are filled in, click the Generate Key button. This will generate the public and private keys.
4. Download the keys and ensure you securely store the passphrase used to create the keys. The passphrase will be required for decryption.

Get email server details :

When a user registers or resets their password, we verify the user using an OTP. To send the OTP, an email server and credentials are required.

Click here to follow the article with detailed steps on how to obtain the credentials and email server details.

Setup webMethods code :

Angular code setup :

• • Hope you have cloned Angular code , open it in the vs code.
  • Edit src\environments\environment.ts file and replace below value for respective key.
    • baseurl : replace it’s value with integration server host and port.
    • userid: replace this with the Integration Server’s user ID. However, I recommend creating an ACL with the name ‘expense-tracker,’ then creating a group and assigning it to the user. You can use the same credentials for this. The reason for this is that, in the startup service, we have created a service that assigns ACLs to all REST APIs, but ‘expense-tracker’ is hardcoded.
    • password : replace it with server password.
    • imageKitUserId :replace it with imageKit private key.
    • imageKitUserPass: replace it with imageKit public key.
    • imageKitFolder: replace it with imagekit folder.
  • Once environment.ts is ready , you can update environment.prod.ts file based on what will be the configuration for prod, if you are not creating build out of it for prod then leave it.
  • Once we are almost done but we don’t have node module with it’s dependency so we need to install it.
  • Inside root folder of the project open command prompt and run below query, which will install node module with it’s dependencies.

    npm install --legacy-peer-deps

    • Explanation :
      • npm install: This is the standard command to install the dependencies listed in the package.json file of a Node.js project.
      • –legacy-peer-deps: This flag tells npm to ignore any peer dependency conflicts that may arise during the installation process, and instead install the dependencies as if npm v6 were being used, which doesn’t strictly enforce peer dependencies.
  • Once dependencies are installed run below command which will run the angular project and open it in browser.

    ng serve -o

  • Now we are done, you should be able to see the application running and you can use it.