404

A react banking-application that provides various functionalities for different users, including clients, bankers, admins, and visually impaired users. The goal of the project is to develop a user-friendly and accessible banking application that caters to the needs of different stakeholders. The application allows users to perform banking transactions, manage accounts, apply for credit cards and loans, view transactions, and more.

Table of Contents

• Functionalities
• Diagrams
• To use the app
• Emails and Passwords
• Authors

Functionalities

Client

1. Register: Clients can register to use the web application, either as new bank customers or by linking their existing bank accounts.
2. Open/Close Bank Account: Clients can open or close a bank account through the application.
3. Apply for Credit Card: Clients can apply for a credit card by submitting an application through the application.
4. Apply for Loan: Clients can apply for personal or car loans by submitting an application through the application.
5. View Bank Account Transactions: Clients can view their bank account transactions, including deposits, withdrawals, and transfers.
6. View Credit Card Transactions: Clients can view their credit card transactions, including purchases, payments, and cash advances.
7. View Credit Card Points: Clients can view the accumulated credit card points and redeem them for cashback or other benefits.
8. Pay Credit Card Bill: Clients can make partial or full payments for their credit card bills through the application.
9. Transfer Money: Clients can transfer money to other bank accounts, including internal, domestic, and international transfers.
10. Set/Receive Payment Reminders: Clients can set and receive reminders for payments due for gas, electricity, water, and telephone bills.
11. Receive Loan/Credit Card Payment Reminders: Clients can receive reminders for payments due for loans and credit card bills.
12. Pay Bills: Clients can pay gas, water, electricity, and telephone bills using a third-party app or through the bank itself.
13. Report Technical Issues: Clients can report technical issues with the system through the application.
14. Receive Notifications: Clients receive notifications about issue resolution and bank announcements.
15. View Submitted Applications: Clients can view their submitted prepaid , credit card, debit card, car loan and personal loan applications.
16. Report Theft/Loss/Damage Issues: Clients can report theft/loss/damage incidents through the application.

Banker

1. View and Approve/Reject Credit Card Applications: Bankers can review and approve credit card applications submitted by clients.
2. View All Cards: Bankers can view all cards in the bank.
3. Create a Card: Bankers can create debit/credit/prepaid cards for clients.
4. View and Approve/Reject Loan Application: Bankers can review and approve loan applications submitted by clients.
5. View All Loans: Bankers can view all current/used loans in the bank.
6. Create a Loan: Bankers can create personal/car loans for clients.
7. View and Approve/Reject Account Requests: Bankers can review and approve account requests submitted by clients.
8. View All Accounts: Bankers can view all accounts in the bank.
9. Create an Account: Bankers can create an account for clients.
10. View and Approve/Reject New Client Requests: Bankers can review and approve open-an-account requests submitted by clients.
11. View All Clients: Bankers can view all clients in the bank.
12. Create an Account for a New Client: Bankers can create an account for new clients.
13. Send Notifications: Bankers can send notifications to all clients/admins/bankers or a certain client/admin/banker.
14. View Theft/Loss/Damage Reports: Bankers can view the reports sent by clients regarding theft/loss/damage of credit cards and can reject or reply to them.
15. View All Transactions: Bankers can view all transactions of all clients.

Admin

1. View/Create Admins: A CTO can create and view all admins of the application.
2. View/Create Bankers: Admins can create new bankers and view them.
3. Send Notifications: Admins can send notifications to all clients/admins/bankers or a certain client/admin/banker.
4. View Technical Issues Reports: Admins can view the reports sent by clients regarding technical issues and can reject or reply to them.

Visually Impaired User

The banking application is designed to be accessible to visually impaired clients. Visually impaired users have the same user journey options as non-visually impaired clients and can perform all the functionalities mentioned above. The application includes features such as screen reader support, speech recognition support and other accessibility enhancements.

Diagrams

1. Component Diagram: A diagram illustrating the modules and subsystems of the application.
2. Class Diagram: A diagram illustrating the classes and their relationships in the application.
3. ERD: An Entity-Relationship Diagram representing the database structure.
4. Schema: A schema definition for the database.

The class diagrams should demonstrate the implementation of at least three unique design patterns.

To use the app

Prerequisites

Make sure you have the following installed before proceeding:

• Node.js: Download and Install Node.js
• npm: npm is installed along with Node.js

Getting Started

Follow the steps below to download and set up the React app:

View Site

https://main--creative-chimera-6f4332.netlify.app/

OR

Clone the repository or download the source code.

git clone https://github.com/software-engineering-2023/404

Navigate to the project's root directory.

cd milestone3/banking-website

Install the required dependencies using npm.

npm install

Start the development server.

npm start

Login as:

• Client:
  1. Username: client
  2. Password: client
• Banker:
  1. Username: banker
  2. Password: banker
• Admin:
  1. Username: admin
  2. Password: admin
• Visually impaired:
  1. Username: impaired
  2. Password: impaired

Authors

• Aly Raafat
• Omar Ashraf
• Karim Gamaleldin
• Basel Farouk
• Marwan Amgad