Bank Transactions Web UI

Bank Transactions Web UI is a dashboard template built with Next.js and MongoDB for viewing monthly analytics of bank transactions. It reads transaction data from a MongoDB collection and renders it in a responsive web interface with charts, month navigation, and dark or light theme.

What is Bank Transactions Web UI?

Bank Transactions Web UI is a web-based dashboard that ingests parsed bank transaction records stored in MongoDB and displays them as monthly analytics. It is built on the Next.js React framework and uses ApexCharts.js for data visualization. The project is maintained by Stavros Melidoniotis on GitHub and pairs with a companion parser repository that converts TSV exports into MongoDB documents.

Key Features

• Multiple users — the app supports multiple user accounts, each with their own transaction data.
• Login and logout — built-in authentication flow lets users sign in and out of the dashboard.
• Month-to-month comparisons — the dashboard compares the current month against the previous month's spending and totals.
• Fully responsive layout — the interface adapts to desktop and mobile screen sizes.
• Chart visualizations with ApexCharts.js — metrics are displayed as interactive charts powered by the ApexCharts library.
• Dark and light theme — users can toggle between dark and light appearance.
• Month and year navigator — a navigation control allows browsing different months and years of transaction data.

Who is it for?

Bank Transactions Web UI is aimed at developers who want a ready-made personal finance dashboard they can deploy with their own data pipeline. It is also useful for anyone comfortable exporting their bank statements to TSV and running a parser script. Additionally, the project serves as a learning example for combining Next.js, MongoDB, and charting libraries in a real application.

What can you do with it?

• Personal finance tracking: feed your own monthly TSV exports through the parser and visualize your spending trends across months.
• Dashboard development: use this repository as a starting point for building analytics dashboards that read from MongoDB.
• Demo evaluation: log into the live demo with the provided credentials to see the interface populated with random data.

How does it work?

Each month's transactions are exported from a bank into a TSV file. The companion bank-transactions-parser script processes that TSV, extracts the useful fields, and uploads them into a MongoDB database. The Next.js application then queries that MongoDB collection and renders the data in the UI, allowing login, month navigation, and chart display.

FAQ

How do I access the live demo?

The demo is hosted at bank-transactions.melidon.dev. Log in with username 'demo' and password 'super-secret-passw0rd'. The demo data is randomly generated, so some numbers may not look realistic.

What data format does the project use?

The system uses TSV (tab-separated values) files for monthly transaction exports. The parser companion extracts information from these files and stores it in MongoDB.

Does the dashboard support multiple users?

Yes, multiple users are supported, and each user's data is separated by the authentication system.

What charting library does it use?

The charts are rendered with ApexCharts.js, a JavaScript charting library integrated into the Next.js front-end.

Is the project open source?

The repository is publicly available on GitHub under the account stavros-melidoniotis, and the companion parser is linked as a separate public repository.