Introduction

In the ever-evolving landscape of Software Engineering, staying up-to-date with the latest technologies is crucial. Earlier this year, I wanted to refresh my skills with Node.js (Express.js), having been a while since I last delved into them. Since I learn better by doing, I needed a project to work on but I didn't just want to build another run-of-the-mill application. I wanted a project that would be both challenging and exciting, something that would allow me to explore the fascinating world of AI while keeping my hands on the core development. Then the idea of creating an AI-powered financial data analyzer sparked my interest. It presented the perfect opportunity to not only revisit Node and its ecosystem but also to dive into the realm of AI/ML by working with transformers and lower-level libraries like PyTorch and Hugging Face, rather than relying on pre-built, heavy AI APIs. Thus, the AI Financial Analyzer project was born. This series of articles will walk you through the architecture and implementation of this project, showcasing how you can leverage SvelteKit (or any frontend framework), Tailwind CSS (v4), Express.js, and Python's AI ecosystem to build a robust and insightful financial analysis tool.

Source code

GitHub logo

Sirneij / finance-analyzer

An AI-powered financial behavior analyzer and advisor written in Python (aiohttp) and TypeScript (ExpressJS & SvelteKit with Svelte 5)

View on GitHub

System architecture and requirements

In this article, I’ll walk you through the architecture of the system we'll be building. In subsequent articles, we will delve into implementation details. So, let's explore the entire architecture, from frontend to backend, and how AI-powered transaction analysis works.

Architecture Overview

The system consists of three main components:

  1. SvelteKit Frontend (Browser)
  2. Node.js Backend Server (Middleman)
  3. AI Service (Python-based Analysis)

Component 1: SvelteKit Frontend (User Interface)

The frontend will be built with SvelteKit (Svelte 5), leveraging TailwindCSS v4 for styling and Chart.js for interactive financial data visualization. It will interact with the backend via REST APIs and WebSockets.

Frontend Requirements

  • User Authentication: Utilizes GitHub OAuth for user sign-in (Google OAuth planned).
  • Data Input: Should allow users to upload financial data (CSV, PDF, and Excel — Excel support will be considered) or manually input transactions.
  • Financial Dashboard: Displays real-time financial analytics, including income vs. expenses, savings rate, and other insights.
  • WebSockets Support: Ensures real-time updates when AI analysis results are received from the backend.

Component 2: Node.js Backend (Express.js & MongoDB)

The backend, built with Node.js (Express.js), will act as the core application logic layer. It'll handle authentication, database management, and communication between the frontend and AI service.

Backend Requirements

  • User Authentication & Database Management:
    • OAuth authentication (GitHub supported, Google planned).
    • Stores user-profiles and transactions in MongoDB.
  • Data Parsing & API Handling:
    • Provides REST APIs to parse transaction data from CSV, PDF, and Excel.
    • Saves parsed transactions in the database for later analysis.
  • WebSockets for AI Communication:
    • Acts as a middleman between the frontend and AI service.
    • Sends user-specific transaction data to the AI service.
    • Filters and authenticates user data before analysis.
    • Returns analyzed results via WebSockets for real-time updates.

Component 3: AI Service (Python)

The AI Service will be built using aiohttp (asynchronous Python web server) and integrates PyTorch, Hugging Face Transformers, numpy, pandas, and scikit-learn for financial data analysis.

AI Service Requirements

  1. PDF Transaction Parsing:
    • Uses pdf2image and pytesseract for OCR-based extraction of transaction data.
    • Sends extracted data back to Node.js for validation and storage.
  2. Transaction Analysis & Categorization:
    • Uses PyTorch & Transformers for AI-driven categorization (Income, Expenses, Savings, etc.).
    • Computes total transactions, savings rate, and spending trends.
    • Results are streamed via WebSockets back to the frontend for real-time updates.

We'll stop here for now. You are encouraged to set up your machine for the development:

  • [ ] For NodeJS, ensure you have v20+. Set it up for an ExpressJs using TypeScript project.
  • [ ] Get SvelteKit (with Svelte 5) setup and include TailwindCSS and TypeScript.
  • [ ] Create an environment variable and install those Python tools. PyTorch may take a while to conclude.

These will be assumed in the next article.

Outro

Enjoyed this article? I'm a Software Engineer and Technical Writer actively seeking new opportunities, particularly in areas related to web security, finance, healthcare, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn and X. I am also an email away.

If you found this article valuable, consider sharing it with your network to help spread the knowledge!

Author Of article : John Owolabi Idogun Read full article