DompetHub: AI-Powered Expense Tracker

DompetHub is a modern, serverless web application designed to help you track your expenses and income effortlessly. Leveraging the power of AI, you can add transactions using natural language via the Web Dashboard or our Telegram Bot. The application provides insightful daily and monthly financial overviews, with all data securely stored in the cloud.

You can try the app here: https://dompethub.app

Features

• AI-Powered Transactions: Add expenses and income by typing in plain English or Bahasa Indonesia (e.g., "beli kopi 15k" or "monthly salary 5jt").
• Omnichannel AI Bot (Telegram): Seamlessly log transactions and ask for personalized financial advice directly from your Telegram chat.
• Secure User Authentication: Each user has their own private account, powered by Amazon Cognito.
• Monthly & Daily Statistics: Visualize your financial health with charts for monthly income vs. expenses and daily spending breakdowns.
• Daily Transaction View: Browse your transaction history day by day with easy navigation.
• Full CRUD Functionality: Manually add, edit, or delete any transaction to ensure your records are always accurate.
• Localized for IDR: All currency is displayed in Indonesian Rupiah (Rp).

Tech Stack

• Frontend: React.js, Tailwind CSS (via CDN), Recharts
• Backend (Serverless on AWS):
  • Authentication: Amazon Cognito
  • Database: Amazon DynamoDB
  • API: Amazon API Gateway
  • Compute: AWS Lambda (Python)
  • AI/NLP: Amazon Bedrock (Anthropic Claude models) / Groq API (LLaMA-3)
  • Integration: Telegram Bot API Webhook

System Architecture

DompetHub uses a fully serverless, event-driven architecture on AWS, integrating web and Telegram interfaces with AI processing.

1. Web Application Flow

1. User logs in to the React Frontend.
2. Amazon Cognito verifies the identity and returns a JWT Token.
3. The frontend calls the API (request data, add transactions) to API Gateway by attaching the JWT.
4. Cognito Authorizer in API Gateway validates the token.
5. If valid, the request is forwarded to AWS Lambda (Python).
6. Lambda reads/writes specific data belonging to the user (userId partition key) in DynamoDB and responds to the Frontend.

2. Telegram Bot Integration & AI Flow

1. User sends a message to the Telegram bot.
2. Telegram sends a POST payload to the API Gateway Webhook Endpoint.
3. This triggers the Telegram Webhook (AWS Lambda).
4. Anti-Spam & Auth Check: Lambda checks if the message is outdated (via timestamp) and checks the TelegramLinks table in DynamoDB to match the Telegram chat_id with the Cognito userId.
5. Unified AI Routing: The user's message and their financial data context (Assets, Budgets, Current Cycle Transactions) are sent to the Groq API / Bedrock.
6. The LLaMA-3 / Claude model analyzes whether the message is a New Transaction or an Advisor Query.
7. If Transaction: Lambda saves the data to the Transactions table and updates the balance in Assets.
8. If Query: Lambda sends back a formatted analytical text reply to Telegram.

Setup and Installation

1. Backend (AWS)

Before running the frontend, the AWS backend must be set up. This involves configuring several services that work together.

Required Services:

1. Amazon Cognito: Create a User Pool to manage users.
2. Amazon DynamoDB: Create a Transactions table to store data.
3. IAM: Create a Role with permissions for Lambda to access DynamoDB and Bedrock.
4. Amazon Bedrock: Enable model access for the Anthropic Claude models.
5. AWS Lambda: Create and deploy the Python code for the six functions:
   • processTransactionTextFunction
   • getTransactionsFunction
   • getStatsFunction
   • addTransactionFunction
   • updateTransactionFunction
   • deleteTransactionFunction
   • telegramWebhookFunction
6. Amazon API Gateway: Create a REST API with the necessary resources and methods, link them to the Lambda functions, and secure them with the Cognito authorizer.

2. Frontend (Local Development)

1. Clone the repository:

   git clone https://github.com/zaribae/spendwise-expense-tracker-app.git
   cd spendwise-expense-tracker-app

2. Install dependencies:

   npm install

3. Configure AWS Credentials:

   • Create a file named config.js inside the src folder.
   • Paste the following code into it, replacing the placeholder values with the actual credentials from your AWS backend setup.

   // src/config.js
   const awsConfig = {
       Auth: {
           Cognito: {
               userPoolId: 'YOUR_USER_POOL_ID',
               userPoolClientId: 'YOUR_USER_POOL_APP_CLIENT_ID',
           }
       },
       API: {
           REST: {
               ExpenseTrackerAPI: {
                   endpoint: "YOUR_API_GATEWAY_INVOKE_URL",
                   region: 'YOUR_AWS_REGION' // e.g., 'ap-southeast-1'
               }
           }
       }
   };
   export default awsConfig;

4. Run the application:

   npm start

   The app will open at http://localhost:3000.