Narration / Transcript

Building an AI-powered Financial Behavior Analyzer with NodeJS, Python, SvelteKit, and TailwindCSS - Part 0

This is what the narrator says, not what the page shows: equations are read as sentences, code blocks are described, and citations are spoken as citations.

50 blocks · 748 spoken words · narrated Jul 26, 2026

  1. 0:00

    Introduction

  2. 0:02

    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 slash ML by working with transformers and lower-level libraries like Py Torch 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 Svelte Kit (or any frontend framework), Tailwind CSS (v4), Express dot js, and Python's AI ecosystem to build a robust and insightful financial analysis tool.

  3. 1:26

    Source code Sirneij/finance-analyzer

  4. 1:29

    An AI-powered financial behavior analyzer and advisor written in Python (aiohttp) and TypeScript (ExpressJS & SvelteKit with Svelte 5) svelte typescript python javascript css3 html5

  5. 1:45

    System architecture and requirements

  6. 1:48

    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.

  7. 2:06

    Architecture Overview

  8. 2:08

    The system consists of three main components:

  9. 2:12

    SvelteKit Frontend (Browser)

  10. 2:14

    Node.js Backend Server (Middleman)

  11. 2:17

    AI Service (Python-based Analysis)

  12. 2:21

    Component 1: SvelteKit Frontend (User Interface)

  13. 2:25

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

  14. 2:42

    Frontend Requirements

  15. 2:44

    User Authentication: Utilizes GitHub OAuth for user sign-in (Google OAuth planned).

  16. 2:50

    Data Input: Should allow users to upload financial data (CSV, PDF, and Excel — Excel support will be considered) or manually input transactions.

  17. 3:02

    Financial Dashboard: Displays real-time financial analytics, including income vs. expenses, savings rate, and other insights.

  18. 3:12

    WebSockets Support: Ensures real-time updates when AI analysis results are received from the backend.

  19. 3:20

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

  20. 3:25

    The backend, built with Node dot 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.

  21. 3:41

    Backend Requirements

  22. 3:43

    User Authentication & Database Management:

  23. 3:47

    OAuth authentication (GitHub supported, Google planned).

  24. 3:51

    Stores user-profiles and transactions in Mongo DB.

  25. 3:55

    Data Parsing & API Handling:

  26. 3:59

    Provides REST APIs to parse transaction data from CSV, PDF, and Excel.

  27. 4:05

    Saves parsed transactions in the database for later analysis.

  28. 4:10

    WebSockets for AI Communication:

  29. 4:13

    Acts as a middleman between the frontend and AI service.

  30. 4:17

    Sends user-specific transaction data to the AI service.

  31. 4:22

    Filters and authenticates user data before analysis.

  32. 4:26

    Returns analyzed results via WebSockets for real-time updates.

  33. 4:31

    Component 3: AI Service (Python)

  34. 4:35

    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.

  35. 4:48

    AI Service Requirements

  36. 4:50

    PDF Transaction Parsing:

  37. 4:53

    Uses pdf2image and pytesseract for OCR-based extraction of transaction data.

  38. 5:00

    Sends extracted data back to Node.js for validation and storage.

  39. 5:05

    Transaction Analysis & Categorization:

  40. 5:09

    Uses PyTorch & Transformers for AI-driven categorization (Income, Expenses, Savings, etc.).

  41. 5:17

    Computes total transactions, savings rate, and spending trends.

  42. 5:21

    Results are streamed via WebSockets back to the frontend for real-time updates.

  43. 5:27

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

  44. 5:32

    For NodeJS, ensure you have v20+. Set it up for an ExpressJs using TypeScript project.

  45. 5:40

    Get SvelteKit (with Svelte 5) setup and include TailwindCSS and TypeScript.

  46. 5:46

    Create a virtual environment and install those Python tools. PyTorch may take a while to conclude.

  47. 5:53

    These will be assumed in the next article.

  48. 5:56

    Outro

  49. 5:58

    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.

  50. 6:19

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