PIGGYBANK

Table of Contents

• Introduction
• Live Demo
• Technologies
• Getting Started
• Architectures
• Design
• Functions
• Features
• Preview
• Epilogue

Introduction

PiggyBank is a fully responsive web application, which operates and provides various bank functions by REST API and CRUD Operations. It does not involve any real currencies, trading, contracts, or agreements since this project is aimed to demo the web development technologies and practice.

Live Demo

https://piggybank-web.netlify.app/

Technologies

FrontEnd

• ReactJS
• CSS

BackEnd

• NodeJS
• ExpressJS
• MySQL

Other Highlighted Libraries

• Axios
• JSON Web Token
• Bcrypt
• NodeMailer

Getting Started

• FrontEnd (ReactJS)

// change current directory to frontend
cd frontend

// install required node_module
npm install

// start ReactJS server
npm start

• BackEnd (NodeJS)

// change current directory to backend
cd backend

// install required node_module
npm install

// start NodeJS server
node index.js

• Database (MySQL)

// Create database and running on port 3006

Open http://localhost:3000 and you will see the page appear.

Architectures

Overview

Design

• Fully Responsive
  • Make use of CSS breakpoints, to create scalable and user-friendly display sizes in all contents for any device's screen.
• RESTful API
  • Make use of Axios, creating different communication channels for data requests and responses with the defined endpoints.
• CRUD Operation
  • Make use of MySQL, which performs the operation of Create, Read, Update, and Delete as data management.

Functions

• Account Register / Login
  • Make use of database and cookie session, which performs the data creation (registration) and cookie value authentication (login).
• Transfer / Withdrawal / Deposit
  • Make use of RESTful API and database, to update the user's balance data once the transfer request is received from users.
• Loan
  • Make use of RESTful API and database, to update the user's balance and debt data once the loan application request is received from users.
• Insurance
  • Make use of RESTful API and database, to update the user's balance and subscription data once the insurance application request is received from users.

Features

• JWT Token
  • Enhance security by the authorization with JWT Token, preventing attacks like Cross-Site Scripting XSS and Session Hijacking.
• Password Hashing
  • Make use of Bcrypt, to ensure password confidentiality in the database by a strong one-way hashing algorithm.
• Forgot Password (Email)
  • Make use of SMTP Server and NodeMailer, sending a verification code to users who are required to reset their password.
• Two-Factor Authentication (Email)
  • Once that user's account has enabled Two-Factor Authentication, a verification code will be sent through SMTP Server by NodeMailer before every login.
• Payee Registration
  • Make use of RESTful API and database, create and read the payee list from the database whenever the user performs related operations (register payee/transfer money).
• Debt
  • Make use of database, creating and updating the user's debt records for related operations (loan/pay debt).
• Transaction History
  • Make use of database, creating a detailed record (amount, time, event type, etc.) whenever the user performs an operation ( Transfer / Withdrawal / Deposit).
• Credit Scoring
  • A grade result calculated by an algorithm with the user's balance and debt, simulating the real-world credit calculation which is used in loan applications.
• Insurance / Loan Calculator
  • Make use of React component state, calculating and displaying the result by user's options and input in real-time.
• Password Changing
  • Make use of RESTful API and database, updating the user's password once the request is received.
• Account Termination
  • Make use of RESTful API and database, deleting all the data from that user once the request is received.

Preview

Desktop View

Phone View

Epilogue

Wow, you really read this to the end.
This was my very first full-stack web development project and I have learned a lot from it. Feel free to contact me for any discussion or suggestion. In the future, I will keep creating and developing new projects in order to further deepen my skills and knowledge.