Select Page

Online Banking Web Application

 

Overview:

This is a full-stack secure banking application where users can:

  • Sign up and log in with encrypted credentials

  • View their account balance in real-time

  • Make e-transfers to other users via email

  • Deposit funds

  • View and update their profile (excluding card number)

  • Log out securely

The application emphasizes data security, component-based front-end architecture, and modular backend design, all deployed and hosted on Microsoft Azure.

 

Tech Stack

 

Frontend (React.js)

    • Built with React (function components + hooks)

    • React Router for SPA routing (/login, /signup, /dashboard, /account)

    • node-forge used to encrypt sensitive user data before sending to the server

    • Local state with useState and useEffect for dynamic data fetching and updates

    • Responsive design with modular CSS (Navigator.css, Dashboard.css, etc.)

    • Auth state persisted with localStorage

Backend (Node.js + Express)

 

    • RESTful API built with Express.js

    • Routes for:

      • POST /signup and POST /login

      • GET /balance/:id, POST /deposit/:id, POST /etransfer/:id

      • GET /getinfo/:id, PUT /saveinfo/:id

    • JWT Authentication middleware to protect sensitive routes

    • RSA Encryption/Decryption of all sensitive fields using crypto and Node’s fs module

    • bcrypt for password hashing

    • Mongoose used to model user data and persist to MongoDB

Database

 

    • MongoDB Atlas cloud-hosted database

    • Stores user records securely with hashed passwords and account balances

    • All inter-user operations like transfers are atomic and consistent

Security Features

 

    • Passwords are:

      • Encrypted with RSA on the client

      • Decrypted and hashed (bcrypt) on the server before saving

    • Encrypted fields include:

      • cardnum

      • password

      • firstName, lastName, email, and phone during profile updates

    • JWT token is issued on login and stored in localStorage

    • All protected routes are guarded by a JWT middleware

    Key Features

    Feature Description
    Signup/Login Credentials are RSA-encrypted and verified server-side
    Account Balance Displayed dynamically and updated in real-time
    Deposits Users can add funds to their account securely
    E-Transfers Users can send money to other users by email
    User Profile View and edit all fields except cardnum
    Token Auth JWT token used to protect routes and persist sessions
    Error Handling Graceful error responses for login, signup, transfers, etc.
    Responsive UI Styled consistently with reusable button and form styles

    Deployment

     

    Microsoft Azure

    The project is deployed using Microsoft Azure, taking advantage of:

      • Azure App Service for hosting the Node.js server

      • Azure Storage or Blob for React static assets

      • MongoDB Atlas for cloud-hosted database

      • Environment variables (e.g., JWT_SECRET) managed securely via Azure’s App Settings

      • Public key securely served from backend for frontend encryption

    Challenges Solved

    • Encrypting long or special-character strings (e.g., email, names) using RSA and properly handling encoding

    • Avoiding double-parsing of public keys with node-forge

    • Dealing with JWT token expiration and secure route access

    • Implementing read-only fields (cardnum) while maintaining editable UI

    Screenshots:

    Signup Page

    Dashboard Page

    Account Page

    Login Page

    Github