🚀 Live Demo: https://bank-account-system.onrender.com/
- A modern, responsive web application for managing banking operations with a user-friendly interface and secure transaction handling.
- User Authentication: Secure registration and login system.
- Account Management: Create and manage multiple bank accounts (Savings/Credit):
- @ Transaction Operations.
- @ Deposit funds.
- @ Withdraw funds.
- @ Transfer between accounts.
- Real-time Updates: Instant balance updates after transactions.
- Responsive Design: Works seamlessly on desktop and mobile devices.
- Interactive UI: Modern design with smooth animations and visual feedback.
- Frontend: HTML5, CSS3, JavaScript (ES6+).
- Styling: Custom CSS with CSS variables and Flexbox/Grid.
- Icons: Font Awesome 6.4.0.
- Fonts: Google Fonts (Inter).
- Backend API: RESTful API (Java Spring Boot).
- Before running this application, ensure you have:
- Backend Server: The Java Spring Boot API server must be running.
- Server URL: http://localhost:8080.
- Required endpoints: /api/auth/register, /api/auth/login, /api/accounts/*.
- Web Browser: Modern browser with JavaScript support:
- @ Chrome 90+
- @ Firefox 88+
- @ Safari 14+
- @ Edge 90+
-
Clone or Download the Project:
- bash.
-
If using git:
- git clone .
- cd banking-management-system.
-
Start the Backend Server:
- Ensure the Java Spring Boot application is running on port 8080
- The API endpoints should be accessible at http://localhost:8080/api/
- Open the Application.
- Open index.html in a web browser.
- Or serve it using a local web server:
- bash
- python -m http.server 8000
- npx http-server.
- Access the Application.
- Navigate to http://localhost:8000 (or the port you specified).
- Click on "Register" on the login page.
- Fill in username, email, and password.
- Submit the form to create your account.
- After successful registration, switch to the login form.
- Enter your username and password.
- Click "Login" to access your dashboard.
- View Accounts: See all your accounts with balances.
- Create Account: Add new Savings or Credit accounts.
- Deposit Funds: Add money to any account.
- Withdraw Funds: Remove money from accounts.
- Transfer Funds: Move money between your accounts.
- Authentication Section.
- Toggle between Login and Register forms.
- Form validation and error handling.
- Success/error messages with visual feedback.
- Sidebar Navigation: Quick access to all features.
- Profile Section: Display user information.
- Account Management: View and manage all accounts.
- Transaction Forms: Clean, intuitive forms for banking operations.
- Modern color scheme with banking-themed colors.
- Smooth animations and hover effects.
- Responsive layout for all screen sizes.
- Interactive mouse trail effect.
- The frontend communicates with these backend endpoints:
- POST /api/auth/register - User registration.
- POST /api/auth/login - User authentication.
- POST /api/accounts/create - Create new account.
- POST /api/accounts/deposit - Deposit funds.
- POST /api/accounts/withdraw - Withdraw funds.
- POST /api/accounts/transfer - Transfer between accounts.
Common Issues:
- "Network Error. Check if server is running."
- Ensure the Java backend is running on port 8080.
- Check console for CORS errors.
Forms not submitting:
- Verify all required fields are filled.
- Check browser console for JavaScript errors.
Styling issues:
- Ensure all CSS and font resources load properly.
- Check browser compatibility.
Browser Support:
- This application supports modern browsers with:
- ES6+ JavaScript support.
- CSS Grid and Flexbox support.
- Fetch API support.
- For issues related to:
- Frontend functionality: Check browser console for errors.
- Backend connectivity: Ensure API server is running.
- Transaction errors: Verify account numbers and sufficient funds.
This project is created for educational/demonstration purposes.