Digital-Banking

E-Banking Application Backend

This repository contains the Spring Boot Banking Management System backend, featuring JWT-based authentication, RESTful APIs for managing customers, accounts, and operations, as well as Swagger/OpenAPI documentation.

Table of Contents

1. Project Overview

2. Technology Stack

3. Prerequisites

4. Installation

5. Configuration

6. Running the Application

7. API Endpoints

   • Authentication
   • Customers
   • Accounts
   • Operations
   • Dashboard

8. Security

9. Swagger Documentation

10. Project Structure

11. License

---

Project Overview

The Banking Management Backend provides a robust API for managing bank customers, accounts (current and savings), and account operations (credit, debit, transfer). It includes analytics endpoints for dashboard insights and is secured with JWT-based authentication.

Technology Stack

• Language: Java 17
• Framework: Spring Boot 3
• Security: Spring Security, JWT (HS512)
• Persistence: Spring Data JPA, H2/MySQL
• Documentation: springdoc-openapi 2.1.0 (Swagger UI)
• Build Tool: Maven

Prerequisites

• JDK 17+
• Maven 3.6+
• (Optional) MySQL database

Installation

1. Clone the repository:

   git clone https://github.com/your-org/banking-backend.git
   cd banking-backend

2. Build the project:

   mvn clean install

Configuration

Update src/main/resources/application.properties with your database and JWT settings:

spring.application.name=eBanking
server.port=8080
spring.datasource.url=jdbc:mysql://localhost:3306/E-BANK?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.password=
spring.jpa.hibernate.ddl-auto = create
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MariaDBDialect
spring.jpa.show-sql=true
security.jwt.expiration=1800
security.jwt.secretKey = <9faa372517acd1389758d3750fc07acf00f542277f26feec1ce4593e93f64e338>

Running the Application

mvn spring-boot:run

The API will be accessible at http://localhost:8080/.

API Endpoints

Authentication

• POST /auth/login Request: { "username": "admin", "password": "admin123" } Response: { "jwt": "<token>", "type": "Bearer", "username": "admin", "roles": ["ROLE_ADMIN"] }

• GET /auth/profile (Requires Bearer token) Returns authenticated user details.

Customers

• GET /customers (ROLE_USER)

• GET /customers/{id} (ROLE_USER)

• GET /customers/search?kw={keyword} (ROLE_USER)

• POST /customers (ROLE_ADMIN)

  { "name": "Alice", "email": "alice@example.com" }

• PUT /customers/{id} (ROLE_ADMIN)

• DELETE /customers/{id} (ROLE_ADMIN)

Accounts

• GET /accounts (ROLE_USER)

• GET /accounts/{id} (ROLE_USER)

• POST /accounts/current (ROLE_ADMIN)

  { "customerId": 1, "initialBalance": 5000, "overDraft": 1000 }

• POST /accounts/saving (ROLE_ADMIN)

  { "customerId": 1, "initialBalance": 3000, "interestRate": 3.5 }

Operations

• POST /accounts/credit (ROLE_ADMIN)

  { "accountId": "<uuid>", "amount": 200, "description": "Salary" }

• POST /accounts/debit (ROLE_ADMIN)

  { "accountId": "<uuid>", "amount": 50, "description": "Grocery" }

• POST /accounts/transfer (ROLE_ADMIN)

  { "sourceAccountId": "<uuid1>", "destAccountId": "<uuid2>", "amount": 100 }

• GET /accounts/{id}/operations (ROLE_USER)

• GET /accounts/{id}/operations?page={p}&size={s} (ROLE_USER)

Dashboard

• GET /dashboard/summary (ROLE_ADMIN) Returns counts, balances, trends, and top customers.

Security

• JWT Authentication: Include Authorization: Bearer <token> in requests.

• Roles:

  • ROLE_USER: Read-only operations
  • ROLE_ADMIN: Full access

• In-Memory Users (for demo):

  user1 / password1 -> ROLE_USER
  admin / admin123 -> ROLE_ADMIN

Swagger Documentation

Swagger UI is available at:

http://localhost:8080/swagger-ui.html

It includes security integration: click "Authorize" and paste your Bearer JWT.

Project Structure

