Skip to content

Banking web application frontend only using react

Notifications You must be signed in to change notification settings

ahmedlabib02/Lebo-and-Co

 
 

Repository files navigation

Banking System Frontend

Welcome to the Banking System Frontend project. This comprehensive banking system frontend is developed using React, Tailwind CSS, and Material UI. The system caters to various user roles, each with specific functionalities.

Table of Contents

Functionalities by User Type

Normal Clients

Normal clients can access the following functionalities:

  1. Register: Register to use the web application.
  2. Open/Close Bank Account: Easily open or close their bank accounts.
  3. Apply for a Credit Card: Apply for a credit card, by uploading documents.
  4. Apply for a Loan: Apply for personal or car loans, by uploading documents.
  5. View Transactions: View their bank account and credit card transactions.
  6. View Balance: View account info as well as balance.
  7. Manage Credit Card Points: View credit card points and redeem them for cashback.
  8. Transfer Money: Transfer money to other bank accounts, whether internal, domestic, or international.
  9. Report Credit Card Issues: Report credit card theft, loss, or damage and apply for replacements.
  10. Pay Credit Card Bills: Pay their credit card bills partially or in full using bank transfers, or third-party applications.
  11. Set/Receive Reminders: Set and receive reminders for payments due for bills, loans, or credit card bills.
  12. View Credit Card Info: View credit card details as well as the credit card transactions.
  13. Third-Party Bill Payments: Have the option to pay gas, water, electricity, or telephone bills using third-party apps or through the bank itself.
  14. Report Technical Issues: Report technical issues with the system.
  15. Receive Notifications: Receive notifications about issue resolution and bank announcements.

Blind Clients

Blind clients can perform all the functionalities available to normal clients. The system is designed to be accessible for visually impaired clients, allowing them to navigate and use the application effectively with screen readers, speech-to-text, and keyboard navigation (Enter and Tab buttons).

Bankers

Bankers can perform the following actions:

  1. Approve Credit Card Applications: Review and approve credit card applications submitted by clients.
  2. Approve Loan Applications: Review and approve loan applications, whether personal or car loans.
  3. Handle Account Transactions: Manage bank account and credit card transactions for clients.
  4. View Clients: View clients' info.
  5. Client Support: Provide client support by viewing reports done by users and having the ability to respond.

System Administrators

System administrators have administrative control over the entire system:

  1. Manage User Accounts: Block and unblock user accounts, including normal clients and blind clients.
  2. Announcements: Communicate announcements and updates to all users.
  3. Forward Bug Reports: Review and forward bug reports submitted by users to the development team for resolution.
  4. Handle Reports: View the reports of clients and forward them to the developing team.

Getting Started

To run the frontend prototype locally, follow these steps:

  1. Clone this repository to your local machine.
  2. Open the project directory.
  3. Launch the prototype using a web browser.

Login Credentials

You can use the following login credentials for testing:

  • Normal Client: Username: ahmed, Password: 123
  • System Administrator: Username: admin, Password: 456
  • Banker: Username: bank, Password: 789
  • Blind Client: Username: blind, Password: 123

Authors

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this software in accordance with the terms specified in the license.

Additional Documentation

In addition to the frontend code, this repository also contains various documentation resources to assist with the development and understanding of the project:

  • User Stories: Detailed descriptions of user interactions and functionalities.
  • Class Diagram: An overview of the project's class structure.
  • Components Diagram: A visual representation of the project's components and subsystems.
  • ERD (Entity-Relationship Diagram): A diagram depicting the database structure.
  • Schema: The database schema used by the application.

About

Banking web application frontend only using react

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.0%
  • Other 1.0%