Leafy Bank UI

Leafy Bank UI is the graphical user interface (GUI) for our demo banking application, showcasing the integration of MongoDB's powerful features tailored specifically for Financial Services. This responsive and intuitive UI allows users to interact with a fully functional demo banking environment, highlighting advanced capabilities like real-time data processing, secure financial transactions, and a seamless user experience. It is designed to demonstrate the potential of building modern, customer-focused financial applications with MongoDB as the backbone.

An important feature of Leafy Bank UI is the Leafy Personal Assistant, an AI-powered chatbot embedded within the application. This chatbot enhances user interaction by providing quick and accurate answers to questions related to personal banking terms, conditions, and account details, showcasing the incorporation of AI-powered assistance in financial services.

Components and Features:

Leafy Bank UI is composed of several interconnected features that demonstrate the capabilities of modern banking systems. Users can:

1. Select a Demo User

   • Choose from a range of pre-loaded demo users.
   • Each user has unique data such as recent transactions, account information, and banking scenarios.
   • Designed to create a dynamic, realistic experience for the demonstration.

2. Check User Profile

   • View the user's essential information and personal details.

3. Open New Account

   • Showcase the account creation process.
   • Allows demo users to open new banking accounts effortlessly.

4. View Account Cards and Info

   • Display detailed account information, including balances, account numbers, and summaries of opened accounts.

5. Make Account Transfers or Digital Payments

   • Simulate secure financial transactions.
   • Includes account-to-account transfers or payments between predefined demo users.

6. Query Transaction Details

   • Access and inspect the code and document generated for recent transactions.
   • Demonstrates backend integrations and real-time data storage on MongoDB.

7. Interact with the Leafy Personal Assistant

   • Chat with the AI-powered chatbot.
   • Get contextual, real-time responses related to banking terms, conditions, accounts, or operational FAQs.

8. Switch Between Demo Users

   • Seamlessly switch between pre-selected users.
   • Validate and test how accounts, transactions, and balances behave within the Leafy Bank ecosystem.

Where Does MongoDB Shine?

Leafy Bank UI demonstrates the power and flexibility of MongoDB, making it an ideal choice for financial services applications. By leveraging MongoDB’s advanced features, the backend microservices are designed to handle complex banking operations efficiently and securely.

This modern microservices architecture splits functionalities across different repositories, showcasing a real-world approach to scalable and maintainable software development. Here's how MongoDB shines in the backend services powering Leafy Bank:

1. Accounts Service

Accounts Service Repository
This service handles account operations. MongoDB excels here by offering a flexible schema, allowing the system to adapt to evolving account data structures without requiring disruptive migrations. Its scalability and adaptability ensure real-time updates and a seamless account management experience.

---

2. Transactions Service

Transactions Service Repository
Responsible for handling digital payments and account-to-account transfers, this service uses MongoDB’s multi-document ACID transactions to ensure reliable and consistent financial operations. This guarantees the integrity and correctness of data across multiple collections, making MongoDB a trusted choice for critical workflows within banking systems.

---

3. Leafy Personal Assistant Service

Chatbot Service Repository
This service powers the AI chatbot, which leverages MongoDB Atlas Vector Search. Vector search is used to store and query high-dimensional embeddings, enabling the chatbot to retrieve contextually accurate and relevant answers efficiently. MongoDB’s optimized vector search ensures fast and reliable AI-driven interactions within the Leafy Bank ecosystem.

---

By adopting a microservices architecture, Leafy Bank splits features across multiple repositories. This design not only supports scalability, modular development, and independent deployments but also underscores MongoDB’s versatility in driving dynamic and robust systems.

Explore the respective backend repositories to learn more about specific implementations and why MongoDB shines in these use cases:

• Accounts Service
• Transactions Service
• Chatbot Service Repository

This approach reflects a modern and practical way to develop software, supporting the scalability, modularity, and maintainability required for financial services in today’s fast-evolving world.

Tech Stack

Leafy Bank UI is built with a modern tech stack designed to deliver a responsive and dynamic user experience. Here's an overview of the primary technologies used:

• Database:

  • MongoDB Atlas

• Web Framework:

  • Next.js

• Styling:

  • CSS Modules
  • LeafyGreen Design System

• UI Components:

  • Leafygreen UI for customizable components
  • Bootstrap and React Bootstrap for responsive design

• Core React and Next.js:

  • next, react, react-dom

This tech stack ensures Leafy Bank UI is both powerful and user-friendly, capable of handling the interactive needs of modern financial applications.

Prerequisites

To run the Leafy Bank UI locally, ensure the following prerequisites are met.

Add environment variables

Note: Create a .env.local file within the /frontend directory.

NEXT_PUBLIC_ACCOUNTS_API_URL="http://localhost:8000"
NEXT_PUBLIC_TRANSACTIONS_API_URL="http://localhost:8001"
NEXT_PUBLIC_CROSS_BACKEND_PDF_RAG_URL="http://localhost:8002"

Backend Services

The UI depends on multiple backend services, which must be running to enable full functionality. It is recommended to configure these services to run on their respective ports, although customization is possible:

• Accounts Service (Port 8000)
  • Handles account operations and is crucial for displaying account-related functionalities.
• Transactions Service (Port 8001)
  • Manages digital payments and transfers, essential for showcasing transaction-related features.
• Chatbot Service (Port 8002)
  • Optional: Needed only if you wish to explore the Leafy Bank Personal Assistant.

The MongoDB database configuration details are provided within each backend service repository.

These prerequisites are essential for creating a complete and realistic demo environment for Leafy Bank UI. Ensure all services are running and correctly configured to enable smooth interaction across the application.

Run it Locally

Note: Once you have the backend services running, you can start the Leafy Bank UI locally. Follow these steps to run the UI on your machine:

Run on Local Machine

1. Navigate to the /frontend folder.
2. Install dependencies by running:

npm install

3. Start the frontend development server with:

npm run dev

4. The frontend will now be accessible at http://localhost:3000 by default, providing a user interface.

Run with Docker

Make sure to run this on the root directory.

1. To run with Docker use the following command:

make build

2. To delete the container and image run:

make clean

Common errors

• Check that you've created an .env.local file that contains the required environment variables.

Future tasks

• Add tests
• Code quality checks
• Automate the deployment process using GitHub Actions or CodePipeline