├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.example.bank
│   │   │       ├── config      # Swagger & Security configuration
│   │   │       ├── controllers # REST APIs
│   │   │       ├── dtos        # Data Transfer Objects
│   │   │       ├── entities    # JPA entities
│   │   │       ├── exceptions  # Custom exceptions
│   │   │       ├── repositories# Spring Data JPA repos
│   │   │       ├── services    # Business logic
│   │   │       └── utils       # Mappers & utilities
│   └── resources
│       └── application.yml
└── pom.xml

---

E-Banking Application Frontend

This repository contains the Angular Banking Management System frontend, featuring role-based access control, interactive UI, and integration with the Spring Boot backend.

Table of Contents

1. Project Overview

2. Technology Stack

3. Prerequisites

4. Installation

5. Configuration

6. Running the Application

7. Project Structure

8. Pages & Components

   • Authentication & Guards
   • Admin Dashboard
   • Customer Management
   • Account Operations
   • User Management
   • Profile & Settings

9. Navigation Bar

10. Charting & Dashboard

11. Styling & Theming

12. License

---

Project Overview

The frontend is an Angular 16 application providing a cyberpunk-themed UI for managing banking operations. It interacts with the backend via REST APIs and secures routes with JWT authentication and role guards.

Technology Stack

• Framework: Angular
• Language: TypeScript
• UI: Bootstrap 5 + custom cyberpunk CSS
• Charts: ng2-charts (Chart.js)
• Routing: Angular Router with Auth & Role Guards
• State: Services + RxJS

Prerequisites

• Node.js 18+
• npm 8+
• Angular CLI 16+

Installation

git clone https://github.com/your-org/banking-frontend.git
cd banking-frontend
npm install

Configuration

Edit src/environments/environment.ts:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8085'
};

Running the Application

ng serve

The app runs at http://localhost:4200/.

Project Structure

src/
├── app/
│   ├── login/
│   ├── navbar/
│   ├── dashboard/
│   ├── customers/
│   ├── customer-accounts/
│   ├── edit-customers/
│   ├── new-customers/
│   ├── accounts/
│   ├── users/
│   ├── user-list/
│   ├── pages/
│   ├── settings/
│   ├── services/
│   ├── guards/
│   └── app-routing.module.ts
│   └── ....
├── assets/
└── environments/

Pages & Components

Each component folder should include three files (.ts, .html, .css) and a placeholder for screenshots:

• LoginComponent

• DashboardComponent

• CustomersComponent

• NewCustomerComponent

• EditCustomerComponent

• CustomerAccountsComponent

• AccountsComponent

• CreateCurrentAccountComponent

• CreateSavingAccountComponent

• UserListComponent

• NewUserComponent

• SettingsComponent

Navigation Bar

The navbar.component.html implements the following menu items:

<nav class="navbar ...">
  <!-- Dashboard -->(ADMIN)
  <!-- Accounts Dropdown -->(ADMIN)
  <!-- Customers Dropdown -->(ADMIN,USER)
  <!-- Operations Link -->(ADMIN,USER)
  <!-- Users Link --> (ADMIN)
  <!-- Profile Dropdown -->(ADMIN,USER)
</nav>

Admin dashboard uses ng2-charts. Key charts:

1. Accounts by Type & Average Balance by Account Type

   

2. Account Creations Over Time

   

3. Transactions by Day of Week

   

4. Top 5 Customers by Balance

   

5. Recent Operations Feed

   

Refer to Chart.js examples in dashboard.component.ts and HTML.

Styling & Theming

Custom CSS in styles.css and component-level .css files:

• Variables for neon colors and gradients
• Keyframe animations for glow and pulse
• 3D transforms on buttons and cards
• Glassmorphism effects with backdrop-filter

Conclusion

This comprehensive banking management project brings together a robust Backend (Spring Boot, JPA, JWT, Swagger) and a modern Frontend (Angular, Bootstrap, ChartJS) to deliver a full end-to-end solution that enables:

• Centralized management of customers, accounts (current & savings), and financial transactions.
• Strong security through Spring Security and JWT, with fine-grained role-based access control.
• Smooth user experience via a responsive, cyberpunk-themed UI, 3D animations, and an interactive dashboard.
• Actionable insights powered by key metrics (account creation trends, transaction volumes, top customers, average balances).
• Extensibility through a modular architecture, making it easy to add future features (notifications, report exports, multi-currency support).