Narration / Transcript

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

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.

27 blocks · 769 spoken words · narrated Jul 26, 2026

  1. 0:00

    Introduction

  2. 0:02

    In this part, we'll integrate the finance dashboard we bootstrapped and the improved analyzer model into our application. Specifically, we will integrate the WebSocket-backed server with our SvelteKit frontend.

  3. 0:15

    Prerequisite

  4. 0:17

    It's assumed you have completed the previous parts of this series.

  5. 0:21

    Live version

  6. 0:23

    Source code Sirneij/finance-analyzer

  7. 0:27

    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

  8. 0:42

    Implementation

  9. 0:44

    Step 1: WebSocket service

  10. 0:47

    To kick things off, we'll create a reusable WebSocket service. This service will handle the communication between our SvelteKit frontend and the backend server: The TypeScript code below defines NEEDEDDATA and Web Socket Service, 65 lines, from src slash lib slash services slash websocket dot ts.

  11. 1:08

    As mentioned earlier, we currently support two primary operations: analyze and summary. This WebSocket service abstracts the underlying complexities of Web Socket communication, providing a clean and manageable interface for our SvelteKit components. We'll be focusing on modifying the on Message method within these components to handle incoming data effectively.

  12. 1:32

    Step 2: Using the WebSocket in components

  13. 1:36

    Let's see how the service is used in a component: The HTML code below is 170 lines, from src slash routes slash finanalyzer slash (dashboard) slash +page dot svelte.

  14. 1:50

    We have a couple of SvelteKit-specific concepts to clarify. First, notice the dashboard directory within the routes folder. This is a Route Group in SvelteKit. SvelteKit uses file-system routing, where plus page dot svelte files define your application's routes. As SvelteKit's documentation states:

  15. 2:09

    By default, the layout hierarchy mirrors the route hierarchy.

  16. 2:14

    Route groups allow you to organize your routes without affecting the URL structure. This is useful when you want a subset of your application to share a layout without including the group's name in the URL.

  17. 2:27

    In this group, there is a layout: The HTML code below defines toggle Sidebar and check Width, 81 lines, from src slash routes slash finanalyzer slash (dashboard) slash +layout dot svelte.

  18. 2:42

    This code implements the main dashboard layout, building upon the concepts discussed in the finance dashboard article. The layout includes a responsive sidebar, a header with a theme switcher, and a main content area. The other components used in this layout can be found in the series repository.

  19. 3:01

    Back in plus page dot svelte, the WebSocket service is initialized using Svelte's on Mount lifecycle hook. This ensures that the service is started after the component has been mounted in the DOM. Immediately after initialization, requests for analysis and summaries are sent to the server. The component also subscribes to progress updates to keep the user informed about the status of their requests. The received data is then dispatched to other Svelte components for rendering (we will only zoom in on one here for brevity. Others can be seen in the repo.).

  20. 3:37

    Step 3: Visualizing Financial Data with the Finance Chart dot svelte Component

  21. 3:43

    Let's delve into the Finance Chart component, which leverages ApexChartsJS to provide a visually appealing representation of the user's spending analysis. This component offers a fullscreen mode for enhanced interaction and data exploration. The HTML code below defines toggle Fullscreen and init Chart, 195 lines, from src slash lib slash components slash transactions slash Finance Chart dot svelte.

  22. 4:09

    Since we are exclusively building our app with Svelte 5 runes, this component retrieves the spending analysis data from the $props() and then defines some states. The initChart function handles the chart plotting. It's crucial to check for the browser environment and the presence of the chart element in the DOM to prevent errors like apexcharts.common.js:... Uncaught (in promise) Error: Element not found. Dynamic import for ApexCharts is used instead of direct import at the top of the file to further mitigate these issues. The base configurations for all charts are defined in src slash lib slash utils slash helpers slash charts dot helpers dot ts: The TypeScript code below defines update Chart Theme, 87 lines, from src slash lib slash utils slash helpers slash charts dot helpers dot ts.

  23. 5:01

    These configurations define basic options for all charts and specific settings for financial charts.

  24. 5:08

    With that, we'll stop here for this part. See you in the next one!

  25. 5:13

    Outro

  26. 5:14

    Enjoyed this article? I'm a Software Engineer, Technical Writer and Technical Support Engineer 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.

  27. 5:37

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