Bank Account Management App

A React-based banking application that simulates basic bank account operations with user registration and authentication.

Overview

This application provides a complete banking experience with:

• User registration and authentication
• Account balance management
• Deposit and withdrawal operations
• Loan request and payment functionality
• Secure logout with balance validation

Features

• User Registration: Secure user registration with password confirmation
• Account Dashboard: Real-time balance and loan status display
• Financial Operations:
  • Deposit money into account
  • Withdraw money (with balance validation)
  • Request loans (one active loan at a time)
  • Pay off existing loans
• Security: Automatic logout when balance reaches zero
• Responsive Design: Clean, modern UI built with React

Technical Stack

• Frontend: React 19.0.0
• Build Tool: Vite 6.1.0
• State Management: React useReducer hooks
• Styling: CSS with modern design patterns
• Development: ESLint for code quality

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Navigate to the project directory:

   cd Websites/Bank/main

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Project Structure

src/
├── App.jsx          # Main application component
├── components/      # Reusable UI components
├── index.css        # Global styles
├── main.jsx         # Application entry point
└── useKey.js        # Custom hook for keyboard events

Usage

1. Registration: Create a new account with username, first name, last name, and password
2. Login: Access your account dashboard
3. Banking Operations:
   • View your current balance and loan status
   • Deposit money to increase your balance
   • Withdraw money (if sufficient balance)
   • Request a loan (if no active loan)
   • Pay off your loan
4. Logout: Securely log out (automatic if balance reaches zero)

State Management

The application uses React's useReducer hook for state management:

• User State: Handles registration, authentication, and user data
• Bank State: Manages account balance, loans, and financial operations

Contributing

This is a learning project demonstrating React concepts including:

• Component composition
• State management with useReducer
• Form handling
• Conditional rendering
• Custom hooks

License

This project is for educational purposes.