Modern Banking Application This project is a full-stack web application simulating basic banking functionalities, built with a modern technology stack including React for the frontend, Flask for the backend API, JWT for authentication, and SQLAlchemy for database interactions, styled with Bootstrap. It demonstrates effective client-server communication, secure authentication practices, and robust data management.
Go to the testing site hosted in Render: https://banking-app-k9rz.onrender.com
Create a sample account (name, email, password)
Log in to Dashboard using the account created in the previous step
Note:
If you want to be able to use the Transfer functionality, you will need to create a recipient account first.
User Authentication: Secure login and registration with JSON Web Tokens (JWT).
Account Management:
Display current balance and recent transactions.
Ability to transfer money between accounts.
Request a loan (with a basic approval logic).
Feature to close an account.
Transaction History: View transaction history.
Responsive UI: A user-friendly interface designed with Bootstrap for various screen sizes.
Frontend React.js: A JavaScript library for building dynamic and interactive user interfaces.
React Router: For declarative routing and navigation within the Single Page Application.
Bootstrap: A powerful CSS framework for responsive design and pre-built UI components, ensuring a polished look and feel.
HTML5 & CSS3: For structuring and custom styling of the web application.
JavaScript (ES6+): For all client-side logic, data manipulation, and interaction with the backend API.
Python: The primary programming language for the server-side logic.
Flask: A lightweight and flexible micro web framework for Python, used to build the RESTful API.
Flask-SQLAlchemy: An extension for Flask that seamlessly integrates SQLAlchemy, simplifying database operations within the Flask application.
SQLAlchemy: A robust SQL toolkit and Object-Relational Mapper (ORM) that provides a high-level, Pythonic way to interact with relational databases.
Flask-JWT-Extended: A Flask extension providing comprehensive JSON Web Token (JWT) support for secure user authentication and authorization.
SQLite: The relational database system used for persistent data storage.
This project showcases a full-stack architecture with a strong emphasis on modern development practices:
Frontend (React & Bootstrap) Component-Based Architecture: Building modular and reusable UI components with React for enhanced maintainability and scalability.
Declarative UI: Designing the user interface in React where the UI describes the desired state, and React handles updates efficiently.
State Management with React Hooks: Utilizing useState, useEffect, and useContext for effective and predictable application state management.
Asynchronous Operations: Handling secure API requests (e.g., using fetch or axios) to communicate with the Flask backend.
Responsive Design: Implementing responsive layouts and styling with Bootstrap to ensure optimal user experience across various devices.
Backend (Flask, SQLAlchemy, JWT) RESTful API Design: Developing well-structured and consistent API endpoints for banking operations (e.g., /api/auth/login, /api/transactions, /api/accounts).
Secure Authentication with JWT:
Token-Based Authorization: Implementing a stateless authentication mechanism where signed JWTs issued upon login are used to authorize subsequent client requests.
Protected Routes: Securing sensitive API endpoints that require a valid authentication token.
Object-Relational Mapping (ORM) with SQLAlchemy:
Pythonic Database Interactions: Defining database schemas and interacting with the database using Python objects, abstracting raw SQL queries.
Atomic Transactions: Ensuring data integrity for critical operations like money transfers, where all related database changes are committed or rolled back together.
Modular Application Structure: Organizing the Flask application into logical modules (e.g., blueprints, models, services) for better code organization and separation of concerns.
Robust Error Handling: Implementing comprehensive error handling for API responses, database operations, and user input validation.
If you use Github Codespaces (recommended) or Gitpod, this template will already come with Python, Node, and the PostgreSQL Database installed. If you are working locally, make sure to install Python 3.10, Node.
It is recommended to install the backend first, make sure you have Python 3.8, Pipenv, and a database engine
- Install the Python packages:
$ pipenv install - Create a .env file based on the .env.example:
$ cp .env.example .env - Make sure that you change the
BACKEND_URLvariable in the.envfile to point to your actual address.
- Make sure you are using node version 14+ and that you have already successfully installed and run the backend.
- Install the packages:
$ npm install - Start coding! start the webpack dev server
$ npm run start
- To start the front-end
npm start - To start the back-end
pipenv run start - Make sure you set the ports visibility to public
This template was built as part of the 4Geeks Academy