💳 E-Bank Frontend (Angular)

This is the frontend for the E-Bank Management System, a modern e-banking application built with Angular. It connects to a Spring Boot REST API backend to provide comprehensive customer and account management features.

---

🔗 Backend Repository

👉 e-bank-backend-springboot (Spring Boot API)

Make sure to run the backend first before launching the frontend.

---

📁 Project Structure

---

🚀 Features

✅ Implemented

• Customer Management

  • View, add, update (via modal), and delete customers

• Account Management

  • List all accounts
  • View paginated operations
  • Perform debit, credit, and transfer operations
  • View accounts by customer

• UI/UX Enhancements

  • Modern UI with sidebar navigation (NavbarComponent)
  • Bootstrap + FontAwesome styling
  • Modal-based editing (instead of full routing)

• Backend Connectivity

  • Environment-based base URL from environment.ts

---

🛡️ Security

🧩 Guards

Guard	Purpose
authenticationGuard	Checks if user is authenticated
authorizationGuard	Checks if user has ADMIN role

🛡️ Interceptor

File	Purpose
AppHttpInterceptor	Adds JWT to requests, handles 401 errors globally

---

🌐 Routing Overview

Route	Component	Purpose
/	HomeComponent	Public landing page
/login	LoginComponent	User login
/signup	SignupComponent	User registration
/admin/home	AdminHomeComponent	Admin dashboard (protected)
/admin/customers	CustomersComponent	Manage customers (admin only)
/admin/accounts	AccountsComponent	View all accounts
/admin/profile	ProfileComponent	View logged-in user's profile + accounts
/admin/notAuthorized	NotAuthorizedComponent	Unauthorized access message

---

📦 Models

Located in model/, includes:

• CustomerModel, AccountModel, OperationModel, AccountDetails, AccountOperation
• Enums: CustomerName, Type, Description

---

🧱 Tech Stack

Layer	Technology
Frontend	Angular
Backend	Spring Boot (REST API)
Auth	JWT + Angular Guards
Styling	Bootstrap, FontAwesome
Charts	(WIP) Chart.js / ng2-charts
State	Services + Observables

---

🛠️ Setup

Prerequisites

• Node.js v18+
• Angular CLI (npm install -g @angular/cli)

Run Frontend

  # Clone frontend
  git clone https://github.com/YOUHAD08/e-bank-frontend.git
  cd e-bank-frontend
  
  # Install dependencies
  npm install
  
  # Start the dev server
  ng serve

---

⚙️ Environment Configuration

File: src/environments/environment.ts

  export const environment = {
    production: false,
    backendHost: "http://localhost:8085"
  };

Make sure the backend is running on the same port (8085) or update the host accordingly.

---

📽️ Project Overview

---

👨‍💻 Author

YOUHAD Ayoub GitHub: @YOUHAD08

✅ TODOs

---

• Forgot password / password reset
• Notification/toast integration